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

Chrome Dev Tools - Modify javascript and reload

提问by CDT

Is it possible to modify the JavaScript of a page and then reload the page without reloading the modified JavaScript file (and thus losing modifications)?

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

回答by Ashley Schroder

This is a bit of a work around, but one way you can achieve this is by adding a breakpoint at the start of the javascript file or block you want to manipulate.

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

Then when you reload, the debugger will pause on that breakpoint, and you can make any changes you want to the source, save the file and then run the debugger through the modified code.

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

But as everyone has said, next reload the changes will be gone - at least it let's you run some slightly modified JS client side.

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

回答by Nico

Great news, the fix is coming in March 2018, see this link: https://developers.google.com/web/updates/2018/01/devtools

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

"Local Overrides let you make changes in DevTools, and keep those changes across page loads. Previously, any changes that you made in DevTools would be lost when you reloaded the page. Local Overrides work for most file types

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

How it works:

怎么运行的：

• You specify a directory where DevTools should save changes. When you make changes in DevTools, DevTools saves a copy of the modified file to your directory.
• When you reload the page, DevTools serves the local, modified file, rather than the network resource.

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

To set up Local Overrides:

设置本地覆盖：

1. Open the Sources panel.
2. Open the Overrides tab.
3. Click Setup Overrides.
4. Select which directory you want to save your changes to.
5. At the top of your viewport, click Allow to give DevTools read and write access to the directory.
6. Make your changes."

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

UPDATE (March 19, 2018): It's live, detailed explanations here: https://developers.google.com/web/updates/2018/01/devtools#overrides

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

回答by laktak

The Resource Overrideextension allows you to do exactly that:

在资源覆盖扩展可以让你做到这些：

• create a file rule for the url you want to replace
• edit the js/css/etc in the extension
• reload as often as you want :)

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

回答by Mars Robertson

I know it's not the asnwer to the precise question (Chrome Developer Tools) but I'm using this workaround with success: http://www.telerik.com/fiddler

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

(pretty sure some of the web devs already know about this tool)

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

1. Save the file locally
2. Edit as required
3. Profit!

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

Full docs: http://docs.telerik.com/fiddler/KnowledgeBase/AutoResponder

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

PS.I would rather have it implemented in Chrome as a flag preserve after reload, cannot do this now, forums and discussion groups blocked on corporate network :)

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

回答by Hymansbox

Yes, just open the "Source" Tab in the dev-tools and navigate to the script you want to change . Make your adjustments directly in the dev tools window and then hit ctrl+s to save the script - know the new js will be used until you refresh the whole page.

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