CODEWITHSUNDEEP
javascriptjquerydebugging
GTS Joe
GTS Joe

Reputation: 4182

See Which JavaScript File Is Applying a Style to an Element

I am trying to find which JavaScript is applying "display: inline" to an image element. As you can see by the attached picture, "display: none" is getting overridden but I have no idea where "display: inline" is coming from:

enter image description here

The source is a PHP file with many .js files. I've tried using breakpoints in my Chrome developer tools but lose them when I reload the page. Any ideas how I can spot the JS code that's applying "display: inline"?

Upvotes: 3

Views: 1257

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1075597

This works for me in Chrome:

  1. Open the page
  2. Right-click the element and choose Inspect Element
  3. In the DOM view, right-click the element in the DOM tree
  4. At the bottom of the menu (for me) choose Break On > attribute modifications
    (later, when you want to remove this, it's listed under DOM breakpoints)
  5. If the modification has already happened, hit refresh

When I do that, the breakpoint stops the code as of the line setting .style.display = "inline" on the element (even on page refresh).

My element is defined by markup, not added by code later, so if yours is added by code later, the DOM breakpoint may not survive page refresh.

If the DOM breakpoint doesn't survive page refresh for some reason, but the element is defined by markup, then:

  1. Modify the page markup so that immediately after the closing tag of the element, you have <script>debugger;</script>, like this:

    <div>This is the element</div>
<script>debugger;</script>
<div>The next element...</div>

    (Normally we don't litter script tags all over our HTML, but this is a debugging session.)

  2. Open dev tools

  3. Open the page; it will stop on the debugger statement above

  4. Switch to the DOM view and find the element there (it'll be right near the bottom)

  5. Right-click it and choose Break On > attribute modifications

  6. Hit the Resume arrow to allow things to continue

That should let you set the DOM breakpoint in time to catch whatever's modifying it.

Finally: If the element is added by script code, you'll have to find the code adding it (blech) and set a breakpoint just after it's added so you can pick up with Step #4 in the second list above.

Upvotes: 6

Related Questions