Debugging CSS With Google Chrome

I heavily relied on the Firebug plugin for Firefox to tweak or debug my blog CSS so that it rendered page elements properly.  With Firebug you can click on a specific element in the website you are visiting and see exactly what CSS file is being used and where in the CSS file those attribute are being set from.

FireBug with Firefox

This makes it ideal for tweaking WordPress blog themes where you may have a 1,000+ line CSS file and not know where to make changes to margins, alignments or other simple CSS code that allows you to tweak your blog appearance.

Google Chrome has an “Inspect Element” feature that when combined with the Firebug Lite Extension for Google Chrome you get almost the same feature capability in that you can click on any element and see the CSS and source file for the CSS code for that element, however you do not see which line # the element is in the file and this makes it more difficult to find and change the code.

firebug lite

So while you can almost get the same level of functionality for Chrome, you still lack some features with Firebug Lite for Chrome that you get in Firebug for Firefox.  Both versions of the plugin still allow you to make edits, add attributes and see the results in real time on your site without having to change the actual stylesheet first.  This is ideal for testing a new font size, background color or margins/borders around images and try to enhance your theme appearance and readability.

So if you are a blogger and occasionally dabble with modifying your WordPress theme stylesheets you can get most of the functionality with Google Chrome Firebug Lite, but Firefox Firebug still is a better plugin for testing and experimenting with CSS changes in that it allows you to instantly know what line to look at in your stylesheet file as well as it has a better hover over element feature that updates and shows you what you are looking for every time.

-Dragon Blogger

Share Feedback We Want to Hear From You