你如何在浏览器中编辑Javascript？

Question

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

我不明白为什么浏览器开发者工具不允许编辑。有办法吗？

[更新]： 在2015年标出了新的答案

快速指针：

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

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

当我在2010年提出这个问题时，浏览器在调试JavaScript方面并不是那么出色，而且我可能还没有意识到可以动态替换一个函数。

Answer 1

在Chrome中：打开Chrome DevTools - ＆gt; “来源”面板，在左侧导航栏中浏览，或按 Ctrl + O 打开页面中包含的文件。

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

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

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

---

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

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

Answer 2

当然，我发现Execute JS（对于firefox）有时很有帮助，我认为这就是你要找的东西：

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

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

Answer 3

Chrome具有非常强大的功能，可以对JS代码进行更改。你基本上设置了一些断点，一旦命中你就按你的意愿编辑JS。 More info and demo - Paul Irish修复了一个破页。

---

如果是FF，您可以使用Developer Edition：

  

JavaScript调试器   停下来，一步一步地检查和修改   JavaScript在页面中运行。

Answer 4

Chrome 提供了在浏览器中编辑javascript的绝佳工具

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

SETP2：编辑 您现在可以直接跳转并编辑代码。 Chrome还提供了一个有用的功能列表，可帮助您找到正确的行 - 按Ctrl + Shift + O / Cmd + Shift + O

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

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

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

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

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

第二步：编辑 “文件”菜单提供了保存和加载JavaScript代码段的选项，因此您可以在以后重复使用代码。代码完成和类型信息仅在Firefox 32以后可用。要列出自动填充建议，请按Ctrl Space。要显示弹出窗口，请按Firefox 32中的Shift Space或Firefox 33 +中的Ctrl Shift Space。

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

有四种可用的执行选项。

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

Answer 5

要在浏览器中创建/编辑javascript，请使用firebug（firefox的插件）或内置的firefox开发人员工具栏（最适用于developer version of firefox）。

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

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

Answer 6

这在Firefox OTB中目前无法实现。请参阅错误737743和486546。

参考@artur-grzesiak，＆＃34;停止，单步执行，检查和修改＆＃34;似乎是指variables

Answer 7

Chrome 最新版本支持对 UI 资产文件（如 CSS 和 JS）进行本地覆盖。任何直接在 HTML DOM 中完成的更新都不起作用。 https://developer.chrome.com/blog/new-in-devtools-65/#overrides

Answer 8

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

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