如何像使用 Firebug 编辑 CSS/HTML 一样在浏览器中编辑 javascript？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6657229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML?
提问by Ryan
Within JSP files, I have some pretty complicated Javascript. On a production machine, we're seeing a very weird bug that we have not been able to understand. We have never been able to replicate it in a local or development environment. It might be related to the javascript, but I haven't found a good way to do this: use my browser to visit the page (on the production website) and then use browser tools to edit the javascript that runs on that page, including on reloads of the page.
在 JSP 文件中，我有一些非常复杂的 Javascript。在生产机器上，我们看到了一个我们无法理解的非常奇怪的错误。我们从未能够在本地或开发环境中复制它。它可能与 javascript 有关，但我还没有找到一个好的方法来做到这一点：使用我的浏览器访问页面（在生产网站上），然后使用浏览器工具编辑在该页面上运行的 javascript，包括在页面重新加载时。
I'm always able to do this to tweak CSS etc, but as these questions point out, it's not obvious how to tweak JS client-side:
我总是能够这样做来调整 CSS 等，但正如这些问题所指出的，如何调整 JS 客户端并不明显：
- Best way to capture JavaScript errors in production?
- How do you edit Javascript in the browser?
- How to edit JavaScript in Firebug?
- How can I edit a js file sent by the server before it gets to my browser?
- How to replace Javascript of production website with local Javascript?
- with firefox w/firebug, how can I write javascript in the browser and use the .js file objects also?
- 在生产中捕获 JavaScript 错误的最佳方法？
- 如何在浏览器中编辑 Javascript？
- 如何在 Firebug 中编辑 JavaScript？
- 如何在服务器发送的 js 文件到达我的浏览器之前对其进行编辑？
- 如何用本地 Javascript 替换生产网站的 Javascript？
- 使用 firefox w/firebug，如何在浏览器中编写 javascript 并使用 .js 文件对象？
However, those answers don't help me because:
但是，这些答案对我没有帮助，因为：
- "Execute JS" (Firefox addon) doesn't seem to work (doesn't do more than the console in Chrome already can do),
- "Charles" might work if I'd used separated js files, but my javascript is embedded in JSP
- “执行 JS”（Firefox 插件）似乎不起作用（除了 Chrome 中的控制台已经可以做到的之外），
- 如果我使用单独的 js 文件，“Charles”可能会工作，但我的 javascript 嵌入在 JSP 中
It seems like How to modify javascript code on the fly in browser in debugging mode?is the closest thing to what I'm talking about, but that guy isn't able to talk about what he did because it was for his employer.
似乎如何在调试模式下在浏览器中动态修改 javascript 代码？是最接近我所说的，但是那个人无法谈论他所做的事情，因为那是为了他的雇主。
Thanks for your help! Ryan
谢谢你的帮助！瑞安
采纳答案by Chris Laplante
The problem with editing JavaScript like you can CSS and HTML is that there is no clean way to propagate the changes. JavaScript can modify the DOM, send Ajax requests, and dynamically modify existing objects and functions at runtime. So, once you have loaded a page with JavaScript, it might be completely different after the JavaScript has run. The browser would have to keep track of every modification your JavaScript code performs so that when you edit the JS, it rolls back the changes to a clean page.
像编辑 CSS 和 HTML 一样编辑 JavaScript 的问题在于没有干净的方法来传播更改。JavaScript 可以修改 DOM，发送 Ajax 请求，并在运行时动态修改现有对象和函数。所以，一旦你用 JavaScript 加载了一个页面，在 JavaScript 运行之后它可能会完全不同。浏览器必须跟踪您的 JavaScript 代码执行的每次修改，以便在您编辑 JS 时，将更改回滚到干净的页面。
But, you can modify JavaScript dynamically a few other ways:
但是，您可以通过其他几种方式动态修改 JavaScript：
- JavaScript injections in the URL bar:
javascript: alert (1); - Via a JavaScript console (there's one built into Firefox, Chrome, and newer versions of IE
- If you want to modify the JavaScript files as they are served to your browser (i.e. grabbing them in transit and modifying them), then I can't offer much help. I would suggest using a debugging proxy: http://www.fiddler2.com/fiddler2/
- URL 栏中的 JavaScript 注入：
javascript: alert (1); - 通过 JavaScript 控制台（Firefox、Chrome 和更新版本的 IE 中内置了一个
- 如果您想修改提供给浏览器的 JavaScript 文件（即在传输过程中抓取它们并修改它们），那么我无法提供太多帮助。我建议使用调试代理：http: //www.fiddler2.com/fiddler2/
The first two options are great because you can modify any JavaScript variables and functions currently in scope. However, you won't be able to modify the code and run it with a "just-served" page like you can with the third option.
前两个选项很棒，因为您可以修改当前作用域内的任何 JavaScript 变量和函数。但是，您将无法像使用第三个选项一样修改代码并使用“刚刚提供”的页面运行它。
Other than that, as far as I know, there is no edit-and-run JavaScript editor in the browser. Hope this helps,
除此之外，据我所知，浏览器中没有可编辑并运行的 JavaScript 编辑器。希望这可以帮助，
回答by Jacob
I know that you can modify a javascript file when using Google Chrome.
我知道您可以在使用 Google Chrome 时修改 javascript 文件。
- Open up Chrome Inspector, go to the "Scripts" tab.
- Press the drop-down menu and select the javascript file that you want to edit.
- Double click in the text field, type in what ever you want and delete whatever you want.
- Then all you have to do is press Ctrl + S to save the file.
- 打开 Chrome Inspector，转到“脚本”选项卡。
- 按下拉菜单并选择要编辑的 javascript 文件。
- 双击文本字段，输入您想要的内容并删除您想要的任何内容。
- 然后你所要做的就是按 Ctrl + S 保存文件。
Warning: If you refresh the page, all changes will go back to original file. I recommend to copy/paste the code somewhere else if you want to use it again.
警告：如果您刷新页面，所有更改将返回到原始文件。如果您想再次使用它，我建议将代码复制/粘贴到其他地方。
Hope this helps!
希望这可以帮助！
回答by not2qubit
I'd like to get back to Fiddler. After having played with that for a while, it is clearly the best way to edit any web requests on-the-fly. Being JavaScript, POST, GET, HTML, XML whatever and anything. It's free, but a little tricky to implement. Here's my HOW-TO:
我想回到Fiddler。在玩了一段时间之后，这显然是即时编辑任何 Web 请求的最佳方式。作为 JavaScript、POST、GET、HTML、XML 任何东西。它是免费的，但实施起来有点棘手。这是我的操作方法：
To use Fiddler to manipulate JavaScript (on-the-fly) with Firefox, do the following:
要使用 Fiddler 在 Firefox 中操作 JavaScript（即时），请执行以下操作：
1) Download and install Fiddler
1) 下载并安装Fiddler
2) Download and install the Fiddler extension: "3 Syntax-Highlighting add-ons"
2) 下载并安装 Fiddler 扩展：“ 3 Syntax-Highlighting add-ons”
3) Restart Firefox and enable the "FiddlerHook" extension
3) 重启 Firefox 并启用“ FiddlerHook”扩展
4) Open Firefox and enable the FiddlerHook toolbar button:
View > Toolbars > Customize...
4) 打开 Firefox 并启用 FiddlerHook工具栏按钮：
View > Toolbars > Customize...
5) Click the Fiddler tool button and wait for fiddler to start.
5）点击Fiddler工具按钮，等待fiddler启动。
6) Point your browser to Fiddler's test URLs:
6) 将浏览器指向 Fiddler 的测试 URL：
Echo Service: http://127.0.0.1:8888/
DNS Lookup: http://www.localhost.fiddler:8888/
7) Add Fiddler Rulesin order to intercept and edit JavaScript
before reaching the browser/server. In Fiddler click:
Rules > Customize Rules.... [CTRL-R]This will start the ScriptEditor.
7) 添加Fiddler 规则，以便在到达浏览器/服务器之前拦截和编辑 JavaScript。在 Fiddler 中点击：
Rules > Customize Rules...。[CTRL-R]这将启动脚本编辑器。
8) Edit and Add the following rules:
8) 编辑并添加以下规则：
a)To pause JavaScript to allow editing, add under the function "OnBeforeResponse":
a)要暂停 JavaScript 以允许编辑，请在函数“ OnBeforeResponse”下添加：
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "javascript")){
oSession["x-breakresponse"]="reason is JScript";
}
b)To pause HTTP POSTs to allow editing when using the POST verb, edit "OnBeforeRequest":
b)要在使用 POST 动词时暂停 HTTP POST 以允许编辑，请编辑“ OnBeforeRequest”：
if (oSession.HTTPMethodIs("POST")){
oSession["x-breakrequest"]="breaking for POST";
}
c)To pause a request for an XML file to allow editing, edit "OnBeforeRequest":
c)要暂停对 XML 文件的请求以允许编辑，请编辑“ OnBeforeRequest”：
if (oSession.url.toLowerCase().indexOf(".xml")>-1){
oSession["x-breakrequest"]="reason_XML";
}
[9] TODO: Edit the above CustomRules.jsto allow for disabling (a-c).
[9] TODO：编辑以上内容CustomRules.js以允许禁用(ac)。
10) The browser loading will now stop on every JavaScript found and display a red pause mark for every script. In order to continue loading the page you need to click the green "Run to Completion" button for every script. (Which is why we'd like to implement [9].)
10) 浏览器加载现在将在找到每个 JavaScript 时停止，并为每个脚本显示一个红色暂停标记。为了继续加载页面，您需要为每个脚本单击绿色的“运行完成”按钮。（这就是我们想要实现 [9] 的原因。）
回答by Mindau
Firefox Developer Edition (59.0b6) has Scratchpad (Shift +F4) where you can run javascript
Firefox Developer Edition (59.0b6) 有 Scratchpad (Shift +F4)，您可以在其中运行 javascript
回答by Mrchief
I would still recommend Firebug. Not only it can debug JS within your JSP files, it can enhance debugging experience with addons like JS Deminifier(if your production JS is minified), FireQuery, FireRainbowand more.
我仍然会推荐 Firebug。它不仅可以在您的 JSP 文件中调试 JS，还可以通过插件JS Deminifier（如果您的生产 JS 被缩小）等来增强调试体验FireQuery，FireRainbow等等。
There is also Firebug lite which is nothing but a bookmarklet. It lets you do limited things but still is useful.
还有 Firebug lite，它只是一个书签。它可以让你做有限的事情，但仍然很有用。
Chrome as a developer console built-in that would let you modify javascript.
Chrome 作为内置的开发人员控制台，可让您修改 javascript。
Using these tools, you should be able to inject your own JS too.
使用这些工具，您也应该能够注入自己的 JS。
