106

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?

Patrick
  • 3,490
  • 1
  • 37
  • 64
cooperia
  • 1,084
  • 2
  • 7
  • 8
  • 1
    I can make calls in the console just fine. I simply can't edit stuff. – cooperia Sep 26 '12 at 01:17
  • 1
    You can override local functions and variables, but there's no way to save changes to a file from the dev tools. You still need an external editor for that. – Geuis Sep 26 '12 at 01:21
  • 1
    Actually, I can edit css files but can't edit script embedded in a php file. >.> – cooperia Sep 26 '12 at 01:25
  • Hmm interesting. I was under the impression that I could edit javascript "locally" then run the edited JS from the console. I am trying to watch the response from an AJAX request and basically need to add parameters to satisfy it. – cooperia Sep 26 '12 at 01:29
  • 1
    Well, I can do what I want with Opera. Problem sortof solved. – cooperia Sep 26 '12 at 01:54
  • 1
    @cooperia put your js code in a *.js file, then you'll be able to edit and run it realtime in chrome. – Mahn Sep 26 '12 at 02:08
  • @Mahn I couldn't do that because I needed it to run an AJAX.Request on the domain it was running on. If I ran it locally, domain rules would have gotten in the way. – cooperia Sep 26 '12 at 03:04
  • On 23.0.1271.1 dev-m I'm able to open a JS file from the sources, click anywhere to place the cursor, type... i see a `*` in the tab indicating unsaved changes.. `Ctrl S` to save and the modified JS executes when the event fires. – sachleen Sep 26 '12 at 04:33
  • @cooperia I meant something along the lines of ``, no need for it to be local, it just has to not be mixed with html for it to be editable in chrome; the behaviour @sachleen talks about is definitively available if you follow this. – Mahn Sep 26 '12 at 13:07
  • Hmm. I have tried that about a thousand times. I ended up just using Opera. Chrome let me edit other JS and CSS files. Maybe it has something to do with the fact that the JS was embedded in the main php file? I have solved the problem that I needed this for at this point but am still interested in why I couldn't it. – cooperia Sep 26 '12 at 15:03
  • I guess since I'm done, there is no harm sharing what I was trying to do... There is a puzzle at http://www.weebly.com/jobs.html embedded in the main php file. Are you able to make changes to that on the fly using developer tools? – cooperia Sep 26 '12 at 15:06
  • @cooperia The JS is in the PHP file, it doesn't let you edit that. It will let you edit any `.js` or `.css` file. Also, I solved it a few days ago for kicks and did not need to edit the page. – sachleen Sep 26 '12 at 18:59
  • Heh thanks for the insight, sachleen. I guess it makes sense that you can't edit php files.How did you go about submitting the requested parameters? I just stuck them in the initial request. If you don't want to share, that's fine, I feel like I'm missing something important, though. – cooperia Sep 28 '12 at 00:15
  • I was trying to do this. There was some sort of bug that didn't let me edit JavaScript files. I kept trying endless times... then I closed and opened Chrome 24.0.1312.57 (Oh What a version number) and voila: I was able to edit the JavaScript file. :P – Leniel Maccaferri Feb 09 '13 at 15:47
  • http://stackoverflow.com/questions/16494237/chrome-dev-tools-modify-javascript-and-reload -- while not answering the question, that page links to "resource override" which sorts you out nicely! – P i Dec 28 '15 at 01:11

6 Answers6

122

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.

raddevon
  • 3,290
  • 4
  • 39
  • 49
  • 5
    yes, that helped, thank you @raddevon, I can edit them now but no effect happens to the page – ElieH Jun 06 '13 at 23:19
  • 2
    For others that search for this topic: I had prettify set to OFF but still couldn't edit. Turning it ON and OFF again helped. (Thanks to IT Crowd for that advice ;) ) – Drkawashima Oct 22 '13 at 12:43
  • 4
    Continued: Nope. Turns out that I have the same issue as @raddevon. Perhaps a bug in chrome. You can edit and save the script, and you can hit break points in it when debugging. But the script that's actually running is still the original non-edited version. Example: I edited the script, commented every single line, yet could still could run the script, hit breakpoints on the lines etc. So the edited version isn't even running, it's just being displayed... Of course I relaunching the script in all kinds of different ways without any effect – Drkawashima Oct 22 '13 at 13:19
  • That did for me as well. Awesome! – Roberto Nov 22 '13 at 18:58
  • 1
    How do you turn off prettify? – Luke Oct 16 '15 at 15:37
  • 1
    @Luke Click the button with the curly braces at the bottom left of the code pane in the Sources tab. – raddevon Oct 16 '15 at 19:01
  • 10
    As a side note if you prettify, then copy and paste back to the original file it will be a pretified original file that is editable. – Eoin Aug 22 '18 at 13:24
  • 2
    @Eoin Wonderful! That totally did the trick. And with the "Local Overrides" functionality, this works perfectly. Thanks for the hint :-) – Xan-Kun Clark-Davis Mar 05 '20 at 01:25
59

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.

welah
  • 691
  • 5
  • 4
  • 4
    I am using chrome on linux and am still not able to edit the javascript even if its a single .js file. – roopunk Mar 11 '13 at 18:01
  • 2
    Mildly interesting note: Toggling Pretty Print on/off (the "{ }" icon) will enable editing embedded js, but the changes will not take affect, so it's still not what we're looking for. (Chrome 29) – Patrick Sep 18 '13 at 07:27
  • 1
    That's what I needed to know. Thank you. – geeves Oct 11 '18 at 19:25
33

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.

gcb
  • 13,901
  • 7
  • 67
  • 92
  • If after following the above guideline and the changes in the Sources tab just don't take effect, try right-clicking on the edited file in the tree-view on the left and select "Save". A dialog may appear asking you to save a local file, but you can just cancel. Only at that point Chrome's edit history finally shows that the edit has stuck. – Erhhung Aug 29 '14 at 01:57
  • i was going crazy because this new file had embedded js but I couldn't edit..i didn't understand why..thank you #gcb and #welah – carinlynchin Jun 20 '15 at 14:50
  • Is it possible to un include a JS file from the list under the `Sources` tab of the Developer tools? – techie_28 Jun 27 '16 at 08:44
  • @techie_28 not sure, open another question. But i would write a quick extension for that. – gcb Jun 29 '16 at 00:12
14

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.

byronaltice
  • 623
  • 6
  • 18
8

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

wafe
  • 382
  • 2
  • 3
0

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!
Péter Zajácz
  • 141
  • 2
  • 5