Question

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

我总是可以这样做来调整CSS等，但正如这些问题所指出的那样，如何调整JS客户端并不明显：

然而，这些答案对我没有帮助，因为：

“执行JS”（Firefox插件）似乎无法正常工作（Chrome中的控制台所做的功能不多），
如果我使用单独的js文件，“查尔斯”可能会工作，但我的javascript嵌入在JSP中

似乎How to modify javascript code on the fly in browser in debugging mode?与我所说的最接近，但那个人无法谈论他所做的事情，因为这是为了他的雇主。

感谢您的帮助！莱恩

Answer 1

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

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

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

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

除此之外，据我所知，浏览器中没有编辑并运行的JavaScript编辑器。希望这会有所帮助，

Answer 2

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

打开Chrome Inspector，转到＆＃34; Scripts＆＃34;标签。
按下拉菜单，然后选择要编辑的javascript文件。
双击文本字段，输入您想要的内容并删除您想要的任何内容。
然后你要做的就是按Ctrl + S保存文件。

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

希望这有帮助！

Answer 3

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

要使用Fiddler使用Firefox操作JavaScript（即时），请执行以下操作：

1）下载并安装Fiddler

2）下载并安装Fiddler扩展程序： “3 Syntax-Highlighting add-ons”

3）重启Firefox并启用“FiddlerHook”扩展名

4）打开Firefox并启用FiddlerHook toolbar button： View > Toolbars > Customize...

5）单击Fiddler工具按钮，等待fiddler启动。

6）将您的浏览器指向Fiddler的测试网址：

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

7）添加Fiddler Rules以拦截和编辑JavaScript 在到达浏览器/服务器之前。在Fiddler点击： Rules > Customize Rules...。的 [CTRL-R] 这将启动ScriptEditor。

8）编辑并添加following rules：

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以允许停用（a-c）。

10）浏览器加载现在将在找到的每个JavaScript上停止并显示红色暂停标记每个脚本。要继续加载页面，您需要单击每个脚本的绿色“运行到完成”按钮。（这就是我们想要的原因实施[9]。）

Answer 4

Firefox Developer Edition（59.0b6）有Scratchpad（Shift + F4），您可以在其中运行javascript

Answer 5

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

Answer 6

我仍然会推荐Firebug。它不仅可以在JSP文件中调试JS，还可以增强JS Deminifier等插件的调试体验（如果你的生产JS被缩小），FireQuery，FireRainbow等等。

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

Chrome内置开发人员控制台，可让您修改javascript。

使用这些工具，您也应该能够注入自己的JS。

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

6 个答案: