Element.Style in Chrome Element Inspector

element.style in chrome element inspector?

Those are inline styles.

They come from the style="" attribute or from Javascript code that sets element.style.someProperty.

How do I find the origin source of an element.style? i.e. Which JS or jQ file is injecting it. I want to fix, not override

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.

How to check webkit element styles in chrome devtools?

As @wOxxOm answered I should enable Shadow DOM in devtool settings.

How do I see what JS is changing style to my elements in Chrome dev tools or Firefox dev tools?

The Chrome DevTools allow you to stop at a specific change in the DOM structure.

To do that right click the element and choose Break on > attribute modifications from the context menu.

Then, once the style attribute is added (may require a page reload), the script execution will stop at the JavaScript line where the change occurred.

Detect element style change in chrome

You should be able to do this with a MutationObserver - see demo (Webkit only), which is the new, shiny way of getting notified about changes in the DOM. The older, now deprecated, way was Mutation events.

Demo simply logs in the console the old and new values when the paragraph is clicked. Note that the old value will not be available if it was set via a non-inline CSS rule, but the change will still be detected.

HTML

<p id="observable" style="color: red">Lorem ipsum</p>​

JavaScript

var MutationObserver = window.WebKitMutationObserver;

var target = document.querySelector('#observable');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('old', mutation.oldValue);
    console.log('new', mutation.target.style.cssText);
  });    
});

var config = { attributes: true, attributeOldValue: true }

observer.observe(target, config);

// click event to change colour of the thing we are observing
target.addEventListener('click', function(ev) {
    observable.style.color = 'green';
    return false;
}, false);

Credit to this blog post, for some of the code above.

---

Related Topics