Chrome 开发工具 - 修改 javascript 并重新加载答案

【问题标题】：Chrome Dev Tools - Modify javascript and reloadChrome 开发工具 - 修改 javascript 并重新加载
【发布时间】：2013-05-05 20:16:57
【问题描述】：

是否可以修改页面的 JavaScript，然后重新加载页面而不重新加载修改后的 JavaScript 文件（从而丢失修改）？

【问题讨论】：

【解决方案1】：

这是一种变通方法，但实现此目的的一种方法是在要操作的 javascript 文件或块的开头添加断点。

然后，当您重新加载时，调试器将在该断点处暂停，您可以对源代码进行任何更改，保存文件，然后通过修改后的代码运行调试器。

但正如大家所说，下次重新加载更改将消失 - 至少它可以让您运行一些稍微修改过的 JS 客户端。

【讨论】：

原来这是我一直在寻找的答案。在 javascript 代码的第一行放置一个断点。然后当中断发生时，将修改后的代码粘贴到那里。取消暂停就可以了！
如何在其中编辑或粘贴代码？我绝对没有在 Chrome 控制台中看到该功能。我可以从 Elements 部分编辑 JS/HTML，但这不会自动重新加载。但是在设置断点的地方，这似乎是只读的
不幸的是，这仍然不是一个很好的解决方案。您添加的任何代码在控制台中均不可用。例如。在脚本中添加var foo = 'bar' 不会将foo 暴露给控制台。
外部脚本怎么了？断点似乎从他们身上消失了。
只要你想修改外部加载的脚本，Chrome 和 FireFox 调试工具都不允许修改内联 javascript，即使它的执行被断点中断。

【解决方案2】：

好消息，修复将于 2018 年 3 月推出，请参阅此链接：https://developers.google.com/web/updates/2018/01/devtools

“本地覆盖允许您在 DevTools 中进行更改，并在页面加载时保留这些更改。以前，您在 DevTools 中所做的任何更改都会在您重新加载页面时丢失。本地覆盖适用于大多数文件类型

它是如何工作的：

要设置本地覆盖：

更新（2018 年 3 月 19 日）：它是实时的，详细说明在这里：https://developers.google.com/web/updates/2018/01/devtools#overrides

【讨论】：

【解决方案3】：

Resource Override 扩展允许您这样做：

【讨论】：

【解决方案4】：

【讨论】：

【解决方案5】：

我知道这不是确切问题的答案（Chrome 开发者工具），但我成功地使用了这个解决方法：http://www.telerik.com/fiddler

（很确定一些网络开发者已经知道这个工具了）

PS.我宁愿在 Chrome 中实现它作为标志 preserve after reload，现在不能这样做，论坛和讨论组在公司网络上被屏蔽:)

【讨论】：

【解决方案6】：

是的，只需在开发工具中打开“源”选项卡并导航到您要更改的脚本。直接在开发工具窗口中进行调整，然后按 ctrl+s 保存脚本 - 知道将使用新的 js，直到您刷新整个页面。

【讨论】：

什么版本的chrome？是的，您可以“编辑”脚本的内容（虽然不是页面本身上的脚本），但更改没有任何效果，并且 ctrl-s / save as 只是让您在本地保存脚本（如 ctrl-as in主窗口）。
我使用版本 34 - 当我编辑脚本时，例如将 console.log 添加到单击事件（已绑定）并保存，控制台输出以下消息：“重新编译和更新成功。” - 在那之后。当我触发点击事件时，我会在控制台中获得日志输出。
当您重新加载页面时，它似乎没有使用本地修改的文件。
你在“是”时让我失望了......但后来你在“直到你刷新整个页面”时失去了我......