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

是否可以修改页面的JavaScript，然后重新加载页面，而无需重新加载修改后的JavaScript文件(从而丢失修改)?

202673 次浏览
小开
最佳答案

这是一种迂回方法，但实现这一点的一种方法是在想要操作的javascript文件或块的开头添加断点。

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

但正如每个人都说过的，下一次重新加载更改就会消失——至少它可以让你运行一些稍微修改过的JS客户端。

小开

资源覆盖扩展允许你这样做:

  • 为要替换的url创建一个文件规则
  • 编辑扩展中的js/css/etc
  • 重新加载就像你想要的:)
小开

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

(我敢肯定一些web开发人员已经知道这个工具了)

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

enter image description here

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

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

小开

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

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

工作原理:

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

设置本地覆盖:

  1. 打开Sources面板。
  2. 打开Overrides选项卡。
  3. 单击安装程序覆盖。
  4. 选择要将更改保存到的目录。
  5. 在视图的顶部，单击允许，给予DevTools对目录的读写访问权。
  6. 做出你的改变。”

更新(2018年3月19日):这是现场，详细解释在这里:https://developers.google.com/web/updates/2018/01/devtools#overrides

小开
  1. 在devtools首选项中检查“启用本地覆盖”。
  2. 转到网络选项卡，找到你想编辑的文件，右键单击它，选择Save for overrides(在sources/overrides选项卡上，你需要添加一个本地文件夹)
  3. 该文件出现在Sources选项卡上的一个新选项卡中，作为本地副本，因此您可以编辑该文件，并且在站点重新加载后，新的(编辑过的)覆盖文件将在站点上加载!
小开
是的，你可以很容易! 源→文件系统→选择容器文件夹->允许访问->打开文件，编辑并保存。 https://www.delftstack.com/howto/javascript/edit-javascript-in-the-browser/ < / p >

提交答案