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?
-
2breakpoints don't disappear when you reload the page.– Pablo FernandezJul 17, 2011 at 23:07
-
1I'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 KellnerJul 19, 2011 at 4:22
-
In my machine CTRL+R works fine– Pablo FernandezJul 19, 2011 at 15:00
-
4Is 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.– raksliceOct 28, 2013 at 18:21
6 Answers
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.
-
-
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
-
2Option is still present in Chrome 54, but it doesn’t seem to work. I press F5 and the page reloads without the debugger starting.– rumpelSep 26, 2016 at 14:05
-
1This worked for me after setting a breakpoint on the "Load > load" entry in the Event Listener Breakpoints tab (Chrome 65).– nwinklerApr 18, 2018 at 12:57
-
1I had to use
Script
>Script First Statement
: a script seemed to trigger a reload before theDOMContentLoaded
orLoad
>load
got hit.– BCSJan 11, 2021 at 18:48
Try putting debugger;
in your code. That also works in FF's Firebug
-
13Good solution if you can easily change the code, bad if you can't. Sep 21, 2012 at 9:22
-
4Since 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
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!
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
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.
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.