75

I'm using chrome's debugger and I'm good when it comes to setting break points once a page is running. My problem is when I do either f5 or press enter on the URL line my break points disappear. How can I set a break point in code that happens when the page first loads?

4
  • 2
    breakpoints don't disappear when you reload the page. Jul 17, 2011 at 23:07
  • 1
    I've tried both f5 and just positioning my cursor on the url and pressing enter. both cases cause the break point to no longer be in the code (chrome and ff 5.). Pablo, how do you reload the page so they don't go away? Jul 19, 2011 at 4:22
  • In my machine CTRL+R works fine Jul 19, 2011 at 15:00
  • 4
    Is it possible that the URL that the JavaScript code is accessed at is changing each reload? Chrome won't have any existing breakpoints to set if it thinks that it hasn't seen the file before.
    – rakslice
    Oct 28, 2013 at 18:21

6 Answers 6

137
+100

In Chrome's Developer Tools, go to the Sources tab. On the right, open up Event Listener Breakpoints, and you can set breakpoints on events.

It sounds as if you'll want to set your breakpoint on DOMContentLoaded, which is under the DOM Mutation section.

After you do this, reload the page and you'll end up in the debugger.

7
  • This seems to be out of date, can't find this anymore. Jul 16, 2014 at 17:24
  • 1
    @Aerovistae it's still there in Chrome 35 for Windows. (I edited the answer because I said "left" when I should have said "right".) Jul 16, 2014 at 22:10
  • 2
    Option is still present in Chrome 54, but it doesn’t seem to work. I press F5 and the page reloads without the debugger starting.
    – rumpel
    Sep 26, 2016 at 14:05
  • 1
    This worked for me after setting a breakpoint on the "Load > load" entry in the Event Listener Breakpoints tab (Chrome 65).
    – nwinkler
    Apr 18, 2018 at 12:57
  • 1
    I had to use Script > Script First Statement: a script seemed to trigger a reload before the DOMContentLoaded or Load > load got hit.
    – BCS
    Jan 11, 2021 at 18:48
29

Try putting debugger; in your code. That also works in FF's Firebug

4
  • 13
    Good solution if you can easily change the code, bad if you can't. Sep 21, 2012 at 9:22
  • 4
    Since it's javascript, you can add the debugger; statement to any website you're viewing by using the Chrome Developer Tools (Wrench -> Tools -> Developer Tools -> click "sources", find the javascript function.. Obviously not simple if the code is minimized or has lots of functions to dig through. There is a way to view the Event Listeners from this Developer Tools too, but it wasn't obvious to me how to. Hope that helps Sep 22, 2012 at 2:44
  • 3
    @dolan, unfortunately this doesn't work if you want to break immediately on page load. Nov 14, 2012 at 1:58
  • 2
    @dolan see my answer for debugging on page load. Nov 14, 2012 at 2:06
7

Later versions of Safari and Firefox should work properly with breakpoints across reloads, but one needs to be sure that the query is exactly the same between requests. ExtJS 4, for instance, adds a _dc=<epoch> that will disable the cache.

To stop that behavior, add the following:

Ext.Loader.setConfig({
    disableCaching: false,
    enabled: true
});

Hope that helps!

4

Chrome JavaScript debugger

I use the next approach that is suitable for Chrome, Safari using Charles Proxy[About] and Rewrite Tool

debugger;

or if you need to make a browser console wait

setTimeout(function(){ 
    debugger; 
    console.log('gets printed only once after timeout');
}, 7000);

setTimeout is a function that will trigger after delay to give a user time to attach the console

3

Debugger can be set also by using XHR/fetch breakpoint

In chrome developer tools -> sources tab, in the right pane you can see XHR/fetch breakpoint using that you can set breakpoint.

  1. Add breakpoint
  2. Enter the string which you want to break on. DevTools pauses when this string is present anywhere in an XHR's request URL.

If breakpoint has to be set for all XHR or fetch, please check the option Any XHR or fetch

In firefox developer, tools -> debugger tab, adding to the above feature we can set debugger based on request methods.

1

If you would like to stop the javascript at the time it's first loaded in the browser (and not when the DOMContentLoaded event listener is triggered which happen later) simply click on pause button in chrome debugger and reload your page with F5 keyboard button. It worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.