WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. lyklev
    Member
    Posted 9 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
    Member
    Posted 9 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?

    Thanks!

  3. Jinsan
    Member
    Posted 9 years ago #

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

  4. Lorelle
    Member
    Posted 9 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. Personally, I prefer to use the Web Developer Extension:
    http://www.chrispederick.com/work/firefox/webdeveloper/

    If you're curious, there's a short and illustrated description of some of its features here:
    http://www.macmerc.com/articles/Power_User_Monday_Tip_of_the_Week/263

  6. Lorelle
    Member
    Posted 9 years ago #

    By the way, what is DOM?

  7. Kafkaesqui

    Posted 9 years ago #

  8. Lorelle
    Member
    Posted 9 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