FEOTD: well hidden secret

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.

DOM Inspector will also help you see (and debug) the CSS and see the Javascript objects of the page. Best way how to find out, it to start experimenting. You can also get more information on how to use it, including nice snapshots on this and this blogs.

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.

Explore posts in the same categories: Firefox Extensions

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: