在Chrome调试器中编辑

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

382950 次浏览
小开

很简单，转到“脚本”选项卡。然后选择你想要的源文件，双击任意一行进行编辑。

小开
最佳答案

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

这是谷歌I/O 2010活动的视频引入Chrome开发工具的其他功能。

小开

我今天偶然发现了这个，当时我正在浏览别人的网站。

我意识到我可以将调试器中的断点附加到前面的代码行我想动态编辑的东西。并且由于断点在重新加载页面后保持不变，我能够在断点暂停时编辑我想要的更改，然后继续让页面加载。

所以作为一个快速的解决方法，如果它适合你的情况:

  1. 在脚本中较早的位置添加断点
  2. 重新加载页面
  3. 将更改编辑到代码中
  4. CTRL + 年代(保存更改)
  5. 取消暂停调试器
小开

下面是我在chrome中编写的js调试器的温和介绍。也许它将帮助其他人寻找有关http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/的信息

小开

这就是你要找的东西:

1.—进入“Source”页签，打开javascript文件

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

为了查看差异或恢复您的更改，右键单击并选择选项本地修改…菜单上的。如果展开显示的时间戳，您将看到您的更改相对于原始文件有所不同。

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

小开

如果它的javascript在一个按钮上运行点击，然后在Sources>Sources(在chrome的开发人员工具中)和按Ctrl +S保存就足够了下进行更改。我一直都这么做。

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

小开

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

小开

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

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

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

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

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

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

小开

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

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

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

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

小开

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

按F12—>源标签—(右侧)—>文件系统—在其中请选择您的代码位置。然后chrome浏览器会请求你的许可，之后的代码将下沉与绿色。你可以修改你的代码，它也会反映你的代码位置(这意味着它将永久改变)

谢谢

小开
Chrome DevTools有一个片段面板，在那里你可以像在编辑器中一样创建和编辑JavaScript代码，并执行它。 打开DevTools，然后选择Sources面板，然后选择Snippets选项卡

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

enter image description here

小开

就像@mark的回答一样，我们可以在Chrome DevTools中创建一个Snippets， override是默认的JavaScript。最后，我们可以看到他们对页面的影响。

Image

小开

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

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

The Overrides子标签在Chrome开发工具

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

.

enter image description here

小开

Chrome覆盖

  1. 在sources面板中打开JS文件。

右击在脚本src URL >在源代码面板中显示

Sources Panel中打开脚本的上下文菜单 .

  1. 确保“Enable Local overrides”;检查。

Enable local overrides is checked .

  1. 右击在JS文件中的任意位置>保存为覆盖

Save for overrits .

都准备好了!

只需编辑文件，并使用CMD/CTRL + s保存。现在无论何时刷新页面，它都会使用修改后的文件。(只要文件名不变)

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

带紫点的文件图标


提交答案