如何在浏览器中编辑 Javascript？

How do you edit Javascript in the browser?

提问by Amit

I was looking for a way to edit JavaScript in a browser, such as Firefox, on the fly and execute it. Firebug allows us to edit HTML and CSS on the fly but JavaScript is a pain. I have to go back to the source and modify that.

我一直在寻找一种在浏览器（例如 Firefox）中即时编辑 JavaScript 并执行它的方法。Firebug 允许我们即时编辑 HTML 和 CSS，但 JavaScript 很痛苦。我必须回到源头并修改它。

I don't understand why the browser developer tools don't allow editing. Is there a way to do it?

我不明白为什么浏览器开发工具不允许编辑。有没有办法做到这一点？

[Update]: Marked a new answer in 2015

[更新]：2015年标记新答案

Quick pointers:

快速提示：

• IE now provides one of the best dev/debugging experience
• Chrome provides IntelliSense while writing javaScript, which is cool
• FF works the same way as 2010..!

• IE 现在提供最好的开发/调试体验之一
• Chrome在编写javaScript时提供了IntelliSense，很酷
• FF 的工作方式与 2010 相同..！

One can use all three (Firefox, Internet Explorer, and Chrome) browser consoles to update an existing function: say I had a function a()which used to do console.log('a'), I can go to console, redefine the function a()as alert('a')and execute it again to see an alert box.

可以使用所有三个（Firefox、Internet Explorer 和 Chrome）浏览器控制台来更新现有函数：假设我有一个函数a()用于执行 console.log('a')，我可以转到控制台，将该函数重新定义a()为alert('a')并再次执行以查看警告框。

When I had asked this question in 2010, browsers were not so great at debugging JavaScript and also I was probably unaware that a function can be replaced on the fly.

当我在 2010 年问这个问题时，浏览器在调试 JavaScript 方面并不是那么好，而且我可能不知道可以即时替换函数。

采纳答案by Leo

In Chrome: Open Chrome DevTools -> Sources panel, browse in left navigation, or press Ctrl+Oto open files included in the page.

在 Chrome 中：打开 Chrome DevTools -> Sources 面板，在左侧导航中浏览，或按Ctrl+O打开页面中包含的文件。

Then you can edit the file and press Ctrl+Sto save the change, and see what happens with the new codes. I usually do it with the help of break points.

然后您可以编辑文件并按Ctrl+S保存更改，看看新代码会发生什么。我通常在断点的帮助下做到这一点。

If you are debugging and want to save the changes to your local file system, you could right click on the navigation, and select Add folder to workspace:

如果您正在调试并希望将更改保存到本地文件系统，您可以右键单击导航，然后选择将文件夹添加到工作区：

In such case, if you save your changes in DevTools, the relevant file in your file system will be updated as well.

在这种情况下，如果您在 DevTools 中保存更改，文件系统中的相关文件也将更新。

---

---

For example I add a folder to workspace, in it there is a 1.js:

例如，我向工作区添加了一个文件夹，其中有一个1.js：

Then I edit the JS file in DevTools, the change is updated in local file system immediately:

然后我在 DevTools 中编辑 JS 文件，更改立即在本地文件系统中更新：

回答by Jon Onstott

Sure, I found Execute JS (for firefox) to be helpful at times, and I think it's what you're looking for:

当然，我发现 Execute JS (for firefox) 有时会很有帮助，我认为这就是你要找的：

https://addons.mozilla.org/en-US/firefox/addon/1729

https://addons.mozilla.org/en-US/firefox/addon/1729

It lets you view and modify Javascript on your page.

它允许您查看和修改页面上的 Javascript。

回答by artur grzesiak

Chrome has a pretty strong feature for making changes to JS code. You basically set some breakpoints and once hit you edit JS at your will. More info and demo-- where Paul Irish fixes a broken page.

Chrome 有一个非常强大的功能，可以更改 JS 代码。你基本上设置了一些断点，一旦点击你就可以随意编辑 JS。更多信息和演示——保罗爱尔兰修复了一个损坏的页面。

---

---

In case of FF you can use Developer Edition:

在 FF 的情况下，您可以使用Developer Edition：

JavaScript DebuggerStop, step through, examine and modify the JavaScript running in a page.

JavaScript Debugger停止、单步执行、检查和修改在页面中运行的 JavaScript。

回答by BhandariS

Chromeprovides an excellent facility to edit the javascript in the browser

Chrome为在浏览器中编辑 javascript 提供了极好的工具

step1: Launch the development tool Open Chrome, load a page from your local file system/server and open Developer Tools from the Tools menu or press Ctrl+Shift+I / Cmd+Shift+I. Navigate to the Source tab then either click the Sources icon or hit Ctrl+O to select your JavaScript file

step1：启动开发工具 打开 Chrome，从本地文件系统/服务器加载一个页面，然后从工具菜单打开开发工具或按 Ctrl+Shift+I / Cmd+Shift+I。导航到“源”选项卡，然后单击“源”图标或按 Ctrl+O 选择您的 JavaScript 文件

setp2:Edit You can now jump straight in and edit your code. Chrome also offers a useful function list to help you locate the right line — press Ctrl+Shift+O / Cmd+Shift+O

setp2:Edit 您现在可以直接进入并编辑您的代码。Chrome 还提供了一个有用的功能列表来帮助您找到正确的行 — 按 Ctrl+Shift+O / Cmd+Shift+O

step3:Save Hit Ctrl+S / Cmd+S to save your changes. This updates the file in memory and applies the changes immediately. Note however, that code won't start again so changes to initialization variables won't be affected.

步骤 3：保存 按 Ctrl+S / Cmd+S 保存更改。这会更新内存中的文件并立即应用更改。但是请注意，该代码不会再次启动，因此对初始化变量的更改不会受到影响。

To save the changes to the original file, right-click the editor and select Save or Save As…. Once done, you can refresh the page and the script will restart

要将更改保存到原始文件，请右键单击编辑器并选择“保存”或“另存为...”。完成后，您可以刷新页面，脚本将重新启动

step4: Undo Did your update cause problem? Right-click the editor and select Local modifications…. The lower pane displays all recent changes and allows you to revert back.

第 4 步：撤消您的更新是否导致问题？右键单击编辑器并选择本地修改...。下部窗格显示所有最近的更改并允许您还原。

---

---

Firefoxprovides another tool to edit javascript in the browser

Firefox提供了另一种在浏览器中编辑 javascript 的工具

setp1: Launch Scratchpad To open the Scratchpad window, press Shift F4, or go to the Web Developer menu (which is a submenu in the Tools menu on OS X and Linux), then select Scratchpad. This will open up a Scratchpad editor window. From there you can immediately start writing some JavaScript code to try.

setp1：启动 Scratchpad 要打开 Scratchpad 窗口，请按 Shift F4，或转到 Web Developer 菜单（这是 OS X 和 Linux 上工具菜单中的子菜单），然后选择 Scratchpad。这将打开一个 Scratchpad 编辑器窗口。从那里你可以立即开始编写一些 JavaScript 代码来尝试。

step2: Edit The File menu offers options to save and load JavaScript code snippets, so you can reuse code later if you like.Code completion and type information is only available from Firefox 32 onwards. To list autocomplete suggestions, press Ctrl Space. To show the popup, press Shift Space in Firefox 32 or Ctrl Shift Space in Firefox 33+.

步骤 2：编辑 文件菜单提供了保存和加载 JavaScript 代码片段的选项，因此您以后可以根据需要重用代码。代码完成和类型信息仅从 Firefox 32 开始可用。要列出自动完成建议，请按 Ctrl Space。要显示弹出窗口，请在 Firefox 32 中按 Shift Space 或在 Firefox 33+ 中按 Ctrl Shift Space。

step3:Execution Once you've written your code, select the code you want to run. If you don't select anything, all the code in the window will be run. Then choose the way you want the code to run using the buttons along the top, using the Execute menu, or using the context menu. The code is executed in the scope of the currently selected tab. Any variables you declare outside of a function will be added to the global object for that tab.

步骤 3：执行 编写代码后，选择要运行的代码。如果您不选择任何内容，则将运行窗口中的所有代码。然后使用顶部的按钮、执行菜单或上下文菜单选择您希望代码运行的方式。代码在当前选择的选项卡范围内执行。您在函数外部声明的任何变量都将添加到该选项卡的全局对象中。

There are four execution options available.

有四个执行选项可用。

1. Run
2. Inspect
3. Display
4. Reload and Run

1. 跑
2. 检查
3. 展示
4. 重新加载并运行

回答by mlhDev

This is currently not possible in Firefox OTB. See bugs 737743and 486546.

这目前在 Firefox OTB 中是不可能的。请参阅错误737743和486546。

In reference to @artur-grzesiak, "Stop, step through, examine and modify" appears to refer to variables

在参考@artur-grzesiak 时，“停止、单步执行、检查和修改”似乎是指变量

回答by red-X

To create/edit the javascript in the browser I'd use firebug(plugin for firefox) or the built in firefox developer toolbar(best used with the developer version of firefox).

要在浏览器中创建/编辑 javascript，我会使用firebug（firefox 插件）或内置的 firefox 开发人员工具栏（最好与firefox的开发人员版本一起使用）。

Since your bounty comment is asking to fix a broken website, I'd use the above tools to create a JS snippet that fixes your problem. After that I wouldn't want to execute the code in the developer toolbar every time.

由于您的赏金评论要求修复损坏的网站，我将使用上述工具创建一个 JS 代码段来解决您的问题。之后我不想每次都执行开发人员工具栏中的代码。

So... once you've created this JS snippet that fixes the site for you, you could use GreaseMonkey(plugin) to execute the site fixing script on each visit. That way you can use the site normally and don't need to execute it manually every page load.

所以...一旦你创建了这个为你修复站点的 JS 片段，你就可以使用GreaseMonkey（插件）在每次访问时执行站点修复脚本。这样您就可以正常使用该站点，而无需在每个页面加载时手动执行它。

回答by Ash Patel

In chrome version 42.0.2311 in Developer Tool by click on console you can get window where youi can edit javascript and after press enter can see its effect in browser.

在开发者工具中的 chrome 版本 42.0.2311 中，通过单击控制台，您可以获得可以编辑 javascript 的窗口，按 Enter 后可以在浏览器中查看其效果。

In Mozilla version 37.0.1 after open developer tool by click on console edit your java script code at right side of tool window and after finish editing click on run to test your java script code in browser.

在 Mozilla 版本 37.0.1 中，通过单击控制台打开开发人员工具，在工具窗口右侧编辑您的 Java 脚本代码，完成编辑后单击运行以在浏览器中测试您的 Java 脚本代码。