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
-
2breakpoints don't disappear when you reload the page.Pablo Fernandez– Pablo Fernandez2011-07-17 23:07:18 +00:00Commented Jul 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 Kellner– Peter Kellner2011-07-19 04:22:04 +00:00Commented Jul 19, 2011 at 4:22
-
In my machine CTRL+R works finePablo Fernandez– Pablo Fernandez2011-07-19 15:00:34 +00:00Commented Jul 19, 2011 at 15:00
-
5Is 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– rakslice2013-10-28 18:21:57 +00:00Commented Oct 28, 2013 at 18:21
Add a comment
|
6 Answers
- 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.
8 Comments
temporary_user_name
This seems to be out of date, can't find this anymore.
Bennett McElwee
@Aerovistae it's still there in Chrome 35 for Windows. (I edited the answer because I said "left" when I should have said "right".)
rumpel
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.
nwinkler
This worked for me after setting a breakpoint on the "Load > load" entry in the Event Listener Breakpoints tab (Chrome 65).
BCS
I had to use
Script > Script First Statement: a script seemed to trigger a reload before the DOMContentLoaded or Load > load got hit. |
Try putting debugger; in your code. That also works in FF's Firebug
4 Comments
Some programmer dude
Good solution if you can easily change the code, bad if you can't.
Dolan Antenucci
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 helpsBennett McElwee
@dolan, unfortunately this doesn't work if you want to break immediately on page load.
Bennett McElwee
@dolan see my answer for debugging on page load.
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!
Comments
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.
Comments
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
Comments
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.
