CSS: Chrome Element Inspector

There are times when you are working on a page that you will encounter something that just doesn’t look right. A line is the wrong color, a space is too big, a block is in the wrong place. If it’s straight HTML, it’s easy enough to fix that. If you add styles to the mix, it begins to get a little trickier. And if you add multiple styles, includes, in the header, in-line, with some from contributed modules you’ve never cracked open and others from core code you’re not supposed to touch, well, it can get almost difficult. But just “almost”.

Chrome comes with an element inspector that makes style forensics feel almost like cheating. Select code in or near the offending area with your mouse, and select “Inspect Element” from the contextual menu. Up will pop a set of windows peeking behind the mark-up of the page you are viewing, with the currently selected area highlighted.

On the left side is the code the browser is working with. Whatever the web server sent it, the full “end product” after all server side activities have been completed. You can scroll up and down, and select various elements that you think might be the culprit.

Once an element is selected, the right side populates with ever bit of style code impacting the element. Each block includes not only the style code, but the name of the include that contributed it. Overridden characteristics are displayed with a line through. The very top block, on that side, “Computed Style”, lists a summary of what the final style impacting that area is, after all conflicts and overrides are resolved.

For anyone attempting to track down a style aberration on a site with complex styling (i.e. any Drupal site), this tool is a life saver. And free. What’s not to like?