Today’s extension is one that most people do not know about – and still almost everybody has it installed. The explanation for both is that it is distributed with Firefox, and unless you specifically prevent it’s installation, you will get it. It is DOM Inspector.
Why would you care about something like this ? Unless you make living by creating Web applications, you probably would not. But if you do, it can help you a lot !
To open an inspector window for any page, select Tools->DOM Inspector and press ‘Inspect’ next to URL (it copies URL of the page you are on, but you can type in any URL). The window is divided in three panes – document tree, node properties and in lower panel the rendered HTML. Now you can walk through the document tree and see the node properties (and note that in rendered page a blinking red rectangle will highlight the node you are on). Or you can go the other way – click on the top left button (“Find a node …”) and then click anywhere in the rendered document – the tree will reveal position of the element you are on. This is very usefull especially when you are trying to locate the chunk of HTML buried deeply in nested structures of tables.
If you need less detailed information about the actual tree, but more summary type info on the page, try Ctrl-I (or Command-I on OS-X). It shows you page information dialog, with tabs for full HTTP headers (request as well as response), list of all links on the page, all media on the page (images, flash, ect) with option to save them to file, as well as information about everything that contributes to the rendered pages with its size.
So next time you will be trying to make sense of huge, complicated HTML source of a Web page, remember that help is only one click – Apple-Shift-I (or Ctrl-Shift-I for the Windows) – away.