Menu
I know chrome has a javascript debugger where you can set break points in the HTML if anything gets modified, but your only able to do this when the page has already loaded. I'm trying to figure out how an element is being assigned a inline style upon initial page load. I've tried to search in files for the class but nothing shows up. I'm not sure how I can trace where this is being set. The view source doesn't show any inline-style, so it must be from a js file.
How would one debug this?
630
The Sources panel is where you debug JavaScript. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). This shortcut opens the Console panel. Click the Sources tab.
What makes JavaScript great is also what makes it frustrating to debug. Its asynchronous nature makes it easy to manipulate the DOM in response to user events, but it also makes it difficult to locate problems.
In the debugger window, you can set breakpoints in the JavaScript code. At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values. After examining values, you can resume the execution of code (typically with a play button).
The only thing I can suggest is:
<body>. DevTools pauses whenever any node is modified. Or, if your target node was declared in the HTML and already exists on the page, then set the DOM breakpoint directly on the target node. This bypasses the DevTools limitation of DOM breakpoints not working on page load, because the page has technically started to run by the time you set the DOM breakpoint.
This seems like a pretty core use-case, though. DOM breakpoints on individual nodes don't work on page load, as you mentioned. Neither do DOM mutation event listener breakpoints. I'll put in a feature request to handle this, one way or another.
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
