This tool also outlines the CSS so you can see what is being computed by the browser and what is being inherited from higher CSS tags. There is a box that shows the margin, border, padding, and box size, and the ability to turn off specific values and see the results in the browser is also available.
As a web developer I have come up with a few tricks and techniques for debugging HTML and CSS. And while every browser has their own way of viewing source, I have found a few browser add-ons that help tackle this often tedious job. However my favorite of all is built right into the browser itself.
Google Chrome 2.0 includes Developer Tools to assist in sifting through code elements, resources, and scripts. If you right click on any element in the browser window you can select “Inspect Element” from the resulting menu. A window will pop up that has the entire HTML in nested rows. This cleans up the source and eliminates the need to scroll and squint as in a text viewer. You can click each row to open up the nested tags and see what is inside so that the entire “wrapper” div is contained in one line while you look at the head source. And if needed you can hover a tag in the tool window and see the matching element highlighted in the browser.
This tool also outlines the CSS so you can see what is being computed by the browser and what is being inherited from higher CSS tags. There is a box that shows the margin, border, padding, and box size, and the ability to turn off specific values and see the results in the browser is also available.
While Google Chrome 2.0 is not much better as a browser that Firefox or IE, it does have some useful tools for a developer/designer. I have come familiar with it and enjoy debugging with it daily.
Leave Your Response