Menu
The styles in question are not hardcoded into the HTML or CSS. They're being dynamically added in through either a JS or jQ file. I run into this all the time. I always end up just reading through all of the files until I find it. Is there a faster way using dev tools?
I do not want to override it with an !important tag, I want to find the origin and fix it.
Some people are pointing out this solution: Finding Javascript-Applied Inline Styles to Debug Javascript But this doesn't answer my question, as this shows you the code snippet causing the problem, but I'm looking for the source file name and/or path.
292
You should be able to find what styles are applied by using Chrome Devtools. In Chrome, if you right click on an element and "inspect," then view the styles in the "Computed" tab then you should see what styles are affecting the element.
First, you need to select the element with querySelector . Then, you use getComputedStyle to get the element's styles. If you log style , you should see an object that contains every CSS property and their respective values. You can also see this object in Chrome's and Firefox's dev tools.
In order to change a style property of an element, change the value associated with the property under the "style" argument of the element. Let's continue with our button example from the last section: <input type="button" id="myButton" value="I'm a button!">
You should be able to find what styles are applied by using Chrome Devtools. In Chrome, if you right click on an element and "inspect," then view the styles in the "Computed" tab then you should see what styles are affecting the element.
If you're looking for the injected javascript, try this previously asked question's answer. Here, Chrome Devtools DOM breakpoint is used to find the css.
Example image:
After DevTools sends you to the "sources" tab it shows the first file that executes. However, if you click on the "Call Stack" drop down menu, it will show you all the affecting files, and if you click through them you can find the one causing the problem. When you get to the right file, DevTools will highlight the code that is affecting the page.
51
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
