The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

Lesson: Debugging layouts with the DOM-inspector (8 posts)

  1. lyklev
    Posted 11 years ago #

    One of the tools I find very useful when something does not look like I want it to look like, is the DOM-inspector that ships with Firefox (don't get scared now! works for layout problems in IE too). You just need to make sure you checked it when installing Firefox (in custom installation mode, but we always do that, right?)

    At the page that does not look like it should, start the DOM-inspector (from the 'tools' menu, or Control-Shift-I), and find a way to have both the DOM-inspector and the window you want to debug in one screen.

    On the top-left, next to the search binoculars, there is a circle with an arrow; click it. Now click on the object that does not look right.

    A red blinking box marks the innermost box you clicked on. Maybe you can already see that this box has the wrong shape, size, height, etc. The DOM-inspector now shows you the structure of the document with all divs, classes and id's of the elements. This should make it easy for you to find the element in your css file.

    If you still have no clue what is wrong, the right pane shows you the details of this element. On the top-left of the right-pane the button reveals a pull-down menu, in which you can select the various items to inspect.

    From this pull-down menu, the CSS style rules show all rules that eventually determined your layout, making it easy to pinpoint how the layout went wrong.

  2. Lorelle
    Posted 11 years ago #

    Where do we find this DOM inspector? I have FireFox and I'd like to add it. Does it come automatically or is it an add-on?


  3. Jinsan
    Posted 11 years ago #

    ctrl+shift+I to load up the DOM inspector.

  4. Lorelle
    Posted 11 years ago #

    One of the problems that I'm having with the AWESOME tools is that often want to copy code from there to mess with it. I'm finding that when I highlight and then choose Cntrl+C, standard COPY shortcut, it isn't there when I paste. The last thing before that is there. I have to manually click the menu to EDIT > COPY in order to get it on the clipboard. Do you find you are having the trouble or should I upgrade it, though I just installed it?

    And how else do people use these tools to work on their site?

  5. James Huff
    Support Team Rep.
    Posted 11 years ago #

    Personally, I prefer to use the Web Developer Extension:

    If you're curious, there's a short and illustrated description of some of its features here:

  6. Lorelle
    Posted 11 years ago #

    By the way, what is DOM?

  7. Kafkaesqui

    Posted 11 years ago #

  8. Lorelle
    Posted 11 years ago #

    I know, I was just helping others. DOM=Document Object Model

    Thanks for the link.

Topic Closed

This topic has been closed to new replies.

About this Topic