Navigating the F12 Developer Tools Interface

  • Article

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:

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

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:

Main user interface for the Developer Tools

Element name Description
Menu bar Lists command menus that can be accessed at any time regardless of the selected View. The Menu bar persists on the screen even when the F12 tools interface is pinned to the Windows Internet Explorer window.
Views Provides a list of views to select for your page. Selecting a view, such as HTML or CSS tab also changes the toolbar for this selected tab.
View toolbar Provides commands and tools that are specific to the current view.
Main view pane The left pane is the main view for all views. It displays views of your page's HTML source code, Cascading Style Sheets (CSS), console messages, script source, profile or network reports.
Details pane This pane displays details for the current tab (HTML, CSS, Script, and Network views). Depending on the current view, the divider between the two panes can be moved to resize each pane. For Console and Profiler tools, there are no separate detail panes.
Detail views Depending on the current tab, you can select the type of details to see.
File chooser When in Script view, this button displays a drop-down list of all files and dynamic scripts associated with the page. When in CSS view, it displays only the CSS files.

 

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.

Command name Description
Undo all Resets all the changes made to the current instance of Windows Internet Explorer and refreshes the webpage.
Customize Internet Explorer view source Lets you change the source viewer to use when you click View Source :
  • Default viewer: Use the built-in color-coded syntax viewer.
  • Notepad: Use Notepad as the viewer.
  • Other: Choose another program installed on your computer to be the viewer.
Online Help F1 Displays this article.
Exit F12 Closes this instance of F12 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 Picture of the select element by click button available in any view.

Command name Description
Select element by click (Ctrl+B)

Selects an element when you click it. A border is drawn around the element on the webpage, and the left pane switches focus to the HTML tab, and scrolls to bring the highlighted element into view. The right pane shows details of the selected element, based on the current detail view (such as Watch or Local variables, Call stack, or Breakpoints).

Screen shot showing results after element is selected

 

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).

Command name Description
Script Turns off all scripts on a webpage. When this setting is selected or cleared, it reloads the page to reflect the current setting. This setting can only be changed if Protected Mode is turned off.
Pop-up Blocker Disables all pop-up blockers so that pop-ups are allowed on this website. This setting is not available if Internet Security has Protected Mode set to On. To activate this command, set Protected Mode to Off.
CSS Turns off all CSS used on the page. When this setting is selected or cleared, it reloads the page to reflect the current setting. When the page is refreshed in the browser, the setting is cleared and CSS is turned on.

 

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.

Command name Description
Class and ID information (Ctrl+I) Displays the class and id values for all HTML elements on a webpage.
Link paths Displays the link paths for all links on a webpage.
Link report Generates a list of all links found on this webpage, and reports it in a tab or window.
Tab indexes Displays the tab indexes for elements on a webpage whose tabindex attribute is defined.
Access keys Displays the access keys for elements on a webpage whose accesskey attribute is defined.
Source Displays the Source submenu that is described next.

 

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.

Command name Description
Element source with style Displays only the selected element's HTML source, content, and CSS style rules in a new window.
DOM (element) Ctrl+T Displays only the selected element's HTML source and its content in a new window.
DOM (page) Ctrl+Shift+G Displays the full HTML source in a new window, showing element nesting. This view shows the full Document Object Model (DOM) structure of the page, including sources that are dynamically written to the DOM by scripts. This is the DOM as represented by Internet Explorer.
Original Displays the original HTML source in a new window. This is equivalent to performing a View Source on a webpage in Internet Explorer. Dynamic content written to the DOM using scripts are not shown.

 

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.

Picture with image properties displayed as an overlay

Command name Description
Disable images Disables rendering of all images on a webpage. This command causes the webpage to refresh without showing any images, and also disables the Show image file sizes command. This setting can only be changed if Protected Mode is turned off.
Show image dimensions Displays the dimension of all images found on a webpage.
Show image file sizes Displays the file size of all images found on a webpage. The file size is reported in bytes. Turning off images with Disable images also disables this command.
Show image paths Displays the absolute path of all images found on a webpage.
View Alt text Displays the alt text for all images whose alt attribute is defined.
View image report Generates a list of all images defined on this page, and displays it in a new Internet Explorer instance.

 

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.

Command name Description
Always refresh from server Forces Internet Explorer to always download webpage content from the server rather than using cached content. This command persists until you clear it or the Internet Explorer instance is closed. This setting can only be changed if Protected Mode is turned off.
Clear browser cache... (Ctrl+R) Deletes the browser cache and all temporary files.
Clear browser cache for this domain... (Ctrl+D) Deletes only the browser cache and all temporary files that belong to the current domain.
Disable cookies Disables the use of all cookies from this Internet Explorer instance. This command persists until you clear it or the Internet Explorer instance is closed. This setting can only be changed if Protected Mode is turned off.
Clear session cookies Deletes all cookies acquired during this browser session.
Clear cookies for domain Deletes all cookies from this domain.
View cookie information Generates a list of all cookies stored in Internet Explorer, and reports it in a new Internet Explorer instance. See the cookie property reference for information about working with cookies.

 

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.

Command name Description
Resize

Provides a submenu with a list of predefined screen sizes, and a custom size option. When you pick a predefined screen size, the Internet Explorer window resizes to the new dimensions immediately. Preset screen sizes can be selected by using the shortcut keys shown in the submenu. You can create your own custom screen sizes. To Add a custom screen size, do the following:

  1. Click Tools, click Resize, and then click Custom to open the Resize Browser dialog box.
  2. Type the Width and Height you want, and click Add . This adds your custom screen size to the list.
  3. To remove a custom size, select it in the list, and then click Delete.

Picture of Resize Browser dialog box

To use a custom size, open the Resize Browser dialog box, click a size, and then click Resize. The list of custom sizes persists across browser sessions until you delete them. New screen sizes aren't available to browser sessions that are already open when you add the custom size. Click Close or press ESC to close the Resize Browser dialog box.
Change user agent string

Lets you change the way Internet Explorer appears to a website by changing the user agent string (UA). A submenu lists versions of Internet Explorer on the PC and Windows Phone, as well as several other brands of browsers. The custom setting lets you add and set your own UA strings. The friendly name is shown on the list of available UA strings. The Default setting returns the browser to its current default setting.

Picture of Custom User AgentStrings dialog box
Clear entries on navigate

Lets you keep or clear console messages and the Network tab log when you navigate to a new webpage in a debugging session. By default, Internet Explorer clears all console messages, and the Network view capture logs when you leave a page.
Show ruler (Ctrl+L)

Lets you to measure objects on the screen. The command opens the Ruler dialog box with options and hints for using the tool. Multiple colors and rulers are supported. For better precision, press CTRL+M to toggle a magnifier on or off. After a ruler is drawn, it shows the (x-y) coordinates of each end of the ruler relative to where the points are on the screen. The ruler length is shown at the center of the ruler in pixels. This information is also shown at the bottom of the Ruler dialog box when you hover over a defined ruler. A ruler can be moved, resized, or re-angled. To remove a ruler, select it and press the Delete key. When done, click the X button at the upper-right corner to close the dialog box. When the dialog box is closed, all rulers are hidden. They reappear when you reopen the Ruler dialog box.
Show color picker (Ctrl+K)

The color picker tool can sample colors from any object on the page. The Color Picker dialog box shows the color sample, and the color's RGB and HEX values, that the picker is on. To see a color value used on a webpage, click the color of interest with the eyedropper cursor. To pick a different color sample, click the eyedropper icon on the dialog box and repeat the previous step. Click Copy and close to copy the HEX value to the clipboard for use in your webpage. Click the X button or Hide color picker on the Tools menu to close the dialog box.

Picture of F12 color picker dialog box
Outline Elements (Ctrl+O)

Helps you understand and debug page layout by making it easy to identify the size and position of elements. You can set a color to identify all elements of a certain element type. Use CSS selector syntax to specify elements on a webpage. For example, to highlight all paragraphs, use p in the selector field, and set a color. Elements are outlined after you close the dialog box. For more info about using selectors, see Understanding CSS Selectors.

Picture of outline elements dialog box

 

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.

Command name Description
HTML

Validates the HTML of the current webpage.
CSS

Validates the CSS of the current webpage.
Feed

Validates Really Simple Syndication (RSS)feeds.
Links

Validates all links in the current webpage.
Local HTML...

Opens a new window with the option to enter a URL, choose a local HTML file, or paste in code to be validated.
Local CSS...

Opens a new window with the option to enter a URL, choose a local CSS file, or paste in code to be validated.
Accessibility

Validates the current webpage using one of the following accessibility validation services:

  • WCAG Checklist is the World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG). It defines guidelines for creating accessible webpages.
  • Section 508 Checklist is the US government's accessibility guidelines for creating accessible webpages.
Multiple validations...

You can run one or more validation checks in a single request. Select the type of validation you want, and then click OK to start the request. You'll only get one confirmation dialog box regardless of how many validations are selected. Each selection opens in a new tab and contains the resulting validation report.

Picture of the Validate Set dialog box with multiple validations selected to run

 

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.

Command name Description
Internet Explorer 10 Use this mode if you want to test how Internet Explorer 10 users experience your website. This enables HTML5, CSS3, and other standards Internet Explorer 10 supports.
Internet Explorer 10 Compatibility View Tests how Internet Explorer 10 users experience your webpage if they choose the Compatibility View option on the address bar.
Internet Explorer 9 Internet Explorer 9 browser mode. This enables HTML5, CSS3, and other standards that Internet Explorer 9 supports.
Internet Explorer 8 Use this mode if you want to test how Internet Explorer 8 users experience your website.
Windows Internet Explorer 7 Use this mode if you want to test how Internet Explorer 7 users experience your website.

 

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.

Command name Description
Standards (Alt+S) .This is the most standards-compliant behavior available in Internet Explorer 10.
Quirks (Alt+Q) This behavior provides enhanced HTML5 support in an interoperable Quirks mode based on the behavior defined in the HTML5 standard. This HTML5-based quirks mode is the default Quirks mode in Internet Explorer 10. For more info, see Interoperable HTML5 Quirks Mode in IE10
Internet Explorer 9 standards (Alt+9) This is the most standards-compliant behavior available in Internet Explorer 9.
Internet Explorer 8 standards (Alt+8) This is the most standards-compliant behavior available in Internet Explorer 8, and is the mode used by default in Internet Explorer 8 when rendering a document with a strict or unknown document type.
Internet Explorer 7 standards (Alt+7) This behavior matches that of Internet Explorer 7 rendering a document with a strict or unknown document type.
Internet Explorer 5 quirks (Alt+U) This behavior matches that of Internet Explorer when rendering a document with no document type or a Quirks document type. It is similar to the behavior of Microsoft Internet Explorer 5 and the Quirks mode behavior of Microsoft Internet Explorer 6, and is the same as the Quirks mode of Internet Explorer 7.

 

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.

HTML view toolbar

Command name Description
Select element by click (Ctrl+B) Select element with click button 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 browser cache button 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) Save button 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 button 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) Element source with style 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 button 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) Word wrap button 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.

Detail view Description
Style The Style view shows how CSS rules, properties, and values are applied to the selected element. Click or clear the check box to the left of each rule to turn it on or off. This can help you see how rules affect the element and page, or let you experiment with different combinations. The rules for an element are shown in cascading order so that the last rule on the list is currently being applied. Previous rules or rules higher on the list are struck out to show that they have been overridden. The rules are grouped by defined style rules.
Trace Styles The Trace Styles view shows the same information as the Style view, except it is grouped by properties rather than elements. Expanding the property shows a list of style rules that have this property defined.
Layout The Layout view shows the attributes of the element's box model. This view shows how the element flows in relation to the objects around it. For more info about the box model, see the W3C's box model discussion.
Attributes The Attributes view shows all the attributes and values for the currently selected element.

 

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:

Buttons in Mode Specific Toolbar for CSS tab

Command Name Description
Select element by click (Ctrl+B) Select element with click button 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 browser cache button Clear the browser cache to get fresh page content from the server at next refresh.
Save CSS (Ctrl+S) Save button 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) Select element with click button

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 browser cache button 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.

Buttons in Mode Specific Toolbar for Script tab

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

Command name Description
Select element by click (Ctrl+B) Select element with click button 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 browser cache button Clear the browser cache to get fresh page content from the server at the next refresh.
Continue (F5) 'continue' button Continues running script without pausing, until another breakpoint or script error is hit.
Break All (Ctrl + Shift + B) 'Break All' button Pauses execution immediately before the next script statement is to be executed.
Step Into (F11) 'Step Into' button Executes the next line of script and pauses, even if the next line is inside a new function.
Step Over (F10) Step Over button Continues until the next line of script in the current function, and then pauses. Useful for stepping over function calls.
Step Out (Shift + F11) Step Out button 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) Configuration button

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 The Breakpoint icon 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) Select element with click button

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 browser cache button

Clears the browser cache to get fresh page content from the server at next refresh.
Export Data Save button 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) Select element with click button

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 browser cache button

Clear the browser cache to get fresh page content from the server at next refresh.
Export Captured traffic Save button

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

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 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 The unpin buttonto 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 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.

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