在Chrome调试器中进行编辑

247

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

javascript google-chrome debugging

— 汤姆
source

5

您可以使用Opera。Opera允许编辑JS文件。软刷新页面后，您的更改将被应用。右键单击>源>进行更改>应用更改。

— XP1 2012年

这是Chrome调试器的出色教程。它显示了对调试器进行脚本内更改的非常简单的步骤。

— SaganRitual 2012年

1

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

— 记忆

请找到此stackoverflow.com/questions/66420/…–

— stackinfostack

80

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

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

— 亚当
source

26

在更高版本的Chrome中，标签图标消失了，“脚本”标签被重命名为“源”-因此查找javascript调试器可能并不明显。一些更多的信息在这里stackoverflow.com/questions/12113769/…–

— chrisjleu

9

没有这种方法。我也无法在“源”选项卡下修改代码。

— Melab

17

Chrome调试器不允许对javascript进行本地修改。假。

— 忽略

1

@oMiKeY什么是假的？Chrome浏览器确实允许在调试器中修改脚本。

— JLRishe'5

6

@oMiKeY，如果脚本未修饰，则可以修改

— peterchaula

283

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

我意识到我可以在调试器中将断点附加到某些行上，然后再进行动态编辑。而且由于即使在重新加载页面后仍会保留断点，所以我可以在停在断点处时编辑所需的更改，然后继续让页面加载。

因此，如果您的情况适合，可以快速解决：

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

— 雅各布
source

1

谢谢！当需要在自执行匿名函数中进行更改时，我发现这很有效，该函数被称为页面加载附近。

— 彼得

1

抱歉，因为我之前尝试过此方法，但是它没有用，尽管哦，我是怎么想的。但是，对我不起作用。

— Jamie Hutber '16

8

对我来说至关重要的是要知道应该保存更改（步骤4）。谢谢！

— 谢尔盖·戈莱尼

3

是否对JavaScript的不工作里面的html文件给我。另外，如果您已将文件夹添加到工作区，请选择本地 js文件，右键单击并将该文件映射到网络dito。

— oo

1

因此，没有任何方法可以修改html文件中的脚本？

— 战士

13

这是您要寻找的：

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

2.-编辑文件，右键单击它，然后会出现一个菜单：单击“ 保存”并将其保存在本地。

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

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

— 蒿属
source

5

相当容易，请转到“脚本”标签。然后选择所需的源文件，然后双击任何行对其进行编辑。

— gn
source

4

如果您可以将更改保存到磁盘上，就很棒了：file：// URL

— Jim Blackler

3

那正是我所做的，但是更改没有像人们期望的那样反映在页面上。我需要将$（selector）.fadeIn（）...更改为$（selector）.stop（true，true）.fadeIn（）...是吗？我希望能够在页面上看到这种情况。

— 汤姆（Tom）

1

哦，该死，你是对的。我现在想的就是Chrome浏览器可以让我们编辑什么，如果没有任何效果..

— gnur

“另存为...”仅将文件保存到计算机。重新加载页面后，它不会应用更改。如果要将更改应用于JS文件以进行调试，则可以使用Opera。

— XP1 2012年

1

而这个叫tincr：chrome.google.com/webstore/detail/...

— JustGoscha

3

由于这是一个涉及JS实时编辑的非常普遍的问题，因此我想指出另一个有用的选择。如svjacob在他的回答中所述：

我意识到我可以在调试器中将断点附加到某些行上，然后再进行动态编辑。由于断点即使在重新加载页面后仍会保留，因此我能够在断点处暂停时编辑所需的更改，然后继续让页面加载。

上面的解决方案不适用于很大的JS（Webpack捆绑包-压缩版为3.21MB，修饰版中为13万行代码）-chrome崩溃并要求重新加载页面，从而恢复了所有已保存的更改。在这种情况下，解决方法是Fiddler，您可以在其中设置AutoRespond选项，以用计算机中的任何本地文件替换任何远程资源- 有关详细信息，请参见此SO问题。

就我而言，我还必须将CORS标头添加到提琴手才能成功模拟响应。

— 多米尼克
source

2

如果单击在按钮上运行的javascript，则在Sources> Sources（在chrome开发人员工具中）下进行更改，然后按Ctrl + S进行保存就足够了。我一直都这样做。

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

— 开发人员747
source

2

现在，谷歌浏览器引入了新功能。通过使用此功能，您可以在chrome浏览器中编辑代码。（永久更改代码位置）

为此，请按F12->“源”选项卡-（右侧）->“文件系统”，请选择您的代码位置。然后chrome浏览器会征求您的许可，此后该代码将变为绿色。并且您可以修改您的代码，它也会反映在您的代码位置（这意味着它将永久更改）

谢谢

— stackinfo堆栈
source

2

就像@mark的答案一样，我们可以在Chrome DevTools中创建override默认的JavaScript 代码段。最后，我们可以在页面上看到它们的影响。

— 香美酒
source

1

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

— 米切
source

1

这是一个很好的写作。不幸的是，它没有提到在调试器中编辑JS的问题，这是有问题的任务。

— 布鲁诺·布罗诺斯基

不同意。您将在最后看到具体说明如何在Chrome调试器中“动态”编辑JavaScript代码的示例。

— meeech 2013年

1

Meeech，除非我对您的发布有误解，否则您将演示如何在控制台上评估 JS。这与编辑函数不同，因此将来调用该函数时，其行为会有所不同。

— 布鲁诺·布罗诺斯基

很公平。我理解“编辑”是指围绕实时页面的值进行更改，并认为这种写操作会有所帮助，因为一旦在控制台中将其保存下来，您就可以在执行上下文中处理这些值以及其他任何内容。

— meeech 2014年

1

是的，meeech，我完全按照您的描述做了很多年。我终于对无法实现更改事件处理程序的良好反馈循环而感到沮丧。特别是那些在页面加载期间触发的事件。正如我和AaronLS在gnur答案的注释中所讨论的那样，有时在DevTools> Sources> Sources中进行编辑有效，而在其他情况下则不起作用。但是，当它起作用时，它就非常棒了！

— 布鲁诺·布罗诺斯基

1

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

— 赛义夫·塔马拉
source

您必须保持控制台处于打开状态，以便chrome会在断点处停止，否则chrome会忽略断点

— Seif Tamallah

不工作。我使用F5重新加载，但它停止了，更改了文件，然后继续运行，并得到了刚修复的相同错误。这是主页旁边的js文件

— 。–

1

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

在要更改和调试的脚本的第一行中设置断点。
重新加载页面，以便遇到断点
粘贴新脚本并在其中设置所需的断点
Ctrl + s，页面将刷新，导致命中第一行中的该断点。
F8继续，现在只要不进行重定向和重新加载，新粘贴的脚本将替换原始脚本。

— 100r
source

0

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

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

— 标记
source

0

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

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

— 马克·福尔曼
source