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

Posted 2023-03-07

【中文标题】Chrome 开发工具 - 修改 javascript 并重新加载

【英文标题】：Chrome Dev Tools - Modify javascript and reload

【发布时间】：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 中所做的任何更改都会在您重新加载页面时丢失。本地覆盖适用于大多数文件类型

它是如何工作的：

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

要设置本地覆盖：

打开“来源”面板。 打开覆盖选项卡。 单击设置替代。 选择要将更改保存到的目录。 在视口顶部，单击允许以授予 DevTools 对该目录的读写权限。 进行更改。”

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

【讨论】：

随着 Chrome 65 的发布，这应该是新接受的答案。 （功能已经在 Chrome Canary 中可用）

我有一个文件“a.js?ver=1.2”。它作为“a.js”保存在覆盖文件夹中，而不是作为覆盖加载。有参数的时候不工作吗？有解决办法吗？

按预期工作，但需要注意一件事。一旦你想加载你的原始 js，你必须清除覆盖配置或删除本地修改的文件（保存在配置覆盖时指定的文件夹中）。

谢谢，一开始我没有找到 Override 选项卡，因为我的导航面板（左侧面板）被折叠了。

这行得通。即使从元素选项卡更改样式并使用 Ctrl+S 保存。

【参考方案3】：

Resource Override 扩展允许您这样做：

为要替换的网址创建文件规则 编辑扩展中的 js/css/etc 根据需要随时重新加载 :)

【讨论】：

对我有用，谢谢。在该扩展之前，我曾经使用 Fiddler for Windows。现在我可以在任何平台上调试远程文件。

我不懂这个软件，谁能解释一下我必须如何设置它？

【参考方案4】：

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

【讨论】：

谢谢，伙计！它奏效了，你为我节省了很多时间和精力。

【参考方案5】：

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

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

在本地保存文件 根据需要进行编辑 利润！

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

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

【参考方案6】：

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

【讨论】：

什么版本的chrome？是的，您可以“编辑”脚本的内容（虽然不是页面本身上的脚本），但更改没有任何效果，并且 ctrl-s / save as 只是让您在本地保存脚本（如 ctrl-as in主窗口）。

我使用版本 34 - 当我编辑脚本时，例如将 console.log 添加到单击事件（已绑定）并保存，控制台输出以下消息：“重新编译和更新成功。” - 在那之后。当我触发点击事件时，我会在控制台中获得日志输出。

当您重新加载页面时，它似乎没有使用本地修改的文件。

你在“是”时让我失望了......但后来你在“直到你刷新整个页面”时失去了我......