How do I identify source of element.style injected by js?

Question

I am updating a wordpress website for a client so am unfamiliar with the structure of the whole site.

On the blog page (http://shoreditchradio.co.uk/blog/) , posts are displayed in a wrapper #blogleft, which is defined in the css file as follows:

#blogleft {
  float: left;
width: 580px;
}

however via the inspector I can see that the width is being over-ridden to be 100%

element.style {
  width: 100%;
}

My question is - what is the easiest way to determine where this is being injected from? As far as I know it can only be from a javascript file somewhere in the site.

I have been poking around in the inspector for some time now. Is there a simple way to identify the source of an injected inline style like this? Any help much appreciated!

Answer 1

That width:100%; is hard coded on the HTML, you can see this by checking the style attribute on the div tag in the HTML.

The easiest way for CSS and HTML debugging is by using the developer tools/web inspector tools (integrated in firefox and chrome or by plugin such as Firebug). The element.style CSS selector means it is hard coded on the selected element.

"hard coded", in this case, means it is directly injected through the HTML. Through the developer tools/web inspector tools you should be able to determine the origin of the CSS in question.

Answer 2

If you want to troubleshoot "injected stylesheet" in Chrome

1. Open develop console -> Network
2. Filter it something '.css'
3. Look for extensions domains that load some CSS files
4. Find the extension in your extensions list by filtering domain (like on the pic "hcndlme...")
5. Try to disable the extension and reload the page