Javascript 在 Chrome 调试器中编辑

Editing in the Chrome debugger

提问by Tom

How do I "dynamically" edit JavaScript code in the Chrome debugger? It's not for me, so I don't have access to the source file. I want to edit code and see what effects they have on the page, in this case stopping an animation from queuing up a bunch of times.

如何在 Chrome 调试器中“动态”编辑 JavaScript 代码？它不适合我，所以我无权访问源文件。我想编辑代码并查看它们对页面的影响，在这种情况下，阻止动画多次排队。

采纳答案by Adam

You can use the built-in JavaScript debugger in Chrome Developer Tools under the "Scripts" tab (in later versions it's the "Sources" tab), but changes you apply to the code are expressed only at the time when execution passes through them. That means changes to the code that is not running after the page loads will not have an effect. Unlike e.g. changes to the code residing in the mouseoverhandlers, which you can test on the fly.

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

There is a video from Google I/O 2010 eventintroducing other capabilities of Chrome Developer Tools.

有一段来自 Google I/O 2010 活动的视频介绍了 Chrome 开发人员工具的其他功能。

回答by sjacob

I came across this today, when I was playing around with someone else's website.

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

I realized I could attach a break-point in the debugger to some line of code beforewhat I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.

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

So as a quick work around, and if it works with your situation:

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

1. Add a break-point at an earlier point in the script
2. Reload page
3. Edit your changes into the code
4. CTRL+ s(save changes)
5. Unpause the debugger

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

回答by artemisian

This is what you are looking for:

这就是你要找的：

1.- Navigate to the Source tab and open the javascript file

1.- 导航到“源”选项卡并打开 javascript 文件

2.- Edit the file, right-click it and a menu will appear: click Saveand save it locally.

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

In order to view the diff or revert your changes, right-click and select the option Local Modifications... from the menu. You will see your changes diff with respect to the original file if you expand the timestamp shown.

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

More detailed info here: http://www.sitepoint.com/edit-source-files-in-chrome/

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

回答by gnur

Pretty easy, go to the 'scripts' tab. And select the source file you want and double-click any line to edit it.

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

回答by dominik

As this is quite popular question that deals with live-editing of JS, I want to point out another useful option. As described by svjacob in his answer:

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

I realized I could attach a break-point in the debugger to some line of code before what I wanted to dynamically edit. And since break-points stay even after a reload of the page, I was able to edit the changes I wanted while paused at break-point and then continued to let the page load.

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

The above solution didn't work for me for quite large JS (webpack bundle - 3.21MB minified version, 130k lines of code in prettified version) - chrome crashed and asked for page reloading which reverted any saved changes. The way to go in this case was Fiddlerwhere you can set AutoRespond option to replace any remote resource with any local file from your computer - see this SO question for details.

对于相当大的 JS（webpack 包 - 3.21MB 缩小版，130k 行代码在美化版），上述解决方案对我不起作用 - chrome 崩溃并要求页面重新加载，这会恢复任何已保存的更改。在这种情况下要走的路是Fiddler，您可以在其中设置 AutoRespond 选项，用您计算机中的任何本地文件替换任何远程资源 -有关详细信息，请参阅此 SO 问题。

In my case I also had to add CORS headers to fiddler to successfully mock response.

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

回答by stackinfostack

Now google chrome has introduce new feature. By Using this feature You can edit you code in chrome browse. (Permanent change on code location)

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

For that Press F12 --> Source Tab -- (right side) --> File System - in that please select your location of code. and then chrome browser will ask you permission and after that code will be sink with green color. and you can modify your code and it will also reflect on you code location (It means it will Permanent change)

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

Thanks

谢谢

回答by kami wine

Just like @mark 's answer, we can create a Snippets in Chrome DevTools, to overridethe default JavaScript. Finally, we can see what effects they have on the page.

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

回答by meeech

here's a gentle introduction to the js debugger in chrome that i wrote. Maybe it will help others looking for info on this: http://meeech.amihod.com/getting-started-with-javascript-debugging-in-chrome/

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

回答by developer747

If its javascript that runs on a button click, then making the change under Sources>Sources (in the developer tools in chrome ) and pressing Ctrl +S to save, is enough. I do this all the time.

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

If you refresh the page, your javascript changes would be gone, but chrome will still remember your break points.

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

回答by Seif Tamallah

you can edit the javascrpit files dynamically in the Chrome debugger, under the Sourcestab, however your changes will be lost if you refresh the page, to pause page loading before doing your changes, you will need to set a break pointthen reload the page and edit your changes and finally unpause the debugger to see your changes take effect.

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