在Chrome调试器中进行编辑

Question

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

Answer 1

今天我遇到了这个,当时我和其他人的网站一起玩.

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

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

请注意,它仅适用于外部js文件. (47认同)
对我来说至关重要的是要知道应该保存更改(第4步).谢谢! (7认同)
令我惊讶的是，这似乎对某些人仍然有效。实时编辑在 2011/2012 年左右是可能的（请参阅 /sf/ask/514029351/），但现在已经不行了：您可以编辑脚本文件但 Chrome 执行未修改的版本。请改用本地覆盖（请参阅 /sf/answers/1608127741/）。 (4认同)
对我来说不适用于javascript _inside_ html文件.此外,如果您已将文件夹添加到工作区,请选择_local_ js文件,右键单击并将该文件映射到网络dito. (3认同)

Answer 2

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

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

在Chrome的更高版本中,标签图标已经消失,"脚本"标签被重命名为"来源" - 因此找到javascript调试器可能并不明显.更多信息请访问http://stackoverflow.com/questions/12113769/chrome-developer-tools-missing-script-tab (24认同)
Chrome调试器不允许本地修改javascript.假. (15认同)
没有这样的方法.我也无法修改"源"选项卡下的代码. (8认同)
@oMiKeY如果脚本没有被美化,你可以修改 (5认同)
@oMiKeY 什么是假的？Chrome 确实允许在调试器中修改脚本。 (2认同)

Answer 3

您可以使用 Chrome 中的“覆盖”在页面加载之间保持 javascript 更改，即使您没有托管原始源。

天哪，这是唯一对我有用的。我尝试过直接自行编辑，将文件夹添加到文件系统、片段中，但我的更改从未得到反映。添加文件夹以覆盖后，它会重新加载并反映更改！谢谢谢谢 (2认同)
这看起来很有希望，但对我来说不起作用。我想知道这是否只适用于最简单的 JS，而不适用于 Vue 或任何使用 Webpack 编译的东西。 (2认同)
这确实适用于 Webpack。使其工作的最简单方法是进入 HTML 检查器，找到 `<script src="js file"` > 右键单击 >“在源面板中显示”。然后从那里右键单击 JS 文件中的任意位置 >“保存以覆盖”。 (2认同)

Answer 4

Chrome 覆盖

Right Click在脚本 src URL 上 >Reveal in Sources panel

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

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

Answer 5

这就是你要找的东西:

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

2.-编辑文件,右键单击它,将出现一个菜单:单击" 保存"并在本地保存.

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

Answer 6

Answer 7

很简单,转到"脚本"选项卡.并选择所需的源文件,然后双击任何行进行编辑.

双击即可,没有任何反应.这可能不再起作用了...... (7认同)
如果您可以在file:// URL的情况下将更改保存到磁盘,那将是非常棒的 (4认同)
这正是我所做的,但正如人们所料,这些变化没有反映在页面上.我需要将$(selector).fadeIn()...改为$(selector).stop(true,true).fadeIn()...你知道吗？而且我希望能够在页面上看到这种情况. (3认同)
哦该死，你说得对。现在我想知道为什么 Chrome 允许我们在没有任何效果的情况下编辑任何内容。 (3认同)