Firebug Tutorial : HTML tab – Playing with HTML DOM

Firebug - Web Development Evolved

Firebug Tutorial

Section 2 : HTML Tab – All about HTML tab

Introduction

The HTML tab is the second tab of Firebug console that allows you to play with HTML DOM in your browser. There are “View Source” window in the left side of the HTML panel and 3 sub panels called “Style”, “Layout” and “DOM” in right side. The HTML tab will help you to find out how a particular web page is structured. It is allowed to edit the HTML element or CSS rule dynamically on the live view.

The following are what HTML tab can do for you.

Features ~

  • Inspect HTML element
  • Explore the style of a particular HTML element
  • Explore the HTML DOM of the whole document
  • Edit the existing HTML element and CSS
  • Search the internal HTML element instead of Text on the page.

The “View Source” panel

The “View Source” window located at the right side of HTML panel. It has more advanced features than what the default “View Source” of Firefox browser has. It shows the HTML DOM in hierarchical structure or treeview with highlight color. (Please check the screenshot below.). It allows you to expand/collapse the HTML dom so that it is very easy for you to figure out the whole structure of the webpage. Another advantage of that HTML “view source” is that it allows you to edit/delete the HTML elements or attributes on the fly and the changes will immediately affect to the webpage that you are watching.

html-view.jpg

Options of “View Source” panel

There are six options as below in “View Source” panel.

  1. Show Full Text : If the text within a element (i.e: <P> tag ) are too long then Firebug will truncate this text and will append “…” after the string.
  2. Show White Space : It shows the white space between each HTML element. I don’t think that option is useful.
  3. Show Comments : Check this option if you want to show the comment in “View Source” panel. otherwise, unchecked.
  4. Highlight Changes : It shows in highlight color if you make some changes in HTML view.
  5. Expand Changes : It will expand the HTML element that has changes. ( But it seems doesn’t work properly. it always expand the node even “Expand Changes” option is not selected .)
  6. Scroll Changes Into View : The scroll bar of “View Source” panel will move to the place where something has changed.

Note: If you are not very clear about option 4, 5 and 6, go to this page. There are two buttons on that page. Open the Firebug console by pressing F12 and click “HTML” tab. Check some or all of those options (4,5 and 6) in Option menu of HTML tab. Click one of those buttons on that page and find out what is happening in HTML panel.. For example, you select “Scroll Changes Into View” option and then, you click the button to append new row to the HTML table. Then, the HTML view will scroll to the position where the changes occur.

Left Menu of “View Source” panel

You will see the following menus if you right-click on the HTML element in “View Source” Panel.

  • Copy HTML : Copy the whole HTML element that you selected.
  • Copy innerHTML : Copy the innerHTML of HTML element that you selected.
  • Copy XPath : Copy the xpath of HTML. (i.e: /html/head/title)
  • Scroll Into View : Move the HTML element into View. (See the example 1.2 of next post for details)
  • New Attribute : Create new attribute in exisiting HTML element
  • Edit HTML : It allows you to edit the HTML on the fly.
  • Delete Element : Delete the existing HTML element on your page.
  • Inspect in DOM tab : Get the properties of the selected HTML element in DOM tab.

Now, I think that you have some ideas about “View Source” panel. So, let’s take a look how to inspect the HTML element.

Inspecting HTML element

inspect-button.jpg

The button called “Inspect” at the right side of HTML toolbar as the picture above allows you to inspect the HTML element of the web page. All you need to do is that just click that button and move your mouse around the webpage. The HTML element under your cursor will be highlighted and the related elements will be selected in “View Source” panel of HTML tab. ( Please check the image below if you want to know how it looks like. )

inspect-html-demo.jpg

There are two reasons why this feature is useful for web developers or webdesigners.

  1. It is useful when we are figuring out why something in our page doesn’t look okay.
  2. It is also useful when we are learning other people’s web design and how people created those designs. (I say “learning” but not copying other people’s work. Sometimes, it is not good enough to keep on creating our own stuffs without caring about how the world is moving. As there are a lot of websites that have gorgeous design on internet, we should take a look a lit bit how those designs are structured. )

Editing the HTML element and attribute

  1. Editing the exisiting attribute of HTML element
    Just click on the attribute. It will show the textbox on the attribute as the picture below. You can just key-in and press “Enter” when you have done.edit-attribute.jpg
  2. Creating new attribute in the existing HTML element
    Right-click on the exisiting HTML element and select “New Attribute” on content menu. The placeholder for new attribute will be shown as the picture below.new-atttribute.jpg
  3. Creating/Editing the HTML element
    If you want to create or edit the HTML element, righ-click on the HTML element and select “Edit HTML” on content menu or click “Edit” button on the toolbar of HTML tab. The “View Source” panel will change to something like notepad. Then, you can edit the existing HTML element or add new HTML element. If you finish editing, click Edit” button then it will change to normal “View Source” panel and the changes will affect to the webpage.edit-html.jpg
  4. Deleting the HTML element.
    This one is very simple. You need to right-click on the note that you wanna delete. and chose “Delete Element” on content menu.

The “Style”, “Layout” and “DOM” subpanels

Style panel

Those sub panels work very closely with “View Source” panel. If you select one of HTML element in “View Source” panel, the CSS rules that are styling to that element will be shown in the “Style” subpanel and the properties of that element will be shown in “DOM”. It is so easy for you to find out which CSS rules are styling to which element.

Take a look at this picture. We selected the div called “page” in “View Source” panel. The CSS rule (i.e: #page in this case) that is styling this DIV element will be shown in “Style” panel.

explore-the-stylesheet-of-element.jpg

Editing the CSS attribute

You can also edit the CSS style (i.e: margin, width or etc) in “Style” panel. When you click on the attribute, it will show one textbox that you can type anything you want. If you forget the stylesheet attribute name, you can press “Up” or “Down” key to get the available stylesheet. It is like IntelliSense in Visual Studio.

Computed Style

If you like to see the CSS rule in computed style, you can change the look by checking “Show Computed Style” in the option of Style panel. I don’t think that option is very nice. I more prefer to use the default one.

show-computed-style.jpgs

Layout Panel

If you click on the “Layout” tab, you will get the offset, margin, border and padding of the HTML element that you have selected in “View Source” panel. You can display the vertical ruler and horizontal ruler on your page if you check “Show Rulers and Guides” in the option of “Layout” panel. And you can also edit the value of offset, margin, border and padding of that element.

DOM panel

DOM panel shows all DOM properties of the HTML element that you have selected in “View Source” panel.

dom-tab.jpg

Conclusion

That is all about HTML tab. I covered everything about HTML tab in one post. So, it might be a lit bit confused for you. Let me show you which one is more important and which one is less.

  1. Inspect HTML, “View Source” panel and “Style” panel [ This is very important so you must know about this ]
  2. Edit the HTML element and CSS [ this is good to know. ]
  3. “Layout” panel and “DOM” panel [ good to know but doesn’t matter if you don’t know. ]

Okay. I will stop this tutorial here. I will post about some examples related to HTML tab in next post..

Updated: I have posted two examples related to HTML tab in this post. <link: http://michaelsync.net/2007/09/23/firebug-tutorial-html-tab-examples/>. Hope you will find it useful..

Feel free to let me know if you have any suggestion or comment. Thanks..

16 thoughts on “Firebug Tutorial : HTML tab – Playing with HTML DOM

  1. Nice article :)

    If I may add, in response to: “Show White Space : It shows the white space between each HTML element. I don’t think that option is useful.” …

    It can be very helpful when iterating over the length of an object’s children and FF treats those white spaces as nodes where IE will ignore them. Especially when you’re fixing the code of an “IE is the only browser” type ;)

  2. this is what i used to ask you .. you never explained to me in this much detail .. anyways, glad you did now :)

  3. Hi Mike,

    Great article! Very informative for a first time installer like myself. After reading this article, I was left with only one question: How do you use this program to permanently edit the html of a site?

    For example, I use Firebug to locate the HTML/CSS code I want to edit. Please refer to my page so you can understand first hand –

    http://thizzparty.com/index.php/thizz-list-main

    I want to edit the font colors, and also change “Latest Ads” to “My Ads”. Can firebug locate exactly where I can find the parts of code to edit?

    Thanks, and god bless!

    Ty

  4. Hi !
    I’m looking for a software to edit or delete comment on this webpage:
    http://wikimapia.org/#lat=48.544708&lon=2.6783185&z=19&l=0&m=b&show=/10158199/fr/avenue-du-Mar%C3%A9chal-Juin-17
    Can I use Firebug to do like this?
    – Edit comment place :”a v e n u e du X X X ” with current vote +12 and change it To -1
    – Or, How can I delete this comment :”a v e n u e du X X X ”
    I have installed addon Firebug of firefox and I edited the wiki site above, on the comment place: XXX XXX with current vote +12 and changed it To -1, but when I reload the above site, it returned same as the first tỉme ( That means +12 )
    What’s it wrong ? How can I do ? if I reload, the changing is valid ( change it To -1 )
    I Would like to receive your answer with the Firebug directions for use in the above site ( step-by-step instruction )
    or I also Would like to get another software can do the action that I would like
    Best wishes
    THANK YOU

  5. How do I save and publish changes? When I change “alt text” I can see the changes on the webpage, but when I close it and view in another browser, the changes are not saved. Help.

  6. I have been using Firebug for only a few days now. I can generally and easily find what i am looking for but like others above … I can see the pages live but cannot find how to SAVE the changes???

    Is there a save mechanism which would then enable meto upload the file?

  7. How do I get to the webpage that displays the beginning of your Firebug Tutorial? Your tutorial looks great.I would like to start from the beginning of your tutorial.

    Thanks!

  8. I still don’t get it. How to find html location. For example, if I want to remove hard coded navigation menu on wordpress template, can I find the location with firebug?

    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *