Using Google Chrome to debug and edit javascript embedded in HTML page

Question

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?

Answer 1

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.

Answer 2

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

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

Now you may begin debugging...

Answer 3

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.

Answer 4

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.

Answer 5

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