Navigating the F12 Developer Tools Interface

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

If you're looking for the Tools menu or toolbars in Internet Explorer 11, try:

• "The menu bar and the toolbar are missing in Internet Explorer."

If you got here by clicking an error message and simply want to avoid error messages in the future, try:

• What should you do about Internet Explorer script errors?
• Question: I cannot turn off the automatic script debugger under explorer options.

This is a quick reference to the tools, commands, and menus available in F12 tools, built into Internet Explorer 10. Each element of the interface is identified and has a short description of what it does. For more information about using the Developer tools in Windows Internet Explorer 8, see Developer Tools User Interface Reference. For more on using F12 tools in Windows Internet Explorer 9, see How to use F12 Developer Tools to Debug your Webpages.

• The F12 tools screen
• The Menu bar
  • The File menu
  • The Find menu
  • The Disable menu
  • The View menu
  • The Images menu
  • The Cache menu
  • The Tools menu
  • The Validate menu
  • The Browser Mode menu
  • The Document Mode menu
• The F12 tools view panes and tabs
  • The HTML tab
  • The CSS tab
  • The Console tab
  • Script tab
  • The Profiler view
  • The Network tab
• Search
• Window controls
• Related topics

The F12 tools screen

F12 tools provide a set of tools that you can use to design, debug, or view webpage source code and behavior. F12 tools can be opened in a separate window or pinned to the bottom of the webpage that you're debugging. The tools range from a simple color picker to a full-featured script debugger for a debugging environment that's much like standalone development tools. The Profiler and Network capture tools can help you track down performance problems in your code or on the network. Each page you open in your browser can have its own F12 tools session, making it easy to work on multiple webpages at the same time. The Script debugger supports static and dynamic scripts for seamless debugging with HTML5 Web Workers threads.

To open F12 tools, press "F12" from the webpage you want to debug or inspect. To close F12 tools, press "F12" again.

This image shows a typical view of the main tools UI:

The Menu bar

The following sections describe the details of each Menu item.

Note  Some submenu settings can only be changed if Internet Explorer Protected Mode is turned off. If you make changes to these settings, such as Disable scripts, and then turn Protected Mode on, you won't be able to make changes until Protected Mode is turned off again. To turn off Protected Mode, follow these steps:

1. In Internet Explorer, click Tools, and then click Internet options.
2. Click Security, and then clear the Enable Protected Mode check box.
3. Click OK, and then close and restart Internet Explorer.

• The File menu
• The Find menu
• The Disable menu
• The View menu
• The Images menu
• The Cache menu
• The Tools menu
• The Validate menu
• The Browser Mode menu
• The Document Mode menu

The File menu

On the File menu you can undo changes, choose your source viewer, view a Help link (this article), and close the tools.

The Find menu

On the Find menu, you can choose the "Select element by click" command from a menu. A faster way to do the same thing is to use the Select Element by click button available in any view.

The Disable menu

These tools help you test how users experience your site based on their browser configuration. These commands toggle the features on and off (click to disable, and click again to enable).

The View menu

The View menu contains settings that put information about elements, such as class and id attributes, visually on the page. Class and ID, link path, tab indexes, and access key information are shown as text label overlays on the webpage. Double-click a label to select the text, right-click and select Copy, or press Ctrl+C to copy the text to the clipboard.

The Source submenu

The Source submenu provides access to various source views of a document. When selected, the requested source is displayed in a new window. To get the Element source with style and DOM (element) options, select an HTML element first. You can use the Select element by click command, or click an element in the HTML tree.

The Images menu

This menu provides information about images on a webpage. The options that show image dimensions, file size, paths, or alt text are shown as text label overlays on the webpage. You can double-click a label to select, and then right-click or press Ctrl+C to copy the text. The following shows an image with all information displayed.

The Cache menu

These settings can help ensure your pages load into the browser as they exist on the server, and not from a local cached copy. This is helpful when you're regularly changing the source or testing the server response.

The Tools menu

These settings provide tools that help you with common tasks. You can do things such as test a page in different resolutions, measure elements on the page, and capture the specific color of a point on the page.

The Validate menu

This tool validates the current webpage or file using web-based validation services. You get a confirmation dialog box before sending your current page to the web, letting you cancel without sending. Validation reports open in a new window so you don't lose the page you're debugging.

The local HTML and CSS options open the validation website where you can manually enter a URL, browse for a local file, or paste in some code to validate.

The Browser Mode menu

The Browser Mode menu allows you to test how your page appears and behaves for users running Internet Explorer 10 and earlier versions of Internet Explorer.

When you first load a webpage, F12 tools determines the default Browser Mode and selects the appropriate mode. A check mark appears next to the current mode of the document. Changing the mode causes the webpage to refresh. The page remains in this mode until another mode is chosen or you close the browser. For more info, see Testing Browser and Document Compatibility Modes with the Developer Tools, and IE10 Compat Inspector on the Internet Explorer blog.

The Document Mode menu

With this tool you can modify the document mode of the current page without modifying the DOCTYPE or META tag in the source.

When you first load a webpage, F12 tools determines the default Document Mode and selects the appropriate mode. The text Page default in parentheses indicates the default mode of the webpage. A check mark appears next to the current mode of the document. Changing the mode causes the webpage to refresh, and remains in this mode until another mode is chosen or the browser is closed. For more info, see the article on Testing Browser and Document Compatibility Modes with the Developer Tools.

The F12 tools view panes and tabs

The primary pane (left side) and details pane (right side) provide views of HTML, CSS, or Script source, or status and reports for the console, profiler, and network views. In HTML view you can edit the source in the left pane. You can resize the viewable area of the left and right pane by moving the divider bar between the two views.

When the view changes, so does the toolbar and the details view. The following tables describe the views, details, and toolbars you can use.

• The HTML tab
• The CSS tab
• The Console tab
• Script tab
• The Profiler view
• The Network tab

The HTML tab

The HTML tab lets you to inspect your document sources and to make changes to test their effect. These changes can then be saved into a text file that can be used to incorporate new or modified material into the main site.

This view contains the DOM structure of the HTML tree for the current document. When a page first loads, or the Refresh button is clicked, the tree view is collapsed. This view can be expanded or collapsed by clicking the plus (+) sign by an element or node. You can use the tree structure to drill down to the element you want to inspect, or use Select element by click to find the element within the document for you. You can click on any attribute name or value to edit it directly. When you click an element, the properties associated with it show in the right pane.

The HTML tab toolbar

This toolbar provides commands you can use in the HTML tab.

Command name	Description
Select element by click (Ctrl+B)	Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The element is outlined on the webpage, and the element's source is highlighted in the left pane. The details view shows style, trace style, layout, or attribute information about the selected element. This button is available on all views.
Clear browser cache... (Ctrl+R)	Clear the browser cache to get fresh page content from the server at next refresh. This button is available on all views.
Save HTML (Ctrl+S)	Opens the Save As dialog box to save the source displayed in the HTML view. The file is saved in a .txt file format to prevent writing over the original source file.
Refresh (F5)	Refresh the content in the HTML view to its default state. The Refresh button has no effect when Edit mode is on.
Element source with style (Ctrl+T)	Displays a new window with the selected element's HTML source and CSS styles with nested element structure. Before using this command, select an element in the body of the document either from the HTML view, or using Select element by click. This is a shortcut to the same command found in the View/Source command menu.
Edit (Alt+E)	Edit the current HTML file in the HTML view. This source is the internal representation that Internet Explorer uses to render the page. To wrap long lines of text, click Word Wrap. To see the results of your changes, click the edit button again. This switches out of the Edit mode and refreshes the page to reflect any new changes.
Word Wrap (Alt+W)	Wraps long lines within the HTML view when you're in Edit mode. Otherwise, this command is disabled.

The HTML details view

The details view shows information about elements selected in the HTML view.

The CSS tab

The CSS tab shows the content of the currently selected style sheet and helps you see the effect style sheets have on a webpage especially with multiple style sheets where rules can overlap. Use the View styles drop-down list to switch between style sheets. You can change styles in the CSS view and save them to a text file using the Save CSS button.

The check boxes let you to enable and disable specific properties or entire rules. When the style rule's check box is checked, all properties of that rule are enabled. When cleared, the all properties of that rule are disabled. Each property also has its own check box to turn that property on or off. Click a property name or value to edit it. Press "Enter" to accept and apply changes immediately.

Note  For numeric properties, you can click the value and use the up and down arrow keys to change the value like a spin control.

The CSS view

The CSS tab toolbar

In the CSS tab, the toolbar changes to provide these commands:

Command Name	Description
Select element by click (Ctrl+B)	Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source. The details view shows style, trace style, layout, or attribute information about the selected element.
Clear browser Cache... (Ctrl+R)	Clear the browser cache to get fresh page content from the server at next refresh.
Save CSS (Ctrl+S)	Opens the Save As dialog box to save the source displayed in the CSS view. The file is saved in a .txt file format to prevent over writing the original source file.
View styles	Opens a drop-down list to switch between all external style sheet files that are associated with the current webpage.

The Console tab

The F12 tools console tab offers a full width view of the same information you see in Script view, where you see the Console view in the right pane. You can receive error messages from Internet Explorer, as well as send your own messages back from your code without having to break the flow of your execution.

You can also use the F12 toolsConsole view to immediately run script statements outside your program code.

Command name	Description
Select element by click (Ctrl+B)	Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source. The details pain displays Style, Trace Styles, Layout, or Attribute information about the selected element.
Clear browser Cache... (Ctrl+R)	Clear the browser cache to get fresh page content from the server at the next refresh.

For more info about using the Console view and APIs, see Using the F12 Tools Console to View Errors and Status. For a list of Console view errors, see F12 tools console error messages.

Script tab

The Script tab lets you see and interact with the JavaScript source on the webpage . Click the View sources drop-down button to pick other script files. Script view shows line numbers and syntax coloring. Click the left margin or a line number to set or clear breakpoints. You can select text in this pane, and right click for a context menu that offers additional commands. For more info, see Using F12 Developer Tools to Debug JavaScript Errors.

The Script tab toolbar

The following image shows the toolbar command icons.

The following table describes each of the preceding commands in more detail.

Command name	Description
Select element by click (Ctrl+B)	Lets you quickly find the source for an element on the current webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source. The details pain displays Style, Trace Styles, Layout, or Attribute information about the selected element.
Clear browser Cache... (Ctrl+R)	Clear the browser cache to get fresh page content from the server at the next refresh.
Continue (F5)	Continues running script without pausing, until another breakpoint or script error is hit.
Break All (Ctrl + Shift + B)	Pauses execution immediately before the next script statement is to be executed.
Step Into (F11)	Executes the next line of script and pauses, even if the next line is inside a new function.
Step Over (F10)	Continues until the next line of script in the current function, and then pauses. Useful for stepping over function calls.
Step Out (Shift + F11)	Continues executing script until the next line in the calling function . This command is helpful to return to the point where the current function was called.
Configuration (Ctrl + Alt + 0)	Displays a drop-down list of the following settings: Break on uncaught exception (Ctrl+Shift+E) - Breaks if the script throws an exception that isn't within a try/catch structure. Break on caught exception - Breaks execution if a script throws an exception that is within a try/catch structure. Continue after exception - Effectively ignores an exception and continues to the next line in the current scope, rather than stopping. Word wrap Alt+W - wraps long lines of source code to the width of the left pane. Format JavaScript - breaks up javascript code that has had unnecessary characters removed (minified) into a more readable format.
Start debugging	Click button to start debugging. Click again to stop debugging. The debugger control is enabled after Start debugging is clicked and disabled after debugging has stopped. If F12 tools is pinned to the browser window, it opens in its own window when debugging starts. When you stop debugging, you must re-pin F12 tools manually.
Script Chooser	Click to display a list of external scripts associated with this webpage to show in the Script view pane.

The Script details pane

The details pane in theScript view displays information about the code in the left pane. Click to choose one of the detailed views that include console and error messages, local variables, watch variables, function call stack, and the list of breakpoints.

Command Name	Description
Console	The console receives error messages from Internet Explorer. Using the console API, your code can send messages to the console without having to break the flow of your execution. This is less intrusive than using the traditional alert() method or printing to the screen. The Console command line can run single and multi-line script statements outside your program code. Statements are executed immediately and results appear in the Console's pane. For more info about the console, see Using the F12 Tools Console to View Errors and Status.
Watch	View variables from any scope. To add local or global variables and objects, do one of the following: In the right pane, click the Click to add line and type a variable or object name. Right-click a variable or object in the left pane and choose Add watch. This command requires that the debugger be started and execution be stopped at a breakpoint.
Locals	When the debugger is running and execution stops at a breakpoint, you can view local variables within the scope of the current function. If you step into another function, the local variable view reflects the new current function.
Call stack	Trace the flow of function calls made by executing code. The current function is on top and the function that calls it is below it in the stack. You can double-click a function to go to that function definition in the source. This command requires the debugger to be started and execution be stopped at a breakpoint.
Breakpoints	Set breakpoints to stop execution at this point of the script in order to inspect the code. From the Script view pane, you can set breakpoints by doing one of the following: Right-click a line of code and choose Insert breakpoint. Click the line number. Position the cursor on a line of code and press F9. Breakpoints can be set at any time. When a breakpoint is set, the line of code is highlighted and an icon appears next to the line number. You can also set a conditional breakpoint that stops execution when the condition is true, such as when an exception happens or a variable exceeds a specified value. To set a condition to a breakpoint, right-click a breakpoint in either the left or right pane, and select Condition. From the Breakpoints pane, you can view a list of all the breakpoints set that are related to the webpage or site you're debugging. You can double-click a breakpoint item to go to that breakpoint in the code. Right-click the pane for a context menu with more options. For more info, see Using the F12 Developer Tools to Debug JavaScript Errors.

The Profiler view

F12 tools provides a built-in script profiler that lets you to profile your running JavaScript code in Internet Explorer.

The Current view controls how profiled information is presented. Right-click anywhere in the viewable area, choose Add / Remove columns, and then click the column names you want in the report (any names preceded by a check mark should already be visible in the report list). Click the title of a column to sort the report based on that column. You can double-click an entry to open the Script view and display the code where this item is defined.

The Profiler view toolbar

The profiler toolbar lets you change views, export data, start and stop profiling, and view profiling reports.

Command name	Description
Select element by click (Ctrl+B)	Use this command to quickly find an element on a webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source.
Clear browser Cache... (Ctrl+R)	Clears the browser cache to get fresh page content from the server at next refresh.
Export Data	Save the profile data of the current report to a CSV file. Type the name of the file in the Save As dialog box that appears. Click Save to export the profile data to the file.
Start profiling	Click this button to start collecting profile information. When the profiler is started, click the activities you want to profile on your webpage. These script activities are collected and presented to you in a Report. Click the Stop Profiling button to stop profiling and view the report. The session is logged into a report and the information displayed. Repeat this process to record another profiling session.
Current view	Set the current view of the profile report. You can view profile report using either the Functions or Call Tree views. Functions lists all the functions used during the profiling session. Call Tree shows a hierarchy of calls during the profiling session. In both views, profile data is presented in different columns in the Primary Content Pane. To add or remove columns, right-click anywhere in the pane and select Add / Remove Columns from the shortcut menu. To sort the report on a particular column, click the column header or select the column from the Sort By menu item in the shortcut menu. To rearrange the columns, drag column headers.
Current report	Each recorded profile session creates a numbered Report. Click the Report drop-down list to switch between reports. Click Export Data to export the data to a CSV format file.
Close report	Closes the current report. The closed report is removed from the report list. The next report on the list becomes the current report. .

For more info about using the Profiler, see Using the Profiler Tool to analyze the performance of your code.

The Network tab

The Network tab can help you diagnose network-related issues by showing all the traffic that is related to a page and exposing details about individual connections. You can see the relative timing that each item on a webpage takes to load and render, so you can quickly see and solve problems.

Command name	Description
Select element by click (Ctrl+B)	Use this command to quickly find an element on a webpage. Click this button and then click the element on the webpage. The left pane switches to the HTML view, and highlights the element source.
Clear browser Cache... (Ctrl+R)	Clear the browser cache to get fresh page content from the server at next refresh.
Export Captured traffic	The Save button lets you save the network capture log to an XML or comma delimited (.CSV) file for further analysis in a spreadsheet or database.
Start/Stop capturing	Click to record network traffic. Click again to stop recording and view the report that is generated.
Go to detailed view / Back to summary view	The summary view (default) shows all network activity recorded. Click button to change to the detailed view, which drills down on a single URL. When in detailed view, the next and preview buttons appear to the right of this button, and let you page through the details of each URL in the report.
Clear	Click to remove all recorded data from the report.

For more info about the Network view, see Using Internet Explorer Developer Tools Network Capture

Search

The Search box provides a way to quickly find specific text in the currently open file or report. Search is context-sensitive and what it can find is based on the currently selected view. For example, in the HTML view, the Search box displays the message "Search HTML" and searches in the HTML view. Likewise, in the CSS view, the box shows "Search CSS" and finds text in the CSS view.

Search highlights all matching words and next and previous buttons let you navigate the matches. As you traverse the list of matches, the current match is highlighted and brought into view.

In the HTML view, you can use W3C Selectors API syntax to search for specific elements. For example, use the keyword "@div" to find all the div elements in the page. You can search for CSS class names by "@.myClassName" to find all elements defined as "myClassName" . You can also narrow your search down by element. For example, "@div.myClassName" only finds div elements with "myClassName" defined. Search terms are case sensitive when searching for selector class names. For more info about CSS selectors read Understanding CSS Selectors.

For all other views, such as the CSS view, use regular text keywords. Search is not case sensitive in this case.

Window controls

Each Internet Explorer instance has its own instance of F12 tools. When working with multiple webpages, use the Pin feature to attach each instance of F12 tools to its associated Internet Explorer instance. When script debugging starts, F12 tools opens in a separate window.

The F12 tools window offers the normal Minimize, Maximize, Restore, and Close window controls, as well as additional pinning controls.

• Click the Pin button to attach the F12 tools interface to the Internet Explorer session that opened it. This is useful when multiple instances of F12 tools are opened. However, when debugging is started in Script view, F12 tools always opens in its own window.
• Click the Unpin button to detach F12 tools from the Internet Explorer instance.

To resize a pinned F12 tools session, stretch the upper edge of the window to size. Click the Minimize button or press Ctrl+M to minimize the pinned F12 tools session. In a minimized state, F12 tools remains attached to the window and only the Menu Bar is visible.

Related topics

How to use F12 Developer Tools to Debug your Webpages

Testing Browser and Document Compatibility Modes with the Developer Tools

Developer Tools Keyboard Shortcuts Reference