在 Chrome 调试器中进行编辑

2022-08-30 00:07:15

如何在 Chrome 调试器中“动态”编辑 JavaScript 代码?它不适合我,因此我无法访问源文件。我想编辑代码并查看它们在页面上有什么效果,在这种情况下,可以阻止动画排队很多次。


答案 1

我今天遇到了这个问题,当时我正在玩别人的网站。

我意识到,在我想要动态编辑的内容之前,我可以将调试器中的断点附加到某行代码中。由于断点即使在重新加载页面后仍然存在,因此我能够在断点处暂停时编辑所需的更改,然后继续让页面加载。

因此,作为一个快速的解决方法,如果它适用于您的情况:

  1. 在脚本中较早的点添加断点
  2. 重新加载页面
  3. 将更改编辑到代码中
  4. CTRL + s(保存更改)
  5. 取消暂停调试器

答案 2

您可以在 Chrome 开发者工具的“脚本”标签下使用内置的 JavaScript 调试器(在更高版本中,它是“源”标签),但您应用于代码的更改仅在执行通过它们时表示。这意味着对页面加载后未运行的代码的更改将不起作用。例如,与鼠标悬停处理程序中的代码更改不同,您可以动态测试这些代码。

Google I/O 2010 活动有一段视频介绍了 Chrome 开发者工具的其他功能。