Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 653
Peter Kellner Avatar asked Jul 17 '11 23:07

Peter Kellner


People also ask

How do I skip a line in Chrome debugger?

JavaScript breakpoints When debugging JavaScript it is sometimes useful to set breakpoints. You can set breakpoints in Chrome DevTools by clicking on the line number you want to break at then press Cmd + R ( Ctrl + R ) to refresh the page. The page will then run right to that breakpoint.

How do you create a breakpoint in JavaScript?

1) Use Chrome's developer tools or Firebug to locate the line of JavaScript, then set the breakpoint with the mouse. To do it in Chrome, first open the developer tools (Ctl + Shift + I), or go to the wrench menu, Tools, Developer Tools. Select the Scripts tab. Click the little folder icon on the far left.

How do I debug JavaScript events in Chrome?

Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.


2 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.

like image 134
Bennett McElwee Avatar answered Sep 21 '22 18:09

Bennett McElwee


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

like image 34
Dolan Antenucci Avatar answered Sep 18 '22 18:09

Dolan Antenucci