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

Question

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?

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? — Peter Kellner, Jul 19 '11 at 04:22
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 '13 at 18:21

Bennett McElwee · Answer 1 · 2014-07-16T22:08:44.350

135

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.

edited Jul 16 '14 at 22:08

answered Nov 14 '12 at 02:05

Bennett McElwee

24,740
6
54
63

This seems to be out of date, can't find this anymore. – temporary_user_name Jul 16 '14 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".) – Bennett McElwee Jul 16 '14 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 '16 at 14:05
Worked fine on Chrome 54.0.2840.99. – cassiomolin Dec 01 '16 at 15:40
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 '18 at 12:57
@nwinkler You can use _Load_ if you like, but _DOMContentLoaded_ fires earlier and so may be more useful. – Bennett McElwee Apr 19 '18 at 11:31
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 '21 at 18:48

score 29 · Answer 2 · answered Jul 17 '11 at 23:45

29

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

answered Jul 17 '11 at 23:45

Dolan Antenucci

15,432
17
74
100

13

Good solution if you can easily change the code, bad if you can't. – Some programmer dude Sep 21 '12 at 09: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 – Dolan Antenucci Sep 22 '12 at 02:44
3

@dolan, unfortunately this doesn't work if you want to break immediately on page load. – Bennett McElwee Nov 14 '12 at 01:58
2

@dolan see [my answer](http://stackoverflow.com/a/13372025/61754) for debugging on page load. – Bennett McElwee Nov 14 '12 at 02:06

score 7 · Accepted Answer · answered Oct 29 '12 at 01:01

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!

yoAlex5 · Answer 4 · 2023-01-07T15:30:36.363

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

edited Jan 07 '23 at 15:30

answered Apr 02 '19 at 11:56

yoAlex5

29,217
8
193
205

arockia helan · Answer 5 · 2020-02-04T07:32:17.533

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.

Add breakpoint
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.

score 1 · Answer 6 · answered Aug 11 '21 at 19:39

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.

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

6 Answers6

Linked