如何在 chrome Web 开发人员工具中对 Javascript 进行实时更改？答案

【问题标题】：How can I make live changes to Javascript in chrome webdeveloper tool?如何在 chrome Web 开发人员工具中对 Javascript 进行实时更改？
【发布时间】：2014-04-20 01:49:06
【问题描述】：

我试图弄清楚如何对 javascript 进行更改，然后使用新的 javascript 更改重新加载页面，就像您可以即时更改 CSS 和 html 一样。我知道 javascript 将需要实际重新加载页面，但问题是一旦你重新加载它会重新下载服务器上的原始 javascript。

那么我怎样才能即时修改 javascript，以便我可以使用新的 javascript 更改来测试设计，而无需将其上传到服务器？

【问题讨论】：

使用本地开发服务器。
我真的只是想了解如何使用 chrome 开发工具更改 javascript。

标签： javascript jquery google-chrome google-chrome-devtools

【解决方案1】：

也许您想使用LiveEdit feature in Chrome？使用它就像打开开发者工具一样简单，转到 Sources 面板，然后使用 Ctrl/Cmd + Shift + O 找到您要编辑的脚本。然后点击pause按钮暂停调试，根据需要修改脚本，然后Ctrl/Cmd + S保存修改，最后点击pause/resume按钮恢复执行。

【讨论】：

这就是我要找的。虽然如果我试图更改在页面加载时运行的 javascript 怎么办？
有没有办法在脚本执行之前自动中断？所以我可以做出改变？
@user1632018 您可以在 JavaScript 文件的最顶部添加 debugger statement。
@user1632018 您还可以通过单击左侧的行号（在“源”面板中）并重新加载页面来为脚本添加断点。既然这是您要寻找的东西，请随时接受它作为答案。
这里的问题是，当我重新加载页面时，chrome 会重新下载 javascript 文件，覆盖我所做的更改。看来我只能对页面加载后运行的脚本进行更改。你能确认这个方法有效吗？如果是这样，那么它一定是我的缓存问题。