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

IT技术 javascript google-chrome-devtools
2021-02-04 04:25:03

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

5个回答

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

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

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

你如何在那里编辑或粘贴代码?我绝对没有在 Chrome 控制台中看到该功能。我可以从 Elements 部分编辑 JS/HTML,但这不会自动重新加载。但是在设置断点的地方,好像是只读的
2021-03-16 04:25:03
只要您想修改外部加载的脚本,这就会起作用,Chrome 和 FireFox 调试工具都不允许修改内联 javascript,即使它的执行被断点中断。
2021-03-16 04:25:03
原来这就是我要找的答案。在 javascript 代码的第一行放置一个断点。然后当中断发生时,将修改后的代码粘贴到那里。取消暂停,它的工作原理!
2021-04-03 04:25:03
不幸的是,这仍然不是一个很好的解决方案。您添加的任何代码在控制台中都不可用。例如var foo = 'bar',在脚本中添加不会暴露foo给控制台。
2021-04-08 04:25:03
外部脚本怎么了?断点似乎从它们中消失了。
2021-04-11 04:25:03

好消息,修复将于 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

随着 Chrome 65 的发布,这应该是新的公认答案。(功能已经在 Chrome Canary 中可用)
2021-03-19 04:25:03
谢谢,起初我没有找到覆盖选项卡,因为我的导航器面板(左侧面板)已折叠。
2021-03-22 04:25:03
按预期工作,但需要处理一件事。一旦你想加载你的原始 js,你必须清除覆盖配置或删除本地修改的文件(保存在你配置覆盖时指定的文件夹中)。
2021-03-25 04:25:03
这有效。即使从“元素”选项卡更改样式并使用 Ctrl+S 保存。
2021-04-01 04:25:03
我有一个文件“a.js?ver=1.2”。它作为“a.js”保存在覆盖文件夹中,而不是作为覆盖加载。有参数的时候不行吗?有解决方法吗?
2021-04-09 04:25:03

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

  • 为要替换的 url 创建文件规则
  • 编辑扩展中的js/css/etc
  • 随心所欲地重新加载:)
我不了解该软件,谁能解释一下我必须如何设置它?
2021-03-25 04:25:03
对我有窍门谢谢。在该扩展之前,我曾经使用 Fiddler for Windows。现在我可以在任何平台上调试远程文件。
2021-04-06 04:25:03

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

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

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

在此处输入图片说明

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

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

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

当您重新加载页面时,它似乎没有使用本地修改的文件。
2021-03-23 04:25:03
我使用版本 34 - 当我编辑脚本时,例如将 console.log 添加到点击事件(已经绑定)并保存,控制台输出以下消息:“重新编译和更新成功。” - 在那之后。当我触发点击事件时,我会在控制台中获得日志输出。
2021-03-28 04:25:03
你让我在“是”......但后来你失去了我在“直到你刷新整个页面”......
2021-03-28 04:25:03
什么版本的铬?是的,您可以“编辑”脚本的内容(虽然不是页面本身的脚本),但更改没有任何效果,并且 ctrl-s / save as 只是让您在本地保存脚本(如 ctrl-as in主窗口)。
2021-04-08 04:25:03