Chrome Dev Tools - 修改 javascript 并重新加载

Question

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

Answer 1

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

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

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

Answer 2

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

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

这个怎么运作：

• 您指定 DevTools 应保存更改的目录。 当您在 DevTools 中进行更改时，DevTools 会将修改后的文件的副本保存到您的目录中。
• 当您重新加载页面时，DevTools 会提供本地的修改文件，而不是网络资源。

要设置本地覆盖：

1. 打开源面板。
2. 打开覆盖选项卡。
3. 单击设置替代。
4. 选择要将更改保存到的目录。
5. 在视口顶部，单击“允许”以授予 DevTools 对该目录的读写权限。
6. 做出你的改变。”

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

Answer 3

资源覆盖扩展允许您做到这一点：

• 为要替换的 url 创建文件规则
• 编辑扩展中的 js/css/etc
• 随心所欲地重新加载:)

Answer 4

1. 在 devtools 首选项中，选中启用本地覆盖。
2. 转到网络选项卡，找到要编辑的文件，单击它并选择保存以覆盖（在源/覆盖选项卡上，您需要添加本地文件夹）
3. 该文件作为本地副本出现在 Sources 选项卡上的新选项卡中，因此您可以编辑此文件，并且在站点重新加载后，新的（和已编辑的）覆盖文件将加载到站点上！

Answer 5

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

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

1. 在本地保存文件
2. 根据需要编辑
3. 利润！

完整文档： http ://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

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

Answer 6

是的，你可以轻松！ 源 -> 文件系统 -> 选择容器文件夹 -> 允许访问 -> 打开文件，编辑并保存。 https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/

Answer 7

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