使用 Chrome 开发工具编辑 Javascript

我正在尝试使用 Chrome 的开发工具编辑网站上的 javascript。我已经阅读了大约30个如何做到这一点的帐户，以及观看了一些视频。事实上，当我打开“源”选项卡并打开要编辑的文件时，我不能对它做任何事情。我是不是漏掉了什么？

我可以创建断点，单步通过等等，我只是不能编辑。这个功能最近被删除了吗？

98124 次浏览
小开

You can edit javascript in the developer tools on the "Sources" tab, BUT it will only allow you to edit javascript in its own file. Script embedded in an HTML (or PHP) file will remain read-only.

小开
最佳答案

I know this question is stale, but I just had a similar problem and found the solution.

If you have the file prettified, Chrome will not allow edits. I turned it off and was able to edit. Willing to bet this is/was your problem.

小开

It has some limitations:

  1. has to be a JS file. can't be embeded tags in a html page.

  2. it cannot be prettified.

小开

I don't know if you need this to save permanently, but if you need to just temporarily modify the js:

I can copy that javascript I want to modify into a text editor, edit it, then paste it in the console and it will redefine any functions or whatever that I need to be redefined.

for instance, if the page has:

<script>
var foo = function() { console.log("Hi"); }
</script>

I can take the content between the script, edit it, then enter it into the debugger like:

foo = function() { console.log("DO SOMETHING DIFFERENT"); }

and it will work for me.

Or if you have like, 

function foo() {
doAThing();
}

You can just enter 

function foo() {
doSomethingElse();
}

and foo will be redefined.

Probably not the best workaround, but it works. Will last until you reload the page.

小开

I did search "chrome dev tool edit javascript". This page is the first search result. But it is too outdated, it does not help me.

I am using Chrome 73, this version of Chrome has "Enable Local Overrides" option. Using the function, I could edit a javascript and could run and debug.

enter image description here

小开

My solution:

  1. In the devtools preferences check the Enable local overrides.
  2. Go to network tab, find the file you want to edit, rigth click on it and select Save for overrides (on the sources/overrides tab you need to add a local folder)
  3. The file appears in a new tab on the Sources tab as local copy, so you can edit this file, and after site reload the new (and edited) override file will load on the site!

提交答案