This can be fine for finding the node you want to look at, but there are easier ways. Nested HTML elements (such as a link inside a paragraph) have a reveal triangle next to their name, clicking this takes you one level further down. When you first look at a page, you won’t see all those yet. These nodes are all listed in the left hand panel, with any ID or CLASS attribute values next to them. Step 1 – find your node!Įach element on your page – be it a HTML tag or a piece of text, is called a ‘node’ of the DOM tree. I find this layout handier than looking at a window behind the DOM Inspector. Type in a URL at the top (A), press ‘Inspect’ (B) and a third panel appears at the bottom, with the browser view. The Inspector will look at whatever site is in the front-most window or tab, but you can also use it without another window. The inspector uses two main panels – the left to show the DOM tree of the page, and the right to show you detail: So without further ado, load up any css based site in your copy of Firefox (or Flock for that matter), and launch the DOM Inspector from the Tools menu.
![where is the document inspector in pages where is the document inspector in pages](https://i.ytimg.com/vi/__i48hxVxLU/maxresdefault.jpg)
The DOM Inspector knows where everything is in your layout, and more importantly, what causes it to look the way it does. You need Firefox’s wise-guy know-it-all, the DOM Inspector. Perhaps you work in a collaborative environment, where developers and other designers are adding code? In which case, the likelihood of CSS strangeness is higher. Why does that heading have all that extra padding? Why is my text the wrong colour? Why does my navigation have a large moose dressed as Noel Coward on top of all the links? The larger your site and your CSS becomes, the more likely that you will run into bizarre, inexplicable problems.