在Chrome调试器中的编辑功能

Question

在Chrome调试器中的编辑功能

javascriptgoogle-chromedebugging

317

我该如何在Chrome调试器中“动态”编辑JavaScript代码？由于不是我的代码，因此我无法访问源文件。我想编辑代码并查看它们对页面的影响，以此停止一个动画被排队多次。

- Tom

5

你可以使用Opera浏览器。Opera浏览器允许编辑JS文件。在软重载页面后，你的更改将被应用。右键点击 > 源代码 > 进行更改 > 应用更改。 - XP1

这是一篇关于Chrome调试器的绝妙教程。它展示了在调试器中对脚本进行更改的非常简单的步骤。 - SaganRitual

1

您还可以通过条件断点来“注入”代码。在给定的示例中，使用num = 5, console.log(arguments[0], num), false来更新并记录foo函数内部的值。 - mems

请查看此链接：https://dev59.com/B3VD5IYBdhLWcg3wKYT-#48460599 - stackinfostack

16个回答

93

你可以在Chrome开发者工具的“脚本”选项卡（较新版本中为“源”选项卡）下使用内置JavaScript调试器，但是你所做的代码更改只有在执行到这些代码时才生效。这意味着加载页面后未运行的代码更改将不会产生影响，而在mouseover处理程序中的代码更改则可以实时测试。

Google I/O 2010活动中还介绍了Chrome开发者工具的其他功能，你可以观看视频了解详情。

- Adam

27

在Chrome的较新版本中，标签图标已经不见了，“Scripts”选项卡更名为“Sources” - 因此可能不太容易找到JavaScript调试器。这里提供了一些更多的信息：https://dev59.com/Xmct5IYBdhLWcg3wa8s_ - chrisjleu

10

没有这样的方法。我也无法修改“资源”选项卡下的代码。 - Melab

19

Chrome调试器不允许本地修改JavaScript代码。错误的。 - omikes

2

@oMiKeY 什么是 false？Chrome 确实允许在调试器中修改脚本。 - JLRishe

11

@oMiKeY 如果脚本没有美化，你可以进行修改。 - Peter Chaula

显示剩余4条评论

92

你可以在Chrome中使用“覆盖”功能，在页面加载之间保持JavaScript更改的持久性，即使你没有托管原始源代码。

（在新版本的Chrome中，首先需要选择一个文件夹来保存覆盖文件。）

在开发者工具>源代码>覆盖下创建一个文件夹
Chrome会询问是否允许访问该文件夹，点击允许
在源代码>页面中编辑文件，然后保存（ctrl-s）。紫色的圆点表示文件已本地保存。

- Mark Foreman

2

哇，这是唯一一个对我起作用的。我已经尝试过直接编辑它本身，将文件夹添加到文件系统、代码片段中，但我的更改从未得到反映。在将文件夹添加到覆盖文件夹之后，重新加载并反映更改！谢谢，谢谢。 - Bruce

5

这看起来很有前途，但对我没用。我想知道这是否只适用于最简单的JS，而不适用于像Vue或使用Webpack编译的任何内容。 - Ryan

2

这个在Webpack上可以正常工作。最简单的方法是进入HTML检查器，找到<script src="js file">右键单击>"在源面板中显示"。然后从那里，在JS文件的任何位置右键单击>"保存用于覆盖"。 - Chris Hayes

1

重申Ryan的评论，这在Vuetify / Webpack中不起作用。 Chrome工具表明本地覆盖已经生效（源映射.js文件左下角显示蓝色/紫色点），但即使进行各种类型的软件/硬件/缓存刷新，它也不会遵守更新的代码。 - Trentium

非常感谢，这正是我在寻找的，可以完成工作！ - Burak Ozdemir

对于在这里遇到浏览器仍在运行旧代码的问题的任何人，您必须在编辑后保存文件，即使您是从浏览器（ctrl+s）进行操作。 - raquelhortab

18

Chrome 覆盖

在资源面板中打开 JS 文件。

右键单击脚本 src URL > 在资源面板中显示

2. 点击 "+ 选择覆盖文件夹" 并选择一个本地文件夹来保存文件覆盖

确保已勾选“启用本地覆盖”。

在 JS 文件中任意位置右键单击 > 保存以进行覆盖

设置完成！

只需编辑文件，然后使用CMD/CTRL + S保存即可。现在每当您刷新页面时，它将使用修改后的文件。（只要文件名保持不变）

如果您看到文件图标中有一个紫色圆点，就说明它正在工作。

- Chris Hayes

这个有变化吗？我看不到“启用本地更改”和“保存以覆盖”的选项。 - raquelhortab

5

我明白了，您首先需要选择一个用于覆盖的文件夹，并最好在提及时加以说明。 - raquelhortab

@raquelhortab 我有机会时会看一下，既然你最近也不得不这样做，如果你建议在答案中包含该步骤，那对用户可能会更有帮助。 - Chris Hayes

15

这就是你要找的内容：

1.- 导航到源选项卡并打开javascript文件

2.- 编辑文件，右键单击它将弹出菜单：点击保存并将其保存到本地。

若要查看差异或还原更改，请右键单击并从菜单中选择本地修改选项。如果展开所显示的时间戳，您将看到相对于原始文件的更改差异。

更详细的信息请参见：http://www.sitepoint.com/edit-source-files-in-chrome/

- artemisian

7

在相应位置设置断点。
右键点击断点，选择“编辑断点”。
插入你的代码。使用SHIFT+ENTER来换行。

- Lukáš Novák

5

非常简单，进入“脚本”选项卡。选择您想要的源文件，双击任何一行以进行编辑。

- gnur

5

如果您能在 file:// URL 的情况下将更改保存到磁盘上，那就太棒了。 - Jim Blackler

4

那正是我所做的，但页面上并没有反映出预期中的更改。我需要将 $(selector).fadeIn() 更改为 $(selector).stop(true,true).fadeIn() ... 懂吗？而且我希望能够在页面上看到这种变化。 - Tom

4

哦，该死，你说得对。现在我想知道为什么Chrome允许我们编辑任何东西，如果它没有任何效果的话... - gnur

1

还有一个叫做Tincr的插件：https://chrome.google.com/webstore/detail/lfjbhpnjiajjgnjganiaggebdhhpnbih - JustGoscha

@RichardBronosky 有时候它对我有效，但我还没有弄清楚规律。 - AaronLS

显示剩余5条评论

4

和@mark的回答一样，我们可以在Chrome DevTools中创建代码片段，来覆盖默认的JavaScript。最后，我们可以看到它们对页面产生的影响。

- kami wine

3

现在Google Chrome推出了一项新功能。使用此功能，您可以在Chrome浏览器中编辑代码。（对代码位置进行永久更改）

具体操作方法如下：按F12键→源代码选项卡（在右侧）→文件系统→选择您的代码位置。然后Chrome浏览器会询问您权限，之后代码将显示为绿色。您可以修改代码，并且修改后的内容也会反映到您的代码位置上（这意味着它是永久更改）。

谢谢！

- stackinfostack

3

如果是在按钮点击事件上运行的javascript代码，那么只需要在Chrome开发者工具的Sources>Sources下进行更改，然后按下Ctrl + S保存即可。我经常这样做。

如果您刷新页面，您的javascript更改将消失，但Chrome仍会记住您的断点。

- developer747

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sjacob · Accepted Answer

今天我在玩别人的网站时发现了这个问题。

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

因此，如果你的情况适用，请使用以下快速解决方法：

在脚本的早期添加一个断点
重新加载页面
将更改编辑到代码中
CTRL + s（保存更改）
取消暂停调试器