如何在浏览器中编辑 javascript，就像使用 Firebug 编辑 CSS/HTML 一样? [英] How can I edit javascript in my browser like I can use Firebug to edit CSS/HTML?

问题描述

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

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.

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

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:

• 在生产中捕获 JavaScript 错误的最佳方法?
• 如何在浏览器中编辑 Javascript?
• 如何在 Firebug 中编辑 JavaScript?莉>
• 如何在服务器发送的 js 文件到达我的浏览器之前对其进行编辑?
• 如何将生产网站的 Javascript 替换为本地Javascript?
• 使用 firefox w/firebug，如何在浏览器中编写 javascript 并使用 .js 文件对象?

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

However, those answers don't help me because:

• 执行 JS"(Firefox 插件)似乎不起作用(与 Chrome 中的控制台已经可以做的一样)，
• 如果我使用单独的 js 文件，Charles"可能会起作用，但我的 javascript 嵌入在 JSP 中

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

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.

感谢您的帮助！瑞恩

推荐答案

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

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.

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

But, you can modify JavaScript dynamically in a few other ways:

• URL 栏中的 JavaScript 注入:javascript: alert (1);
• 通过 JavaScript 控制台(Firefox、Chrome 和更新版本的 IE 中内置了一个)
• 如果您想修改提供给浏览器的 JavaScript 文件(即在传输过程中抓取它们并修改它们)，那么我无法提供太多帮助.我建议使用像 Fiddler
这样的调试代理

• 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 like Fiddler

前两个选项很棒，因为您可以修改当前作用域内的任何 JavaScript 变量和函数.但是，您将无法修改代码并使用刚刚服务"的方式运行它.页面，就像使用第三个选项一样.

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，就像使用 Firebug 编辑 CSS/HTML 一样?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！