javascript - 如何在浏览器中编辑 Javascript？

Question

我一直在寻找一种在浏览器(例如 Firefox)中即时编辑并执行 JavaScript 的方法。 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 -> Sources 面板，在左侧导航中浏览，或按 Ctrl+O 打开包含在页面。

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

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

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

---

比如我在workspace中添加了一个文件夹，里面有一个1.js:

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