SEO

March 31, 2011

Firefox 4 Dom Inspector: But do you know how to use it?

Mozilla’s DOM Inspector (also available in Firefox – see update below) can seem daunting at first but is amazingly powerful. Amongst other things, it allows you to see which CSS rules are affecting any given element in order of cascade priority.

Screen shot showing CSS styles rules in action

To do this, open up the DOM Inspector (Tools > Web Development) and type in your URL. Your Web page will load in the bottom frame and the DOM tree will be displayed in the top left frame. Press the pointer button (located top-left) and click an element on your Web page. The DOM tree then highlights to show the chosen element and the element details (text, attributes) appear in the top right frame. Choose CSS Style Rules from the Object drop-down and you’ll see the list of style rules applied to the element in order of cascade priority, starting with Mozilla’s internal settings. As you go down the list, each rule overwrites the previous. Explosing CSS rules in this manner makes it easy to debug the ‘why isn’t it changing colour!?’ problem often encountered during development.

Update: Firefox also comes with a DOM inspector, but on Windows machines, you need to ask for it when you first install the browser: choose Custom Install and then select Web Developer Tools. Once installed, you can find the Firefox DOM Inspector under the Tools menu.