Inspector Clouseau: Firebug UI - HTML Tab

The HTML Tab

The HTML tab shows the DOM, or Document Object Model, structure of your page. This is what the browser "sees". What it uses to render your page. If it doesn't look right, then you likely have a mistake in your markup. When first opened it will show only the head and body tags. If you used the context menu to inspect an element, it will open the tree down far enough to be able to show and highlight the inspected element. The breadcrumbs at the top show you where you are in the tree and let you click back up to a higher level.

Finally, in this tab you can edit your raw markup, delete elements, add new elements, change the value of attributes, muck with styles, and more.

Editing HTML

To edit raw HTML, select an element, then click the edit button at the top left.

This drops you in to an edit mode. Any changes made here, including adding new elements or removing others, will change the DOM when the edit button is clicked again or another tab is selected. Elements added outside the element that is being edited will appear as siblings above or below that element in the updated DOM.

To edit an attribute, click the attribute name. If you want to edit the value, you can click the attribute name and hit tab to get to the value or you can click directly on the attribute value. The former being easier if the attribute has a value, unlike the images shown below.

Adding a new attribute to an element with an existing attribute is as simple as selecting the value of the last attribute and hitting tab. This will move over and add a new attribute name input box. After entering in a name, hit tab again to get the attribute's value edit box. There is an alternate way to do this through a context menu, shown in the next section, which also works when there is not an existing attribute.

HTML context menu

The menu to the left shows the available options on a selected HTML element. From here you can edit the element, like done in a prior section, add new attributes, and delete the element. I also happened to right click over an attribute of the element so options are shown related to it. As can be seen at the top of the menu, there are two copy options. The first copies the element itself and its contents (children) whereas the second only copies the contents.

The last option of the menu shows this element in the DOM tab, revealing the DOM-related properties and their values for inspection or editing as wanted. This is useful for viewing things which affect the element but are not visible in attributes or styles, usually set by JavaScript.

Not all elements will have such a large number of choices, some elements will only offer the option to edit or delete themselves along with the last two menu items shown here. These are usually text nodes, comments, and similar elements. Editing may not work correctly for some such elements, though it will for the both of those types.

Editing CSS

The right side of the above image is where Firebug displays styles related to the DOM being viewed. If you select an element it shows the styles that apply to the current element from most specific to least specific. This will include properties that are inherited, and the selectors which define those inherited properties. If a selector written in the stylesheet does not appear for a selected element, it is likely it does not match that element or it has a syntax error (i.e. the browser did not understand it). Firebug will also not list property declarations with syntax errors. Property values which are overridden by definitions in more specific selectors will be crossed out, as shown below.

Also note in the second image that due to sorting if many selectors or inherited properties apply to the selected element they may be out of view. Thus you may need to scroll to see all values that affect an element.

The button that shows up next to properties on hover can be clicked to turn off that property. This behaves as if that property definition didn't exist or was removed but with the option to click the same button and turn it on again later. Editing a disbaled property, as shown in the next section, will cause it to be enabled again.

Editing CSS

The styles tab shown previously allows adding new selectors and new properties as well as editing existing of both. Editing is as simple as in the HTML area. Just click on the items you wish to edit, and an input will appear. Firebug will provide hints by coloring the shadow around the field red to indicate if you've entered an invalid value, such as a property name that doesn't exist, or coloring it yellow if what you've entered may work but Firebug isn't completely sure. An example of the latter is when you edit a property name with an existing value. Firebug will remove entries with invalid property names or values so if the input has a red or yellow field while editing you will want to check what you've typed.

One last case to be aware of is that it is possible to edit selectors. As a result, a selector can be edited such that it no longer matches the selected element. These selectors will disappear when the edit is finished. They can be found again by selecting any element it selects after the change. Firebug does color the input's shadow yellow in a warning when this kind of change occurs, and will color it green when a selector is changed that still matches the selected element.

To add a new property, just click the last property's value and hit enter. This will add a new property name input below the current list of properties. When you finish entering in the entire declaration, Firebug will sort it alphabetically in to the existing declarations. Declarations can also be added by context menu using the "New Property..." item as shown in the images in the next section.

Lastly, the blue text to the right of selectors are actually links. The text indicates the name of the file this selector came from and the line number where it was found. Clicking this link will open the sytlesheet in the CSS tab, covered in the next section, and highlight the appropriate selector.

Styles Context Menus

Like the HTML context menu, the styles context menu differs depending on what is right-clicked. The leftmost menu is for a selector, and the one to the right of it for a property or its value. Both have much overlap.

The first item in the selector's context menu copies the selector and all the declarations inside it. The item below it just copies the property declarations. A property declaration's first menu item copies the entire declaration with the following two only copying subparts.

The "Add rule..." item in the menu creates a new selector with no declarations in it at the top of the selector list. You may wish to edit the selector before adding declarations as Firebug's choice of a default selector value may not be appropriately specific for your needs. Newly added selectors will always match the currently selected element.

"Edit Element Style..." creates an 'element.style' selector which is a special selector Firebug uses to represent styles declared in markup via the style attribute on elements. If there is already an 'element.style' selector for the selected element, clicking this item will add a new input to enter a new property name. Changes made to the attribute or in the 'element.style' selector will be mirrored so both stay consistent. This 'selector' will always be at the top of the list as inline styles are more specific than those declared in stylesheets.

The Computed Style Tab

... This page is getting rather long. I'm kinda wondering if the styles portion of this shouldn't be on its own page. I also haven't figure out what an article-only table of contents would look like at the top for long pages. Probably not a bad idea to start figuring that out now.

[Delete the previous paragraph and talk about the computed style tab]

The Layout Style Tab

[insert text talking about this tab]

The DOM Tab

This shows the same contents as the DOM tab at the top of the Firebug interface would if you right clicked an element and selected "Inspect in DOM Panel". There's nothing else special about it other than convenience.

To learn more about the next tab continue to the CSS section or return to the main article.