Editing Javascript using Chrome Developer Tools

Question

I am trying to edit javascript on a site using Chrome's Developer Tools. I have read about 30 accounts of how to do this as well as watched a few videos. The fact is, when I go to the sources tab and open the file I want to edit, I can't do anything to it. Is there some step I am missing?

I can create break points, step through, etc... I just can't edit. Was this functionality removed recently?

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.