在Chrome调试器中进行编辑

Question

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

Answer 1

今天我遇到了这个，当时我正在和别人的网站玩耍。

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

因此，快速解决，如果它适用于您的情况：

1. 在脚本的前一点添加断点
2. 重新加载页面
3. 将更改编辑为代码
4. CTRL + s （保存更改）
5. 取消暂停调试程序

Answer 2

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

There is a video from Google I/O 2010 event介绍了Chrome开发者工具的其他功能。

Answer 3

即使您没有托管原始来源，也可以在Chrome浏览器中使用“替代”来保留页面加载之间的javascript更改。

1. 在“开发人员工具”>“源”>“替代”下创建一个文件夹
2. Chrome会询问该文件夹的权限，然后单击“允许”
3. 在“源”>“页面”中编辑文件，然后保存（ctrl-s）。紫色点表示文件已保存在本地。

Answer 4

这就是你要找的东西：

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

2.-编辑文件，右键单击该文件，将出现一个菜单：单击保存并将其保存在本地。

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

此处有更详细的信息：http://www.sitepoint.com/edit-source-files-in-chrome/

Answer 5

非常简单，请转到“脚本”标签。并选择所需的源文件，然后双击任何行进行编辑。

Answer 6

由于这是一个非常受欢迎的问题，涉及JS的实时编辑，我想指出另一个有用的选项。正如svjacob在他的回答中所描述的那样：

  

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

上述解决方案对我来说并不适用于相当大的JS（webpack捆绑包 - 3.21MB缩小版本，美化版本中的130k行代码） - chrome崩溃并要求页面重新加载，以恢复任何已保存的更改。在这种情况下的方法是 Fiddler ，您可以在其中设置AutoRespond选项，将任何远程资源替换为您计算机上的任何本地文件 - see this SO question for details。

在我的情况下，我还必须向fiddler添加CORS头以成功模拟响应。

Answer 7

现在谷歌Chrome已经推出了新功能。使用此功能您可以在chrome浏览中编辑代码。 （代码位置永久更改）

对于那个按F12 - ＆gt;来源标签 - （右侧） - ＆gt;文件系统 - 请选择您的代码位置。然后Chrome浏览器会询问您的权限，之后该代码将沉入绿色。并且您可以修改您的代码，它也会反映您的代码位置（这意味着它将永久更改）

由于

Answer 8

这是我写的chrome中js调试器的温和介绍。也许它会帮助其他人寻找有关此问题的信息：http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

Answer 9

如果按下按钮时运行的javascript，则在Sources＆gt; Sources（在chrome中的开发人员工具中）和按Ctrl + S保存下进行更改。我一直这样做。

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

Answer 10

您可以在Chrome调试器中，在来源标签下动态编辑javascrpit文件，但是如果刷新页面，您的更改将会丢失，在进行更改之前暂停页面加载，您将需要设置断点，然后重新加载页面并编辑更改，最后取消暂停调试器以查看更改是否生效。

Answer 11

我一直在寻找一种方法来更改脚本并调试新脚本。我设法做到的方式是：

1. 在要更改和调试的脚本的第一行中设置断点。

2. 重新加载页面以便断点

3. 粘贴新脚本并在其中设置所需的断点

4. Ctrl + s，页面将刷新，导致第一行中的断点被命中。

5. F8继续，现在只要没有重定向和重新加载，新粘贴的脚本就会替换原来的脚本。

Answer 12

1. 放置一个断点
2. 右键单击断点，然后选择“编辑断点”
3. 插入您的代码。使用SHIFT + ENTER创建新行。

Answer 13

Chrome DevTools具有一个代码段面板，您可以在其中创建和编辑JavaScript代码，就像在编辑器中一样，然后执行它。 打开DevTools，然后选择“源”面板，然后选择“片段”选项卡。

https://developers.google.com/web/tools/chrome-devtools/snippets

Answer 14

就像@mark的答案一样，我们可以在Chrome DevTools中创建一个片段，以override作为默认JavaScript。最后，我们可以在页面上看到它们的效果。