Introduction to F12 Developer Tools

Artikel
03/03/2016

F12 developer tools is a suite of tools to help you build and debug your webpage.

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

Writing great webpages requires coding expertise, as well as the right tools to find and debug issues that will inevitably crop up. Windows Internet Explorer 9 provides a view of your rendered code, and F12 tools provides a view of how those pages are interpreted on a code level by Internet Explorer 9. F12 tools also help identify and report about elements on the page such as links and image reports.

What F12 tools does
Opening F12 tools
Navigating your webpage and code in F12 tools
- Change attributes and variables
- Search for items
- Select element by click
Related topics

What F12 tools does

When you analyze your HTML code, the view you see through F12 tools is the actual way Internet Explorer 9 Document Object Model (DOM) interprets the page, and not the original source code. This is an important distinction to note. Because of representation, it is a good idea to refresh the HTML tab to get the current DOM, especially when you use dynamic elements.

The HTML tab shows your webpage's dynamic markup in a tree view. This is different from the original source code in that it reflects how Internet Explorer 9 has interpreted the original markup code, and any changes that have been made to the DOM since loading the page. This view needs to be refreshed periodically to reflect any recent changes to the DOM.

For example, if you are using script to build a webpage, looking at the source might not show you what your page is actually displaying to your users. An HTML or Cascading Style Sheets (CSS) rendering bug might take you a while to find with the original source code, but when you use the F12 tools, you see the actual code that Windows Internet Explorer is interpreting in the DOM.

The following example shows this behavior. The source code, and the resulting code that Internet Explorer interprets when dynamically creating elements in the webpage is shown in the following code example.

<!DOCTYPE html PUBLIC>
<html>
<head>
    <script type="text/javascript">
        function makePage() {
            for (var i = 1; i < 10; i++) {
                var myChild = document.createElement("div");
                var myDiv = document.getElementById("myCount");                
                myChild.appendChild(document.createTextNode("Number: " + i));                               
                myDiv.appendChild(myChild);
            }        
        }    
</script>
    <title>Dynamic page sample</title>
</head>
<body onload="makePage();">
<h1>Dynamic page sample</h1>
<div id="myCount"></div>
</body>
</html>

When the preceding example is rendered by Internet Explorer 9, it looks like the following screen shot. The webpage shows a series of nine "<div>" elements with text.

When you look at the source code (right-click inside the browser window, and then click View source), you only see the first "<div>" tag that was used as the parent element, but not much else.

However, when viewed in the HTML tab, you see the parent tag ("<div id="myCount">") plus additional "div" elements and text that the script added. As you are working and changing script code, press F5 to refresh and get the current DOM view.

Opening F12 tools

F12 tools are available on any page you are viewing from within Internet Explorer 9 by pressing F12, or by clicking the tools button , and then selecting F12 tools. F12 tools opens in a separate window, but you can pin it to the page you're working with by clicking the pin button or pressing Ctrl+P. Note that the window cannot be pinned while debugging on the Script tab (Start debugging has been clicked).

If you do not need the complete tools interface, click the Minimize button or press Ctrl+M after the tools are pinned. The tools become a row at the bottom of the window, providing access to the Command Menu bar.

Navigating your webpage and code in F12 tools

The F12 tools are loosely broken into two areas, page and visual based tools, and code level or debugging tools.

The page and visual tools are accessed mostly by using the main menu or shortcut keys. These tools complete tasks such as creating reports of all the links in your document, or visually outlining a specific element on a page. For more information on using page and visual tools, menus, and buttons, see Getting Started with the F12 Developer Tools.

The code level tools are accessed through six dedicated tabs that provide HTML, CSS, and script debugging, as well as code profiling and network traffic capturing. The Console tab offers a way to receive and view messages that you can send from within your code using the console commands.

For more information, see the following topics:

Many of the tools and options in F12 tools are context sensitive, that is, your options change as you change tabs. There are features that work across all tools. The following tips and tricks will help you get started working with the tools.

Change attributes and variables

From most views in F12 tools, you can click attributes and variables to change the values, and type in a new value. In the CSS tab, you can toggle styles and rules by selecting or clearing check boxes.

Search for items

You can type a specific tag, ID, element, variable, or string into the Search box and press Enter to find that item within a webpage code or details (such as under an expanded list of properties on the script tab). All found items are highlighted in the current view, and searches can be done on all but the Console tab or console view on the Script tab.. For the Network tab, if you're in the Summary view, search opens the Details view and shows search results across all categories. In the Script tab, you can also search across all the script files being used for your page, not just the one being displayed.

When you have multiple hits, you can navigate between them by pressing Enter or Shift + Enter, or click the Next or Previous result buttons.

Select element by click

To make finding specific elements in a large DOM tree, you can select individual elements in the browser, and have them highlighted in the HTML tab of the F12 tools. From the F12 tools debugging window, click the Select Element by Click button , or press Ctrl + B to highlight elements on the webpage as you hover on the page. When you click a highlighted element, the HTML tab will open and scroll to the selected element in the code pane. In some situations, you might need to refresh the HTML tab to see the element.