Section 5 : 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.

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

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. )

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.
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.
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.
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.

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.

s

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.

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.