我如何在Chrome调试器中“动态”编辑JavaScript代码?它不适合我,所以我没有权限访问源文件。我想编辑代码,看看它们对页面有什么影响,在这种情况下,阻止动画排队一堆次。


当前回答

你可以在Chrome中使用“Overrides”来保存页面加载之间的javascript更改,即使你没有托管原始源代码。

在开发人员工具> Sources > Overrides下创建一个文件夹 Chrome浏览器会请求访问该文件夹的权限,单击允许 在Sources>Page中编辑文件,然后保存(ctrl-s)。紫色点表示文件保存在本地。

其他回答

你可以在Chrome中使用“Overrides”来保存页面加载之间的javascript更改,即使你没有托管原始源代码。

在开发人员工具> Sources > Overrides下创建一个文件夹 Chrome浏览器会请求访问该文件夹的权限,单击允许 在Sources>Page中编辑文件,然后保存(ctrl-s)。紫色点表示文件保存在本地。

放置断点 右键单击断点并选择“编辑断点” 插入代码。使用SHIFT+ENTER创建新行。

你可以在Chrome开发者工具的“脚本”选项卡下使用内置的JavaScript调试器(在后来的版本中是“源代码”选项卡),但是你应用到代码上的更改只在执行时经过它们时才会显示出来。这意味着对页面加载后未运行的代码的更改不会产生影响。不像对驻留在鼠标悬停处理程序中的代码的更改,您可以在运行中测试。

有一个视频从谷歌I/O 2010事件介绍Chrome开发工具的其他功能。

我正在寻找一种方法来更改脚本并调试新脚本。我的方法是:

在要更改和调试的脚本的第一行中设置断点。 重新加载页面,以便击中断点 粘贴新脚本并在其中设置所需的断点 Ctrl+s,页面将刷新,导致第一行中的断点被击中。 F8继续,现在你新粘贴的脚本替换原来的一个,只要没有重定向和重新加载。

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

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

上面的解决方案对我来说并不适用于相当大的JS (webpack bundle - 3.21MB缩小版,美化版130k行代码)- chrome崩溃,并要求重新加载页面,恢复任何保存的更改。在这种情况下的方法是Fiddler,你可以设置自动响应选项来替换任何远程资源与任何本地文件从你的计算机-参见这个SO问题的详细信息。

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