How to set breakpoints in inline Javascript in Google Chrome? How to set breakpoints in inline Javascript in Google Chrome? google-chrome google-chrome

How to set breakpoints in inline Javascript in Google Chrome?


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


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.


You also can give a name to your script:

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

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