在Chromedebugging器中编辑

如何在Chromedebugging器中“dynamic”编辑JavaScript代码? 这不适合我,所以我没有访问源文件。 我想编辑代码,看看他们在页面上有什么效果,在这种情况下停止排队一堆animation。

您可以使用Chrome开发人员工具中的“脚本”选项卡中的内置JavaScriptdebugging器(在以后的版本中,它是“源代码”选项卡),但是您对代码所做的更改仅在执行时通过它们表示。 这意味着对加载页面后未运行的代码的更改将不起作用。 与例如更改驻留在mouseover处理程序中的代码不同,您可以即时testing该代码。

来自Google I / O 2010活动的video介绍了Chrome开发人员工具的其他function。

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

我意识到我可以在debugging器中将一个断点附加到我想要dynamic编辑的某行代码上 。 而且, 即使在重新加载页面之后,断点仍然保留 ,我可以在断点暂停时编辑所需的更改,然后继续加载页面。

所以作为一个快速的工作,如果它适合你的情况:

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

这是一个非常棒的Chromedebugging器教程。 它显示了对脚本进行debugging器更改的非常简单的步骤。

这是你在找什么:

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

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

为了查看差异或还原您的更改,请右键单击并从菜单中selectLocal Modifications …( 本地修改 …)选项。 如果展开显示的时间戳,则会看到相对于原始文件的更改。

更详细的信息在这里: http : //www.sitepoint.com/edit-source-files-in-chrome/

很容易,去'脚本'选项卡。 并select你想要的源文件,然后双击任何一行来编辑它。

这里是我写的Chrome的jsdebugging器的一个简单的介绍。 也许它会帮助其他人寻找这方面的信息: http : //meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

您可以在Chromedebugging器的Sources选项卡下dynamic编辑javascrpit文件,但是如果刷新页面,您的更改将会丢失,要在进行更改之前暂停页面加载,则需要设置中断点,然后重新加载页面并编辑您的更改,最后取消暂停debugging器以查看您的更改生效。 Chrome调试器

我正在寻找一种方法来更改脚本并debugging新的脚本。 我设法做到的方式是:

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

  2. 重新加载页面,以便断点被击中

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

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

  5. F8继续,现在只要没有redirect和重新加载,你新粘贴的脚本就会replace原来的脚本。

由于这是一个非常stream行的问题,处理JS的实时编辑,我想指出另一个有用的选项。 正如svjacob在他的回答中所描述的那样:

我意识到我可以在debugging器中将一个断点附加到我想要dynamic编辑的某行代码上。 而且,即使在重新加载页面之后,断点仍然保留,我可以在断点暂停时编辑所需的更改,然后继续加载页面。

上面的解决scheme对我来说不适用于相当大的JS(webpack软件包 – 3.21MB缩小版本,13万行代码版本) – chrome崩溃,并要求重新加载页面以恢复所有保存的更改。 在这种情况下去的方式是小提琴手 ,您可以设置AutoRespond选项来replace任何远程资源与任何本地文件从您的计算机 – 看到这个问题的细节 。

在我的情况下,我还必须添加CORS头到小提琴手成功地模拟响应。

如果它运行在一个button上的JavaScript单击,然后在Sources> Sources(在Chrome中的开发人员工具)下按Ctrl + S进行保存就足够了 。 我一直这样做。

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