How to Debug CSS With Chrome
Thought developers came to favor Firefox after the invention of Firebug – a popular Web programming debug tool – Chrome also includes some useful tools for debugging CSS. Its built-in “Developer Tools” panel lets you inspect the CSS for HTML elements and highlight parts of the page, giving you a visual representation of the underlying structure that makes – and breaks – your Web pages. Some extensions like “Web Developer,” previously only available on Firefox, add additional tools that let you toggle styles on and off or send code to the W3C validator.
Other People Are Reading
Instructions
-
-
1
Go to the Chrome Web Store and download the “Web Developer” extension by Chris Pederick. This extension comes with quick links to validators, screen size adjusters and CSS tools to allow you to turn styles on and off or edit them.
-
2
Click the gear-shaped icon that appeared after you installed the “Web Developer” extension. Click “Tools” in the pop-up menu and select “Validate CSS.” A new tab will appear displaying the results of a CSS validity check from the W3C's validation service. Your website must already be on the Web for this to work. When you get a list of errors, go through them and make corrections. You do not need to fix errors caused by vendor-prefixed properties such as “-webkit-some-property.”
-
-
3
Press “Ctrl+Shift+I” to load the Developer Tools panel in Chrome. This comes with Chrome and acts similar to Firebug in Firefox. Click “Elements” to see the document tree for your HTML code. Click an arrow to display a tag's nested tags. Hover over tags to highlight them in blue in the browser window. You will see CSS style rules in the right-side of the Developer Tools panel.
-
4
Check margins and padding around HTML elements to start sniffing out any layout bugs. Hovering over the tag that creates the element will highlight it, and margins display in a darker blue around the element. This is a quick way to see which element and what type of spacing is causing the layout issue. Once you identify the problem, you can go back to your code editor and know which line of code to fix.
-
5
Find out which elements are containing your trouble elements. Problems include floated elements that overlap the bottoms of their containers and elements stuck in the wrong containers. Sometimes, with websites suffering from “divitis” – too many divs being used to structure the page – you will lose track of what goes where. Leaner code with comments will prevent these issues in the future.
-
6
Measure an item on the screen if you need to fix dimensions. Go back to the gear icon and click “Display Ruler” under the “Miscellaneous” tab. Click the cross-hair cursor on the screen and drag until you create a box around the element you want to measure. The width and height will appear as pixel values in a bar at the bottom of the browser screen.
-
1
Tips & Warnings
Read about "divitis" and how to avoid its pitfalls. Lean code means less code, which is less you have to muck through when things go wrong.
Use copious amounts of commenting in both your HTML and CSS code. Mark both the beginning and ending of any page elements in HTML so you do not end up looking at a bunch of closing "<div>" tags at the bottom of the page without knowing what each one closes. In CSS, use comments to write headers organizing styles into sections like "typography" for fonts and "layout" for positioning.
