How to set breakpoints in inline Javascript in Google Chrome?


How to set breakpoints in inline Javascript in Google Chrome?

When I open Developer Tools in Google Chrome, I see all kinds of features like Profiles, Timelines, and Audits, but basic functionality like being able to set breakpoints both in js files and within html and javascript code is missing! I tried to use the javascript console, which itself is buggy – for example, once it encounters a JS error, I cannot get out of it unless I refresh the whole page. Can someone help?


Solution 1:

Use the sources tab, you can set breakpoints in JavaScript there. In the directory tree underneath it (with the up and down arrow in it), you can select the file you want to debug. You can get out of an error by pressing resume on the right-hand side of the same tab.

Solution 2:

Are you talking about code within <script> tags, or in the HTML tag attributes, like this?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Either way, the debugger keyword like this will work:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

N.B. Chrome won’t pause at debuggers if the dev tools are not open.

You can also set property breakpoints in JS files and <script> tags:

  1. Click the Sources tab
  2. Click the Show Navigator icon and select the a file
  3. Double-click the a line number in the left-hand margin. A corresponding row is added to the Breakpoints panel (4).

enter image description here

Solution 3:

You also can give a name to your script:

... (your code here)
//# sourceURL=somename.js

ofcourse replace “somename” by some name 😉 and then you will see it in the chrome debugger at “Sources > top > (no domain) > somename.js” as a normal script and you will be able to debug it like other scripts

Solution 4:

Refresh the page containing the script whilst the developer tools are open on the scripts tab. This will add a (program) entry in the file list which shows the html of the page including the script. From here you can add breakpoints.

Solution 5:

Another intuitive simple trick to debug especially script inside html returned by ajax, is to temporary put console.log(“test”) inside the script.

Once you have fired the event, open up the console tab inside the developer tools.
you will see the source file link shown up at the right side of the “test” debug print statement. just click on the source (something like VM4xxx) and you can now set the break point.

P.S.: besides, you can consider to put “debugger” statement if you are using chrome, like what is being suggested by @Matt Ball

Solution 6:

My situation and what I did to fix it:
I have a javascript file included on an HTML page as follows:
Page Name: test.html

<!DOCTYPE html>
        <script src="scripts/common.js"></script>
        <title>Test debugging JS in Chrome</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script type="text/javascript">


Now entering the Javascript Debugger in Chrome, I click the Scripts Tab, and drop down the list as shown above. I can clearly see scripts/common.js however I could NOT see the current html page test.html in the drop down, therefore I could not debug the embedded javascript:

<script type="text/javascript">

That was perplexing. However, when I removed the obsolete type=”text/javascript” from the embedded script:


..and refreshed / reloaded the page, voila, it appeared in the drop down list, and all was well again.
I hope this is helpful to anyone who is having issues debugging embedded javascript on an html page.