如何在浏览器中编辑javascript,就像我可以使用Firebug编辑CSS/HTML一样？

Question

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

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

• 在生产中捕获JavaScript错误的最佳方法？
• 你如何在浏览器中编辑Javascript？
• 如何在Firebug中编辑JavaScript？
• 如何在服务器到达浏览器之前编辑服务器发送的js文件？
• 如何用本地Javascript替换生产网站的Javascript？
• 使用firefox w/firebug,如何在浏览器中编写javascript并使用.js文件对象呢？

但是,这些答案对我没有帮助,因为:

• "执行JS"(Firefox插件)似乎不起作用(不比Chrome中的控制台可以做的更多),
• 如果我使用分离的js文件,"查尔斯"可能会工作,但我的javascript嵌入在JSP中

好像如何在调试模式下在浏览器中动态修改javascript代码？是最接近我所说的,但那个人无法谈论他做了什么,因为这是为了他的雇主.

谢谢你的帮助!瑞安

Answer 1

像CSS和HTML一样编辑JavaScript的问题在于没有简洁的方法来传播更改.JavaScript可以修改DOM,发送Ajax请求,并在运行时动态修改现有对象和函数.因此,一旦您使用JavaScript加载页面,JavaScript运行后可能会完全不同.浏览器必须跟踪JavaScript代码执行的每个修改,以便在编辑JS时,它将更改回滚到干净的页面.

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

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

前两个选项很棒,因为您可以修改当前范围内的任何JavaScript变量和函数.但是,您将无法修改代码并使用"只提供"页面运行它,就像您可以使用第三个选项一样.

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

Answer 2

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

1. 打开Chrome Inspector,转到"脚本"标签.
2. 按下拉菜单,然后选择要编辑的javascript文件.
3. 双击文本字段,输入您想要的内容并删除您想要的任何内容.
4. 然后,您只需按Ctrl + S保存文件即可.

警告:如果刷新页面,则所有更改都将返回到原始文件.如果您想再次使用它,我建议将代码复制/粘贴到其他地方.

希望这可以帮助!

Answer 3

我想回到Fiddler.在玩了一段时间之后,它显然是即时编辑任何Web请求的最佳方式.无论是什么,都是JavaScript,POST,GET,HTML,XML.它是免费的,但实施起来有点棘手.这是我的HOW-TO:

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

1)下载并安装Fiddler

2)下载并安装Fiddler扩展:" 3语法 - 突出显示附加组件 "

3)重启Firefox并启用" FiddlerHook "扩展

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

5)单击Fiddler工具按钮,等待fiddler启动.

6)将浏览器指向Fiddler的测试URL:

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

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

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

a)要暂停JavaScript以允许编辑,请在" OnBeforeResponse " 函数下添加:

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

b)要暂停HTTP POST以允许在使用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上停止,并为每个脚本显示一个红色暂停标记.要继续加载页面,您需要单击每个脚本的绿色"运行至完成"按钮.(这就是为什么我们要实施[9].)

Answer 4

chrome 本地覆盖可以方便地通过服务器下载应用本地版本的 JS CSS 文件。 https://developer.chrome.com/blog/new-in-devtools-65/#overrides