How to set breakpoints in inline Javascript in Google Chrome

Question

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

User · Answer

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

User · Answer

I know the Q is not about Firefox but I did not want to add a copy of this question to just answer it myself   For Firefox you need to add  debugger  to be able to do what  matt-ball suggested for the script tag    So on your code  you add debugger above the line you want to debug and then you can add breakpoints  If you just set the breakpoints on the browser it won t stop      If this is not the place to add a Firefox answer given that the question is about Chrome  Don t    minus the answer just let me know where I should post it and I ll happily move the post

User · Answer

You also can give a name to your script    lt script gt           your code here          sourceURL somename js  lt  script gt   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

User · Answer

Adding debugger  on top at my script worked for me

User · Answer

Using Visual Studio  2012  I had the same issue and switching to IIS Express solved the problem   The script tag s type attribute did not factor into it   For some reason the Visual Studio Development Server does not provide everything Chrome needs to enable the breakpoints

User · Answer

I was having the same problem too  how to debug JavaScript that is inside  lt script gt  tags   But then I found it under the Sources tab  called   index    with parenthesis   Click the line number to set breakpoints     This is Chrome 71

User · Answer

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   lt  DOCTYPE html gt   lt html gt       lt head gt           lt script src  scripts common js  gt  lt  script gt           lt title gt Test debugging JS in Chrome lt  title gt           lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt       lt  head gt       lt body gt           lt div gt            lt script type  text javascript  gt              document write  something              lt  script gt            lt  div gt        lt  body gt   lt  html gt    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    lt script type  text javascript  gt    document write  something     lt  script gt    That was perplexing  However  when I removed the obsolete type  text javascript  from the embedded script     lt script gt    document write  something     lt  script gt      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

User · Answer

This is an extension of Rian Schmits  answer above   In my case  I had HTML code embedded in my JavaScript code and I couldn t see anything other than the HTML code   Maybe Chrome Debugging has changed over the years but right-clicking the Sources Sources tab presented me with Add folder to workspace   I was able to add my entire project  which gave me access to all of my JavaScripts   You can find more detail in this link   I hope this helps somebody

User · Answer

If you cannot see the  Scripts  tab  make sure you are launching Chrome with the right arguments  I had this problem when I launched Chrome for debugging server-side JavaScript with the argument --remote-shell-port 9222  I have no problem if I launch Chrome with no argument

User · Answer

I came across this issue  however my inline function was withing an angularJS view  Therefore on the load i could not access the inline script to add the debug  as only the index html was available in the sources tab of the debugger    This meant that when i was opening the particular view with my inline  had no choice on this  it was not accessible    The onlly way i was able to hit it was to put an erroneous function or call inside the inline JS function    My solution included     function doMyInline data              Throw my undefined error here              select Sel   debug               This is the real onclick i was passing to          angular element document getElementById data id   scope   doblablabla data id           This mean when i clicked on my button  i was then prompted in the chrome consolse    Uncaught TypeError  undefined is not a function    The important thing here was the source of this   VM5658 6 clicking on this allowed me to step through the inline and hold the break point there for later     Extremely convoluted way of reaching it   But it worked and might prove useful for when dealing with Single page apps which dynamically load your views    The VM n  has no significant value  and the n on equates to the script ID  This info can be found here   Chrome   VM

User · Answer

Are you talking about code within  lt script gt  tags  or in the HTML tag attributes  like this    lt a href     onclick  alert  this is inline JS   return false   gt Click lt  a gt    Either way  the debugger keyword like this will work     lt a href     onclick  debugger  alert  this is inline JS   return false   gt Click lt  a gt    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  lt script gt  tags    Click the Sources tab Click the Show Navigator icon and select the a file Double-click the a line number in the left-hand margin  A corresponding row is added to the Breakpoints panel  4

User · Answer

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

User · Answer

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

[javascript] How to set breakpoints in inline Javascript in Google Chrome?

Examples related to javascript

Examples related to debugging

Examples related to google-chrome