11

I'm wondering of there is any way to find out where an inline CSS style came from. As you can see in the picture below, I have an element with an inline style that was generated using JavaScript. Sometimes my code seems to break and put the width to 0px, rendering the div invisible.

screenshot

I've looked through all the JS files, but can't seem to find the error.

Is there a way to find the right file and line, just like dev tools does for css files?

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
PieBie
  • 3,259
  • 2
  • 18
  • 27
  • 1
    If you include your code and any libraries you are using, one of us may be able to find the culprit. But to answer your question, I don't know of any mechanism that will clearly tell you the source of an applied style. – Kevin Lynch Jun 13 '14 at 08:15
  • don't know about grep, might work. I'll have a look at it, but it seems quite complicated. – PieBie Jun 13 '14 at 08:22
  • Grep is very simple, it is just a command line tool that allows you to search files for strings. It isn't very helpful unless you know a string that occurs near the code you care about but not in many other places in your codebase. – Quentin Jun 13 '14 at 08:23

2 Answers2

20

Since you are using Chrome:

  1. Right click on the element in the page and Inspect Element
  2. Right click on the DOM inspector view of the element and Break on… → Attributes Modifications

When the inline style of the element is modified with JS, the debugger will trigger as if it had hit a breakpoint.

This will show you the relevant line of JS and give you a stack so you can figure out where that line was called from.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • ok, it's abit of a workaround but it might work. thanks, will give it a shot. – PieBie Jun 13 '14 at 08:21
  • If you're new to debugger, it might take you a while (it did for me) to realise that you need to press F5 (not Ctrl+R) to refresh the page and see the breakpoint in action. – Kit Johnson Feb 10 '20 at 10:37
  • Note that sometimes its hard to place the breakpoint at the right time, because the html breakpoint can get lost on dynamically generated elements. In the html, add a ` right after the element you are wanting to inspect. This allows for a simple way to pause the code early on, allowing you to Inspect and add the breakpoint in. More context at this answer: https://stackoverflow.com/a/37331222/339803 – redfox05 Jan 20 '22 at 13:27
-1

You can use chrome debugger/ firefox to inspect the element's style and its hierarchy.

Also if you don't want a style assigned by you to be overridden, you can use !important:

#element{

css-property:value !important;
}
abhinsit
  • 3,214
  • 4
  • 21
  • 26
  • 1
    The OP already knows that it is set directly on the element. They are trying to track down the JS that set it there. – Quentin Jun 13 '14 at 08:13
  • yes, I know that. But that still doesn't tell me which Javascript file generated a specific bit of inline CSS. – PieBie Jun 13 '14 at 08:15
  • 2
    important should be avoided most of the times. Only use it for status modifiers such as a warning that wants to override text or background colors with a color: red !important for example. – CommonSenseCode Jun 11 '18 at 12:44