CODEWITHSUNDEEP
javascriptdebugginggoogle-chrome
Peter Kellner
Peter Kellner

Reputation: 15478

Using Chrome JavaScript Debugger / How to break on page loading events

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?

Upvotes: 81

Views: 78841

Answers (6)

Bennett McElwee
Bennett McElwee

Reputation: 25750

  • In Chrome Developer Tools, go to the Sources tab.
  • On the right, open up Event Listener Breakpoints, where you can set breakpoints on events.
  • Expand the DOM Mutation section.
  • Check the DOMContentLoaded breakpoint.

Then reload the page and you'll end up in the debugger.

Upvotes: 143

yoAlex5
yoAlex5

Reputation: 34205

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

Upvotes: 4

Nicolas Bourdon
Nicolas Bourdon

Reputation: 125

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.

Upvotes: 2

arockia helan
arockia helan

Reputation: 41

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.

Upvotes: 4

Brian Topping
Brian Topping

Reputation: 3295

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!

Upvotes: 7

Dolan Antenucci
Dolan Antenucci

Reputation: 15942

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

Upvotes: 29

Related Questions