10

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?

enter image description here

Improve this question

1 Answer 1

Reset to default
14

The only thing I can suggest is:

  1. Set an event listener breakpoint on Script > Script First Statement.
  2. Reload the page. DevTools pauses on the first line of the first script that executes.
  3. Now, go back to the Elements panel, and place a subtree modification DOM breakpoint on <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.
  4. Keep pressing Resume Script Execution until you find the line of code that modifies your node. Every time you press Resume Script Execution, the scripts only execute until another node is modified.

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

awesome. it works. how did you even find out about this? there are just sooo many options in chrome dev tools that someone can just take a course on it.
Excellent answer
Very interesting solution, although it seems to not always work: i've had some google ad inserting content into an element with applied 'subtree modification' breakpoint, but script execution didn't stop there (but DID work when i tried inserting a node myself). Don't know what the google ad did there...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.