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?

3
  • 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. Jun 13, 2014 at 8:15
  • don't know about grep, might work. I'll have a look at it, but it seems quite complicated.
    – PieBie
    Jun 13, 2014 at 8: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, 2014 at 8:23

2 Answers 2

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.

3
  • ok, it's abit of a workaround but it might work. thanks, will give it a shot.
    – PieBie
    Jun 13, 2014 at 8: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. Feb 10, 2020 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 `<script>debugger;</script> 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: stackoverflow.com/a/37331222/339803
    – redfox05
    Jan 20, 2022 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;
}
3
  • 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, 2014 at 8: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, 2014 at 8: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. Jun 11, 2018 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.