Reputation: 4182
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:
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
Reputation: 1075597
This works for me in Chrome:
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:
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.)
Open dev tools
Open the page; it will stop on the debugger
statement above
Switch to the DOM view and find the element there (it'll be right near the bottom)
Right-click it and choose Break On > attribute modifications
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