IE debugging page 6: Use F12 Developer Tools to debug HTML and CSS (Windows)

F12 Developer Tools help you find and fix HTML and Cascading Style Sheets (CSS)Code. If you do not use these tools, it may be difficultSource code. By displaying your HTML and CSS code in the Document Object Model (DOM) tree when you interpret the source in Windows Internet Explorer, you can easily debug Code such as dynamically generated changes.

This topic contains the following parts:

Use the "html" tab

The "html" Tab View displays the dynamic markup of Your webpage in the Tree View rendered by Windows Internet Explorer 9 in memory. It reflects the DOM when F12 is enabled. If there is any change, it needs to be refreshed. You can use the mouse or keyboard to navigate directly to the Tree View, view features, and change values.

To jump to a specific element on a webpage, followCTRL + B, Or click "Click Select element"
Button. When you hover over an element on a webpage, the corresponding element is highlighted. When you click an element, the corresponding nodes in the DOM tree are highlighted in the HTML view.

When you select an element on the "html" tab, you can use the "View"> "Source" menu to filter out CSS styles associated with elements or elements selected only by elements in your view.

The "element source with style" button only displays the HTML source and content of the selected element in a new window, And the CSS that applies to it. This helps to focus only on the source file of the selected element. You must use the "html" Tab View to select an HTML element in the subject of the DOM tree before you can run this command. To select an element, click"Click Select element"Or click an element in the DOM tree. When you use"Click Select element"First, refreshing the view is a good idea.

To expand or collapse the attributes of an element, click the box marked with the plus sign (+) or minus sign. All elements in the HTML and CSS views can be edited and the editing operation takes effect immediately. You can click the check box next to an element name to enable or disable style rules and features.

View Dynamic HTML code

Most websites use dynamic code. Client scripts are usually used to generate HTML that users can see. The number of static HTML code is usually very small and is only used to start operations on the page. Because the F12 tool will display HTML and CSS code displayed in the browser, rather than displaying strict HTML sources, it is easier to locate errors.

The "html" tab displays the current status of the Dom and does not automatically track changes. If you have changed a value or feature but it is not immediately displayed, pressF5Refresh the view.

Change Value and add feature

The F12 tool allows you to change the value of almost any feature or attribute. Select an element from the DOM tree or use"Click Select element"Select an element. In the property view (right pane), click a value to highlight and change it.

For example, in Internet Explorer 9, how to use css3 to add the CSS Sample page in the rounded corner and pressF12Open the tool. Click "select element", and then clickNow in stock at fourth coffeeTitle. In the properties pane, click the color feature under the "h2" selector. Enter a new color name or value, such as blue, and then pressEnter. The title color will be changed immediately.

To add a feature, right-click the element in the left pane of the "html" or "CSS" tab and click "add attribute" in the context menu ". You need to know the format of this feature (such as "background-color:") and the correct value.

To delete a feature (the feature you added or an existing feature), click the feature in the right pane, and then pressDeleteKey. For features on the original page, you can restore them by refreshing the web page. The added features need to be applied again.

If you only want to temporarily disable a feature during a session, clear the check boxes next to this feature in the right pane of the "html" or "CSS" tab.

"Html" tab views and tools

When selecting an element in the left pane tree view, you can view and change the style, box model layout, and features of the selected element and its child elements on the right side. Your changes are not permanent and will be lost when you refresh or open another page. However, you can click "save" to save your HTML code.

When you view multiple CSS rules applied to the selected elements on the "style" and "trace style" tabs, they are displayed based on the uniqueness of these rules according to CSS specifications. The rule at the top of the list applies the first rule to the selected element, and the rule at the bottom is the rule that defines the style attribute of the selected element. The values of these rules can be edited by clicking a value, typing a new value, and then pressing "enter ". Changes are immediately displayed on the webpage. The information in the two property types is the same. However, in the "trace style" attribute type, the same information is grouped by attributes (rules are displayed below. These attributes are listed alphabetically and sorted again based on the uniqueness.

• StyleDisplays the rules and styles of the selected elements in the Tree View. It is organized by rules and contains inherited and rewritten features.

• Tracking StyleDisplay the same information as the style, but group by Attributes instead of rules.

• LayoutDisplays the box model of the selected element. You can click a value in the chart to change any value in the Layout View. The layout tab is disabled for the Scalable Vector Graphics (SVG) element.

• FeaturesDisplays the features of the selected element, such as ID. You can add or delete features.

Right-click the menu on the "html" tab

As described above, you can right-click an element in the left pane of the "html" tab. The following are the options you can use on the "html" tab.

Menu item	Function
Add features	Add new features to a tag or element.
Copy	Copy the tag and feature to the clipboard.
Copy innerhtml	Copy the innerhtml content (Child text, elements, and features) of the element to the clipboard.
Copy outerhtml	Copy the element's outerhtml content (Child text, elements, and features) to the clipboard.

If you click a subnode of an element on the HTML tab, such as a text element marked with H2, you may not be able to obtain all options. If you do not see the required options, go to the parent element and try again.

Check CSS rules

The "CSS" tab displays the interactions between your style sheets. This tab is useful for websites that use multiple style sheets. To switch between style sheets, you can use the style sheet selector. When you select a style sheet, the rules and their related style attributes are displayed in the left pane. By default, this button displays the first style sheet referenced on the webpage. If multiple style sheets are in use on the webpage, click the drop-down list to select another style sheet.

"CSS"Shortcut menu options on the tab

When you right-click the "CSS" tab, the shortcut menu provides more options than the "html" tab. The enabled options are context-related and depend on the position you click on the "CSS" tab.

Menu item	Function	Right-click
Add features	Add new features to a tag or element.	On rules or features (any element.
Add Rules	Add selector, declaration, or style.	In the white area, rather than on the existing element.
Add Rules	Add a selector or rule after the current rule.	On any element.
Add Rules	Add a selector or rule before the current rule.	On any element.
Delete a feature.	Delete selected features.	Any features.
Delete rule	Delete selected rules and all related features.	On any rule or selector.

On the "CSS" tab, change the numeric CSS value.

The CSS attribute value can be changed like almost any other attribute in the F12 tool. You can click the attribute value and enter a new value to change the CSS attribute. On the "CSS" tab, you can also use the up key and down key to increase or decrease the value.

Search and save changes

Like other tabs in the F12 tool, you can use the search box to search for specific tags, attributes, features, or values in the HTML and CSS tabs. Click"Search"When you click the button, all instances with the search keyword are highlighted, and the pane will scroll to display the first match.

If multiple matching items exist, you can use"Next"And"Previous"The buttons scroll forward and backward.

Your changes (for example, adjusting the box model or adding features) are not permanent. Any changes you make will be lost when you reload the page or navigate to another page in your browser. To save changes to the local copy of the HTML/CSS file, click"Save"Button.