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

Patoshi パトシ
  • 21,707
  • 5
  • 29
  • 47

1 Answers1

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.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • 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. – Patoshi パトシ Mar 31 '17 at 14:44
  • Excellent answer – loopmode Apr 14 '21 at 18:40
  • 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... – schellmax May 25 '23 at 08:09