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.