CODEWITHSUNDEEP
javascriptgoogle-chrome-devtoolsfrontendbreakpointsjavascript-debugger
Patoshi パトシ
Patoshi パトシ

Reputation: 23445

Debugging HTML element change upon initial page load by some javascript function, but unable to find it.

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

Upvotes: 10

Views: 4026

Answers (1)

Kayce Basques
Kayce Basques

Reputation: 25897

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.

Upvotes: 14

Related Questions