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.