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


192

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

Answers:


216

这是一个变通办法,但是可以实现此目的的一种方法是在要处理的javascript文件或块的开头添加断点。

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

但是正如大家所说,下次重新加载更改将不复存在-至少让我们运行一些经过稍微修改的JS客户端。


10
原来这是我在寻找的答案。在javascript代码的第一行上放置一个断点。然后,当中断发生时,将修改后的代码粘贴到那里。取消暂停,即可使用!
尼古拉斯·布拉斯根

您如何在其中编辑或粘贴代码?我绝对不会在Chrome控制台中看到该功能。我可以从“元素”部分编辑JS / HTML,但这不会自动重新加载。但是在设置断点的地方,这似乎是只读的
乔什·萨特菲尔德

不幸的是,这仍然不是一个很好的解决方案。您添加的任何代码在控制台中均不可用。例如,添加var foo = 'bar'脚本不会foo向控制台公开。
AgmLauncher

外部脚本怎么了?断点似乎从它们消失了。
OlehZiniak

只要您想修改外部加载的脚本,此方法就可以使用,即使Chrome的执行工具因断点而中断,Chrome或FireFox调试工具都不允许修改内联javascript。
Marek

146

好消息,修复程序将于2018年3月发布,请参见以下链接:https : //developers.google.com/web/updates/2018/01/devtools

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

这个怎么运作:

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

设置本地替代:

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

更新(2018年3月19日):在此处进行实时详细说明:https : //developers.google.com/web/updates/2018/01/devtools#overrides


12
随着Chrome 65的发布,这应该是新的接受的答案。(功能已在Chrome Canary中提供)
Micros'3

1
我有一个文件“ a.js?ver = 1.2”。它以“ a.js”的形式保存在替代文件夹中,而不作为替代加载。有参数时不起作用吗?有解决方法吗?
拉尔夫

按预期工作,但需要注意一件事。一旦您要加载原始js,就必须清除覆盖配置或删除本地修改的文件(保存在配置覆盖时指定的文件夹中)。
Muhammad Murad Haider

61

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

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

1
骗我了吗,谢谢。在该扩展之前,我曾经使用Windows的Fiddler。现在,我可以在任何平台上调试远程文件。
艾哈迈德·阿尔菲

我不了解该软件,有人可以解释我必须如何设置吗?
黑色

0

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

(肯定有些Web开发人员已经知道此工具)

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

在此处输入图片说明

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

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


-8

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


什么版本的铬?是的,您可以“编辑”脚本的内容(尽管不是页面本身上的脚本),但是更改没有任何效果,并且ctrl -s /另存为只允许您将脚本保存在本地(如ctrl-as in主窗口)。
davidkonrad 2014年

我使用版本34-编辑脚本(例如,将console.log添加到click事件(已绑定)并保存)时,控制台输出以下消息:“重新编译和更新成功”。- 之后。当我触发click事件时,我在控制台中获得了日志输出。
jacksbox 2014年

当您重新加载页面时,它似乎没有使用本地修改的文件。
杰克·威尔逊

32
您让我为“是” ...但是后来您因“直到刷新整个页面”而迷失了我。–
Cool Blue
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.