65

Chrome developer tools allows you to edit javascript in the browser if the javascript is in a .js file. However, it does not seem to allow me to edit javascript that is embedded in an HTML page. ie:

<script type="text/javascript> 
// code here that I want to debug/edit
</script>

This is a big problem for me as I have quite a bit of embedded javascript in a certain page.

Similar to this question: Edit JavaScript blocks of web page... live but this is about firefox, not chrome.

How can I edit javascript embedded in an HTML page using Google Chrome Developer Tools?

Community
  • 1
  • 1
Mark Robinson
  • 13,128
  • 13
  • 63
  • 81
  • 5
    You could use Opera. Opera allows editing of inline JS and JS files. After you soft reload the page, your changes will be applied. Right click > Source > Make changes > Apply Changes. – XP1 Jun 25 '12 at 15:48
  • 1
    @XP1 never thought I'd +1 an Opera solution. But here we are. +1 for live edit in Opera. – Gavin Miller Oct 19 '12 at 17:58

5 Answers5

34

Actually chrome allows to do that, choose HTML files in Sources tab in Developer tools window. You will see HTML instead of javascript and simply add breakpoints in the <script> tags. Also you can add debugger; command to script what you want to debug. For example:

<script>
 // some code
 debugger; // This is your breakpoint
 // other code you will able to debugg
</script>

Don't forget to remove debugger;'s when you want to release your website.

dotancohen
  • 30,064
  • 36
  • 138
  • 197
antyrat
  • 27,479
  • 9
  • 75
  • 76
  • 3
    Still not working for me. Let's take http://www.google.co.uk/ as an example. Browse there with Chrome and fire up your developer tools. I can edit the .js file under the 'Scripts' tab but if I try to edit 'www.google.co.uk/' or 'gzip.html' files under that tab nothing happens. I double click on the code but I do not get an edit cursor like I do if I click on the .js files. Am I missing something??? – Mark Robinson Sep 21 '11 at 10:10
  • 3
    Well you're right, but you can edit this at `Elements` tab instead. – antyrat Sep 21 '11 at 10:13
  • 1
    Also by adding breakpoints you will be able to edit your script using console – antyrat Sep 21 '11 at 10:17
  • Blimey! That's it! Excellent stuff antyrat! Thank you. – Mark Robinson Sep 21 '11 at 10:18
  • 1
    For information about how to use the console to replace a javascript see the answer from @byronaltice in this thread. – Björn Feb 09 '17 at 10:08
  • Doesn't work. I can view the html file fine under sources but I cannot edit it. – Jason Cheng Apr 24 '19 at 15:30
  • You can set breakpoints on inline scripts in the *Sources* tab, but you can't actually edit them there. You can edit the **text** of ` – jdunning Dec 29 '19 at 00:38
  • This did not work for me, even though I could edit the script element code (Edit element HTML). What did work is described here https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript. Simply append a //# sourceURL=myJavaScipt.js directive in the script element. Then the script appears in the page Sources and can be easily edited and debugged. – Ioannis K. Moutsatsos Jan 18 '20 at 22:28
  • Check out this [answer](https://stackoverflow.com/a/48843321/12632622) using override, works perfectly! – Angaj Sharma Mar 19 '23 at 08:08
31

I had a difficult time locating the file that had my inline/embedded javascript. For others having the same problem, this may or may not be helpful...

Using Chrome 21.0.1180.89 m for Windows

enter image description here

All files are shown after clicking that very discreetly placed button. See:

enter image description here

Now you may begin debugging...

enter image description here

Theo
  • 2,609
  • 1
  • 26
  • 27
  • That smiley needs the NSA nose. – Bruno Bronosky Dec 17 '13 at 17:55
  • Sometimes while clicking things Google Chrome will take you away from the __Elements__ tab even if you started there. So if you can't edit things, double check that you're in the __Elements__ tab. – Seanny123 Sep 21 '14 at 19:12
  • 2
    unfortunately even though you're allowed to add breakpoints, the content of a script element is not editable. Chrome V37 – Maksim Vi. Oct 10 '14 at 20:58
  • 1
    @MaksimVi. Don't try to change the code after the breakpoint was already executed. Edit the code immediately after picking it from the list. Press Ctrl+S to apply the changes. You can't change the code once it's running in VM, but you can change it just by picking it from the list. – Pawel Apr 13 '15 at 03:19
24

None of these answers have worked for me.

What works for me is if I have my javascript on the page already loaded, I can copy that javascript, 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.

byronaltice
  • 623
  • 6
  • 18
  • 4
    Thank you so much for this answer! This was the only one that worked for me as well... – phoenixdown Apr 16 '15 at 15:29
  • 2
    thanks alot for this! not what I am looking for but it's the only one thats working! – ah-shiang han Oct 17 '15 at 11:47
  • Had this page open in a browser in which I wasn't logged in to stackoverflow... logged in just so I could vote this answer up. Thanks a bunch for this solution! – RizJa Jun 22 '16 at 16:06
  • I am on Chrome v51.x. None of the solutions provided in this forum or several others I checked worked for me except for this workaround. I am not sure why Chrome doesn't allow me to edit the JS if it is embedded within HTML. It allows me to edit the DOM (add / remove elements or edit the styles) but not the – VHS Jul 19 '16 at 14:48
  • This works if the function you want to rewrite is global, but if it's inside an IIFE, the console won't help. In that case, you'll need to use a local override, as described in this answer: https://stackoverflow.com/a/48843321/4200446 – jdunning Dec 29 '19 at 00:59
  • Check out this [answer](https://stackoverflow.com/a/48843321/12632622) using override, works perfectly! – Angaj Sharma Mar 19 '23 at 08:10
1

Solution described here: https://greatrexpectations.com/2014/01/22/chrome-dev-tools-inline-dynamic-javascript

Add the 'sourceURL' directive in your inline/embedded script like this:

<script type="text/javascript">
...script here...
//# sourceURL=helperJavaScript.js
</script>

Then this script will appear in the page Sources and you can debug and edit it similarly to js loaded from a URL source enter image description here

Ioannis K. Moutsatsos
  • 432
  • 5
  • 13
0

Go to the Elements tab, find your script, right click on the part you need and choose "Edit as HTML".

If Edit as HTML doesn't appear, double click the node and it should become highlighted and editable.

brimble2010
  • 17,796
  • 7
  • 28
  • 45
  • 13
    If you change JS code in "edit as HTML" while paused on a JS breakpoint, it won't modify the JS code in the sources tab. – Jez Jun 13 '13 at 09:21