Using F12 Developer Tools to Debug HTML and CSS

  • Articolo

This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.

The F12 tools can help you find and fix errors in HTML and Cascading Style Sheets (CSS) code that might otherwise be hard to find in your source code. By showing your HTML and CSS code in a Document Object Model (DOM) tree as Windows Internet Explorer interprets the source, code such as dynamically generated changes are easier to debug.

This topic includes the following sections:

  • Using the HTML Tab
    • Viewing Dynamic HTML Code
    • Changing Values and Adding Attributes
    • HTML Tab Views and Tools
    • Right-click Menu on the HTML Tab
    • Inspecting CSS Rules
    • Shortcut Menu options on the CSS Tab
  • Changing Numeric CSS Values in the CSS Tab
  • Search and Save Changes
  • Related topics

Using the HTML Tab

The HTML tab view shows your webpage's dynamic markup in a tree view as represented by Windows Internet Explorer 9 in memory. It reflects the DOM when F12 tools is opened, and needs to be refreshed if changes are made. You can navigate the tree directly by using the mouse or the keyboard, and view attributes, and change values.

To jump to a specific element on a webpage, press Ctrl+B or click the Select element by click  button. On the webpage, elements are highlighted as you hover your mouse over them. When you click an element, that node in the DOM tree is highlighted in the HTML view.

When you select an element in the HTML tab, you can use the View > Source menu to filter your view to either the elements you have selected with their associated CSS styles, or just by themselves.

The Element source with style button shows just the selected element's HTML source and its content, along with the CSS that applies to it, in a new window. This helps to focus on the sources of the selected element only. An HTML element within the body of the DOM tree must be selected by using the HTML tab view before this command can be run. To select an element, click the Select element by click button, or click an element in the DOM tree. When you use Select element by click, it is a good idea to refresh the view first.

To expand or collapse the properties of an element, click the box marked with a plus (+ )or minus (-) sign. All elements in the HTML and CSS views are editable, and the edits take effect immediately. Style rules and attributes can be turned on or off by clicking the check box next to the element name.

Viewing Dynamic HTML Code

Most websites use dynamic code. Client side scripting is often used to generate the rendered HTML that the user sees. Static HTML code is often minimal and only used to get things started on the page. Because F12 tools displays HTML and CSS code as it is rendered in the browser, and not the strict HTML source, finding errors is easier.

The HTML tab shows the current state of the DOM and does not automatically track changes. If you change a value or attribute, and it does not display immediately, refresh the view by pressing F5 in the HTML tab.

Changing Values and Adding Attributes

F12 tools allows you to change the value of almost any attribute or property. From within the HTML tab, select an element either from the DOM tree, or by using the Select element by click button. In the properties view (right pane), click a value to highlight and change.

For example, open the CSS sample page from How to Add Rounded Corners with CSS3 in Internet Explorer 9 and press F12 to open the tools. Click the Select element by click button , and click the maroon Now in stock at Fourth Coffee title. In the properties pane, click the color attribute under the "h2" selector. Type a new color name or value, such as blue, and press Enter. The color of the heading changes immediately.

To add an attribute, right-click an element in the left pane of the HTML or CSS tab, and then click Add attribute in the context menu. You need to know the format of the attribute, such as "background-color:", and the correct values.

To remove an attribute, either one you added or existing ones, click the attribute in the right pane view, and then press the Delete key. For attributes in the original page, you can get them back by refreshing the webpage. Added attributes need to be reapplied.

If you just want to turn off an attribute temporarily during a session, clear the check box next to the attribute in the right pane of either the HTML or CSS tab.

HTML Tab Views and Tools

When you select an element in the left pane tree view, on the right, you can view and change styles, box model layout, and attributes for the selected and child elements. Changes you make are not permanent and will be lost when you refresh or open another page. However, you can save your HTML code by clicking the Save button.

When you view multiple CSS rules that apply to a selected element in the Style and Trace Style tabs, the rules are displayed based on their specificity according to the CSS specification. The rule at the top of the list is the first to get applied to the selected element, while the rule at the bottom is the one that currently defines the style properties of a selected element. The values of these rules are editable: Click a value, type a new value, and press "Enter". A change appears on the webpage immediately. The information found in both property types are the same. However, in the Trace Style property type, the same information is grouped by properties that have the rules displayed below them. The properties are listed in alphabetical order and the rules are again ordered based on specificity.

  • Style displays the rules and styles for an element that you select in the tree view. It is organized by rules and includes inherited and overriden attributes.

  • Trace Styles shows the same information as Style, but is grouped by properties rather than rules.

  • Layout shows the box model for the selected element. Any value in the Layout view can be changed by clicking it in the diagram. The Layout tab is disabled for Scalable Vector Graphics (SVG) elements.

  • Attributes shows the attributes, such as ID, for a selected element. Attributes can be added or removed

Right-click Menu on the HTML Tab

As mentioned previously, you can right-click an element in the left pane of the HTML tab. Here are the options you can use in the HTML tab.

Menu item What it does
Add attribute Adds a new attributes to a tag or an element.
Copy Copies the tag and attributes to the clipboard.
Copy InnerHTML Copies the InnerHTML content (child text, elements, and attributes) of an element to the clipboard.
Copy OuterHTML Copies the OuterHTML content (child text, elements, and attributes) of an element to the clipboard.

 

If you click a child node of an element in the HTML tab, such as the text element of an "h2" tag, you might not get all the options. If you do not see the option you want, go to the parent element and try again.

Inspecting CSS Rules

The CSS tab shows you the interplay among your style sheets. This tab is most useful for sites that use multiple style sheets. To switch between style sheets, use the style sheet chooser. When you select a style sheet, the rules and their associated style properties appear in the left pane. By default, this button shows the first style sheet referenced in your webpage. Click the drop-down list to select another style sheet if there is more than one style sheet being used on the webpage.

Shortcut Menu options on the CSS Tab

When you right-click the CSS tab, the shortcut menu offers more options than the HTML tab. The enabled options are context sensitive and depend on where you click in the CSS tab.

Menu item What it does Where to right-click
Add attribute Adds a new attribute to a tag or an element. On either a rule or an attribute (any element).
Add rule Add a selector, declaration, or style. In the white area, not on an existing element.
Add rule after Adds a selector or rule after the current rule. On any element.
Add rule before. Adds a selector or rule before the current rule. On any element.
Delete attribute. Deletes the selected attribute. On any attribute.
Delete rule Deletes the selected rule and all related attributes. On any rule or selector.

 

Changing Numeric CSS Values in the CSS Tab

Values for CSS properties can be changed as almost any other property in F12 tools. You can change CSS properties by clicking the property value and typing a new value. In the CSS tab, you can also use the up and down arrow keys to increment or decrement numeric values.

Search and Save Changes

Like with the rest of the tabs in the F12 tools, you can search for specific tags, properties, attributes, or values with the Search box in both the HTML and CSS tabs. When you click the Search button, all instances of the keyword are highlighted, and the pane scrolls to show the first match.

If there are multiple matches, you can scroll forward and back using the Next and Previous buttons.

Changes you make, such as adjusting a box model or adding an attribute, are not persistant. When you reload the page in the browser or navigate to another webpage, any changes you make are lost. To save changes to a local copy of the HTML/CSS file, click the Save button on the left pane.

How to use F12 Developer Tools to Debug your Webpages