如何在我的浏览器中编辑JavaScript,就像我可以使用Firebug编辑CSS / HTML?

在JSP文件中,我有一些非常复杂的Javascript。 在生产机器上,我们看到了一个我们无法理解的非常奇怪的错误。 我们从来没有能够在当地或发展环境中复制它。 这可能与javascript有关,但我还没有find一个好的方法来做到这一点:使用我的浏览器访问页面(在生产网站上),然后使用浏览器工具编辑该页面上运行的JavaScript,包括重新加载页面。

我总是能够做到这一点来调整CSS等,但正如这些问题指出,如何调整JS客户端并不明显:

  • 在生产中捕获JavaScript错误的最佳方法?
  • 你如何在浏览器中编辑Javascript?
  • 如何在Firebug中编辑JavaScript?
  • 如何在服务器到达浏览器之前编辑服务器发送的js文件?
  • 如何用本地Javascript代替生产网站的Javascript?
  • 与火狐瓦特/萤火虫,我怎样才能在浏览器中写入JavaScript,并使用.js文件对象呢?

但是,这些答案不帮助我,因为:

  • “执行JS”(火狐插件)似乎并没有工作(没有比在Chrome中已经可以做的控制台),
  • “查尔斯”可能工作,如果我使用分离的js文件,但我的JavaScript是embedded在JSP中

这似乎是如何在debugging模式下在浏览器中即时修改JavaScript代码? 是我所说的最接近的东西,但那个人不能谈论他所做的,因为这是他的雇主。

谢谢你的帮助! 瑞安

像JavaScript一样编辑JavaScript的问题可以CSS和HTML是没有干净的方式来传播更改。 JavaScript可以修改DOM,发送Ajax请求,并在运行时dynamic修改现有的对象和函数。 所以,一旦你用JavaScript加载了一个页面,在JavaScript运行之后它可能会完全不同。 浏览器将不得不跟踪你的JavaScript代码执行的每一个修改,所以当你编辑JS时,它会将更改回滚到一个干净的页面。

但是,您可以通过其他几种方式dynamic修改JavaScript:

  • 在JavaScript栏中注入JavaScript: javascript: alert (1);
  • 通过JavaScript控制台(有一个内置于Firefox,Chrome和更新版本的IE
  • 如果你想修改JavaScript文件,就像它们被提供给你的浏览器(即抓取它们在传输中并修改它们),那么我不能提供很多帮助。 我会build议使用debugging代理: http : //www.fiddler2.com/fiddler2/

前两个选项非常好,因为您可以修改当前在范围内的任何JavaScriptvariables和函数。 但是,您将无法修改代码并像第三个选项那样通过“刚送达”页面来运行代码。

除此之外,据我所知,在浏览器中没有编辑和运行的JavaScript编辑器。 希望这可以帮助,

我知道您可以在使用Google Chrome时修改JavaScript文件。

  1. 打开Chrome Inspector,进入“脚本”选项卡。
  2. 按下拉菜单并select您想要编辑的JavaScript文件。
  3. 双击文本字段,input你想要的东西,然后删除你想要的东西。
  4. 然后,您只需按Ctrl + S即可保存文件。

警告:如果刷新页面,所有更改将回到原始文件。 如果你想再次使用,我build议将代码复制/粘贴到其他地方。

希望这可以帮助!

我想回到小提琴手 。 在玩了一段时间之后,这显然是即时编辑任何Web请求的最佳方式。 成为JavaScript,POST,GET,HTML,XML什么的。 这是免费的,但实施起来有点棘手。 这是我的方法:

要使用Fiddler使用Firefox来操作JavaScript(即时),请执行以下操作:

1)下载并安装Fiddler

2)下载并安装Fiddler扩展名:“ 3 Syntax-Highlighting add-ons ”

3)重新启动Firefox并启用“ FiddlerHook ”扩展

4)打开Firefox并启用FiddlerHook 工具栏button : View > Toolbars > Customize...

5)点击Fiddler工具button,等待小提琴开始。

6)将浏览器指向Fiddler的testingurl:

 Echo Service: http://127.0.0.1:8888/ DNS Lookup: http://www.localhost.fiddler:8888/ 

7)添加提琴手规则 ,以截取和编辑JavaScript到达浏览器/服务器之前。 在Fiddler中点击: Rules > Customize Rules... [CTRL-R]这将启动ScriptEditor。

8)编辑并添加以下规则 :


a)要暂停JavaScript以允许编辑,请在“ OnBeforeResponse ”function下添加:

 if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){ oSession["x-breakresponse"]="reason is JScript"; } 

b)要使用POST动词暂停HTTP POST以允许编辑,请编辑“ OnBeforeRequest ”:

 if (oSession.HTTPMethodIs("POST")){ oSession["x-breakrequest"]="breaking for POST"; } 

c)要暂停对XML文件的请求以允许编辑,请编辑“ OnBeforeRequest ”:

 if (oSession.url.toLowerCase().indexOf(".xml")>-1){ oSession["x-breakrequest"]="reason_XML"; } 

[9] TODO:编辑上面的CustomRules.js以允许禁用(ac)

10)浏览器加载将停止在每个发现的JavaScript上,并为每个脚本显示一个红色的暂停标记。 为了继续加载页面,您需要点击每个脚本的绿色“运行完成”button。 (这就是为什么我们要实现[9]。)

我仍然会推荐Firebug。 它不仅可以在JSP文件中debuggingJS,还可以通过JS Deminifier (如果生产JS被缩小), FireQueryFireRainbowJS Deminifier来增强debugging体验。

还有Firebug lite,它不过是一个小书签。 它可以让你做有限的事情,但仍然是有用的。

Chrome作为内置的开发者控制台,可以让你修改JavaScript。

使用这些工具,你也应该可以注入你自己的JS。