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

Question

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

Answer 1

这是一个解决方法，但是你可以通过在javascript文件或块想要操作的块的开头添加一个断点来实现这一点。

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

但正如大家所说的那样，接下来重新加载的更改将会消失 - 至少它让你运行一些稍微修改过的JS客户端。

Answer 2

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

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

工作原理：

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

设置本地覆盖：

1. 打开“来源”面板。
2. 打开“覆盖”标签。
3. 单击“设置覆盖”。
4. 选择要将更改保存到的目录。
5. 在视口顶部，单击“允许”以授予DevTools对目录的读写权限。
6. 进行更改。＆＃34;

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

Answer 3

Resource Override扩展程序允许您完全执行此操作：

• 为要替换的网址创建文件规则
• 编辑扩展名
中的js / css / etc
• 根据需要重新加载：）

Answer 4

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

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

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



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

PS。我宁愿在Chrome中将其作为标记body { min-height:1200px; transition:background-color 0.75s ease; } .main-wrapper{ border-left: 9px solid grey; transition:border-left-color 0.9s ease; min-height: 1020px; } .blue { border-left-color: blue; } .green { border-left-color: green; } .red { border-left-color: red; }实现，现在无法执行此操作，论坛和讨论组在公司网络上被阻止：）

Answer 5

是的，只需打开＆＃34;来源＆＃34;在开发工具中选择并导航到要更改的脚本。 直接在开发工具窗口中进行调整，然后点击ctrl + s保存脚本 - 知道在刷新整个页面之前将使用新的js。