Editing Javascript with Chrome Developer Tools

Question

I am trying to edit javascript on a site using Chrome developer tools. I read about 30 accounts on how to do this, and also watched a few videos. The fact is that when I go to the sources tab and open the file I want to edit, I can do nothing about it. Is there any step that I am missing?

I can create breakpoints, jump, etc. I just can't edit. Was this feature removed recently?

Answer 1

I know this question is out of date, but I had a similar problem and found a solution.

If you have a file installed, Chrome does not allow editing. I disabled it and was able to edit it. Ready to bet, this is your problem.

Answer 2

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

Answer 3

It has some limitations:

• must be a js file. tags cannot be embedded in an html page.

• it cannot be undone.

Answer 4

I don't know if you need this to save forever, but if you just need to temporarily change js:

I can copy this javascript that I want to change into a text editor, edit it, and then paste it into the console and override any functions or anything else that I need to override.

for example, if the page has:

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

I can take the content between the script, edit it, and then enter it into the debugger, for example:

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

and it will work for me.

Or, if you have,

 function foo() { doAThing(); } 

You can simply enter

 function foo() { doSomethingElse(); } 

and foo will be overridden.

This is probably not the best workaround, but it works. It will last until the page reloads.