logo

How to Use Firefox's DOM Inspector

As promised, here's a little how-to on making the most of Firefox's DOM Inspector tool. Understanding the way a web page has been constructed is normally a case of viewing the source HTML and trying to build a mental picture picture of its structure, based on the way the different elements are nested within each other. It takes some practice, but it can be done. Much easier is to use a tool like the DOM Inspector, which lets us look at each part of the page, piece-by-piece, using a structured tree approach.

As an example I'll take the page I talked about in my last post. The first step is to browse to it in Firefox. Now launch the DOM Inspector from the Tools menu (Ctrl+Shft+I). You'll see a window something like this:

screengrab

From the View menu enable the "browser" and make sure that Blink Selected Element is selected. The URL of the page you're interested in should already be the address bar at the top. Click on the Inspect button (highlighted by #1 in pink letters on the screengrab above) to the right of the address bar and it will load the page in the "browser" pane.

In order to find the part of the page you're interested within the document tree you can use two methods. The hardest is to drill-down through the tree, element by element, until that part of the page flashes (highlighted #4). Much easier is to click on the button (highlighted #2) that lets you simply click on said element to automatically find it in the tree. Click on one of the problems links with the small text and it will quickly that element, as shown above. In this case, the structured hierarchy of the link within the DOM is:

HTML > BODY > TABLE > TR > TD > TABLE > TR > TD > DIV > TABLE > TR > TD > SPAN > A

screengrabArmed with this information it is then fairly simple to work out which bits of the CSS stylesheet have an affect on the link element. How? Well, we can find out much more information about any given element node than simply its place in the document. Using the button highlighted at #5 we can choose to view different property-sets for the selected node. Switch to CSS Style Rules and you'll see all the styles applied to it. Work back through the tree and you'll see the other styles, some of which it inherits.

It's hard to sum up just how useful this tool can be. Hopefully this is a good example though. It may be a little rough around the edges but it's an extremely useful tool. Until recenlty I'd over-looked it and never bothered working out how to use it. Now I know how I'll probably be using it daily.

Here are some of the other uses and benefits of the Inspector:

  • Learn the strucuture of a HTML document.
  • See how particular elements on a page are nested.
  • Delete elements to see effect on page.
  • Edit/change class names properties atrributes of elements
  • Add attributes to the tree (In theory! This doesn't seem to work too well).

You can read more about DOMi in this entry at Mozillazine's KB

Comments

    • avatar
    • Andrew Tetlaw
    • Sun 27 Feb 2005 18:15

    Here's another reason why Moz is the web developers tool of choice.

    The DOM browser is a must-have when you're doing dynamic page transformations (e.g. using XMLHTTPRequests and updating the page on the fly) because view source won't help you.

    DOM Browser will show you the in-memory DOM tree, view source only shows the initial page source as downloaded by the browser.

    • avatar
    • Chris Melikian
    • Mon 28 Feb 2005 03:17

    It's worth mentioning that you have to select "Developer Tools" or somesuch when installing Firefox in order to have the DOM Inspector.

    • avatar
    • Jake
    • Mon 28 Feb 2005 03:31

    Good point Andrew.

    Really Chris? Woops. Well, if anybody doesn't have it installed I recommend a re-install over the top of your current version and selecting "developer tools". Your current settings should stay intact.

  1. Good reminder about this Jake!

    :-)

    Its a good educational tool aswell as a developers tool. I have also noticed more and more sites are becoming firefox compatable.

    I'm sure M$ will copy their idea soon...

    Allen

    • avatar
    • Louis
    • Mon 28 Feb 2005 11:06

    I have such bad luck at this stuff, but I do not see the DOM Inspector. I have Mozilla FireFox with the latest version of the WEB Developer 0.9.3 - which I use all the time. But I do not see the Dom Inspector in the tools menus. This looks pretty handy thing to have. What I'm I doing wrong???

    • avatar
    • Louis
    • Mon 28 Feb 2005 11:12

    Sorry to waste the space, but I fixed it by updating to the new version. Sorry about that. Anyway, this is very cool ideed.

    • avatar
    • Chris Melikian
    • Tue 1 Mar 2005 01:43

    It's definitely required. Need to do a "Custom Installation" and choose "Developer Tools"....

  2. Nice Idea,

    but I see only Stylesheets

    and Javascript Object. DOM Nodes is not available for me. I tried {Link} and

    this page {Link}

    Did I miss something.

    Thanks in advance

    Ingo

    • avatar
    • Jake
    • Tue 1 Mar 2005 12:02

    Ingo. What you see in that list depends on what type of node you have selected in the tree. Make sure it's an actual "item" on the page rather than a bit of text or some "anonymous content".

  3. Thanks for the fast reply!

    Ok, what I do is.

    1) Open a page like this {Link}

    2) Open Dom Inspector (DI)

    3) Copy URL to DI

    4)View-> Select BLINK SELECTED ELEMENT

    4) Click Inspect

    6) Select Find a NODE (your PINK 2)

    7) Try to select DOM NODES (under your PINK 2)

    Nothing happens. Maybe I have overseen

    how I can select an element.

    I do not get any 'html' tree. Stylesheets and Javascript are available.

    • avatar
    • Jake
    • Tue 1 Mar 2005 13:28

    Ingo. You say in 7) that you select nodes under #2. Are you clicking on a part of the actual page in the browser at the bottom of the screen?

  4. Thank you again!

    I have the solution! I deinstalled Firefox 1.0 and reinstalled 1.0.1. Before this I installed newer Firefox versions just over my older ones.

    Now it works and rocks! This is pretty cool.:-)

    Thank you for your support and inspiration.

    • avatar
    • Anura
    • Tue 1 Mar 2005 16:17

    Thanks Jake. I was browsing the DOM tree but not seeing the selected item in the bottom pane! I never even saw the View > Browser option.

    Talk about being thick!

  5. With the FireFox extension "Web Developer" {Link} you can find the CSS information that applies to an element much faster. Just select "View style information" from the CSS-meny (provided the Web Developer Toolbar is visible) and then simply hover over stuff until you find what you're looking for, click, and hey presto, there it is.

    • avatar
    • Jake Howlett
    • Thu 3 Mar 2005 03:10

    Ake. That's a nice tool, but it's a bit gimmicky in my opinion and not really up to much. It might be faster but it misses out on lots of stuff and doesn't paint the whole picture. If you really want to know what's going you need something like DOMi.

    • avatar
    • Ake
    • Thu 3 Mar 2005 12:33

    agreed that if you want the whole kaboodle you better go with DOMi(no?). but if you're working with the stylesheets and trying to get at what rules are applied to and inherited to a specific element above method get you there faster.

    • avatar
    • Matt
    • Tue 26 Apr 2005 06:15

    It should be noted that the DOM inspector won't work properly if you're using tabbed browsing. I found I needed to open a new window with the page I wanted to inspect before the DOM inspector would show the DOM nodes. This is using 1.03.

    • avatar
    • Fri 14 Oct 2005 08:45 PM

  6. Oh to find a DOMI use for rip.mozdev tutorial .. ;)

    • avatar
    • Rob
    • Tue 8 Nov 2005 08:50 AM

    Very handy intro. Thank you!

    I had the same problem as Ingo but the remove/reinstall solved the problem.

  7. Hello! This is the Firefox version that I installed: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8) Gecko/20051111 Firefox/1.5.

    But the DOM inspector is disabled, why?

    can anyone help please?

    • avatar
    • Gary Simpson
    • Mon 13 Mar 2006 06:31 PM

    When you installed Firefox did you do a custom installation and select development tools? If you can't remember try reinstalling over your existing Firefox installation. It will retain all of your settings so you don't need to worry about losing your bookmarks, extensions, themes, etc.

    • avatar
    • Hernan
    • Sat 18 Mar 2006 02:08 PM

    Rony Mattar:

    please. reinstall firefox and choose Custom Install, and pick the DEVELOPPMENT TOOLS option.

    you won't loose any changes and you will get the DOM Inspector installed.

    i found this page because i thought it was a new feature in 1.5 but it was the type of installation i chose.

    bye

  8. Nothing, not even this silly DOM tool, can make up for Firefox being the WORST browser in the world. It is insanely unstable - and from a real web developers perspective can't do anything right.

    BLIND adherance to standards is for idiots with no brains to solve real problems.

    Ergo Firefox is for idiots. Nothing is worse.

  9. Best or Worst depends on what you need!

    IE 6 is the worst due to the 'developers' ability to open dozens of popups all over creation with no control to the user. tariana must be one of these spam pushers, afraid to lose the best thing spammers ever had.

    Firefox like most new software is improving with each version and I am happy with its use of the DOM and DOM inspector.

    (side note) I started programming in ML back in 1975 and happy with the progress Mozilla has made.

  10. DOM inspector don't start when I hit Ctrl-Shift-I in Mozilla 1.5.0.3. Please specify version of product you write about.

    • avatar
    • Salma
    • Sat 24 Mar 2007 05:55 PM

    I am really stuck. Iv just tried installing dom insoector but this is still not appearing on my tool bar, any idea guys??

    • avatar
    • Paul
    • Wed 4 Apr 2007 09:13 PM

    I just installed Web Developer 1.1.3 looks cool - can't image how I got on without it.

    Anywho - All tools seem to work (so far) except the DOM inspector. Absolutely nothing happens. Does it assume some engine/VM will be available. I dont even get an error message.

    • avatar
    • Rob
    • Fri 27 Apr 2007 06:04 PM

    Same here, clicking inspector does nothing.

    • avatar
    • stimpy
    • Mon 25 Jun 2007 10:24 AM

    Same here. strange. Anyone knows why?

    • avatar
    • Jason
    • Fri 21 Sep 2007 03:36 PM

    Go to Tools>Add Ons>Web Developer>Options>Dashboard and check "Open the DOM Inspector in the dashboard.

    • avatar
    • Elif
    • Wed 19 Dec 2007 02:40 AM

    I recommend you Firebug. You can do similar things and more with it.

    • avatar
    • Bor
    • Mon 6 Apr 2009 02:37 AM

    When i inspect something on a page ca it be saved or is it gone on the next reload?

Your Comments

Name:
E-mail:
(optional)
Website:
(optional)
Comment:


About This Page

Written by Jake Howlett on Mon 28 Feb 2005

Share This Page

# ( ) '

Comments

The most recent comments added:

  • avatar Bor about 6 years ago
  • avatar Elif about 7 years ago
  • avatar Jason about 7 years ago
  • avatar stimpy about 8 years ago
  • avatar Rob about 8 years ago
  • avatar Paul about 8 years ago

Skip to the comments or add your own.

You can subscribe to an individual RSS feed of comments on this entry.

Let's Get Social


About This Website

CodeStore is all about web development. Concentrating on Lotus Domino, ASP.NET, Flex, SharePoint and all things internet.

Your host is Jake Howlett who runs his own web development company called Rockall Design and is always on the lookout for new and interesting work to do.

You can find me on Twitter and on Linked In.

Read more about this site »

Elsewhere

Here are the external links posted on the same day.

More links are available in the archive »

More Content