在 Chrome 调试器中编辑

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

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

因此，作为一种快速解决方法，如果它适用于您的情况：

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

---

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

There is a video from Google I/O 2010 event 介绍 Chrome 开发者工具的其他功能。

---

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

在 Developer Tools > Sources > Overrides 下创建一个文件夹 Chrome 会询问该文件夹的权限，单击 Allow 在 Sources>Page 中编辑文件，然后保存 (ctrl-s)。紫点表示文件保存在本地。

https://i.stack.imgur.com/BS7Fu.png

---

这就是您要查找的内容：

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

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

为了查看差异或恢复您的更改，请右键单击并从菜单中选择选项本地修改...。如果您展开显示的时间戳，您将看到与原始文件的更改差异。

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

---

很简单，转到“脚本”选项卡。并选择所需的源文件并双击任意行进行编辑。

---

Chrome 覆盖

在源面板中打开 JS 文件。

右键单击 script src URL > 在 Sources 面板中显示

https://i.stack.imgur.com/iUsz5.png

确保选中“启用本地覆盖”。

https://i.stack.imgur.com/JrHsm.png

右键单击 JS 文件中的任意位置 > 保存以覆盖

https://i.stack.imgur.com/NB1Yb.png

可以了，好了！

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

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

https://i.stack.imgur.com/wkkYd.png

---

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

https://i.stack.imgur.com/k8Jrf.png

https://i.stack.imgur.com/32sny.png

---

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

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

---

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

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

上述解决方案对我来说不适用于相当大的 JS（webpack 包 - 3.21MB 缩小版，130k 行代码在美化版） - chrome 崩溃并要求重新加载页面，这会恢复任何已保存的更改。在这种情况下要走的路是 Fiddler，您可以在其中设置 AutoRespond 选项以使用计算机中的任何本地文件替换任何远程资源 - see this SO question for details。

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

---

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

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

谢谢

---

就像@mark 的回答一样，我们可以在 Chrome DevTools 中创建一个片段，以override默认 JavaScript。最后，我们可以看到它们对页面有什么影响。

https://i.stack.imgur.com/LhliU.png

---

这是我写的chrome中的js调试器的一个温和的介绍。也许它会帮助其他人寻找这方面的信息：http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

---

https://i.stack.imgur.com/wdAL1.jpg

---

我正在寻找一种方法来更改脚本并调试该新脚本。我设法做到这一点的方法是：

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

---

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

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

https://i.stack.imgur.com/BYzBR.jpg

---