Getting Started with the F12 Developer Tools
This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.
If you're not a webpage developer looking to test or debug your own content, here are some helpful links.
These links are good for any version of Windows Internet Explorer.
- What should you do about Internet Explorer script errors?
- Question: I cannot turn off the automatic script debugger under explorer options.
To close F12 tools, press F12 again, or click the X in the upper right corner of the F12 tools.
To get the Internet Explorer toolbar to stay visible, click Alt, click View, point to Toolbars and check Menu bar, and then click Lock the toolbars. You can also find more info in The menu bar and the toolbar are missing in Internet Explorer Knowledge base article.
The F12 tools menus and buttons provide page and visual tools to help you navigate the tool suite. Within the tools, you can create report lists of all the links in your document, change document modes, or visually outline a specific element on a page. This topic includes the following sections.
- Webpage tools
- File menu
- Find menu
- Disable menu
- View menu
- Images menu
- Cache menu
- Tools menu
- Validate menu
- Browser mode menu
- Document mode menu
- Related topics
Note F12 tools shares some shortcut keys with Internet Explorer. When you want to use a shortcut meant for F12 tools, than you need to make sure that F12 tools has focus. In other words, click inside F12 Developer tools, and then use the shortcut key.
Webpage tools
There are a number of tools and options under the main menus. Many of the tools within the F12 tools suite operate on the webpage or browser itself, or provide ways to get to options and features of the various code views. The following table outlines the menus and the options that the tools provide.
File menu
| Menu item | Description |
|---|---|
| Undo All | Resets all the changes, such as attribute values, made to the current instance of Internet Explorer and refreshes the webpage. |
| Customize Internet Explorer view source | Gives you a menu that has the following options for setting the View Source viewer:
|
| Online help (F1) | Provides a link to this documentation. |
| Exit (F12) | Closes F12 tools. |
Find menu
The Find menu has only one item, Select element by click. You can enable this feature from the menu item, by clicking the Select clement by click button .png)
or by pressing Ctrl+B. By enabling this feature, you can choose an element on a webpage by clicking the element on the page. After the element on the webpage is clicked, a border is drawn around the element. If the HTML tab is open, the left pane will scroll to highlight the selected element. The properties pane (right pane) displays the properties of the selected element, according to the current property type that you have chosen (Style, Trace Styles, Layout, or Attributes). If the HTML tab isn't currently open, using Select element by click selects the element and automatically switches focus back to the HTML tab. Select element by click is only enabled until you click an element.
Note To use Ctrl+B, you need to have focus inside F12 tools. If your webpage has focus, you will see the Organize Favorites dialog box.
.png)
Disable menu
This menu helps you test how users experience your site if they disable certain features in their browser. By using this menu, you toggle these features on and off.
| Menu item | Description |
|---|---|
| Script | Disables all scripts on a webpage. When selected, the command is set and the page refreshes. This command is not available if Internet Security has Protected Mode set to On. To use this command, clear Enable Protected Mode on the Security tab in Internet Options. |
| Popup Blocker | Disables all pop-up blockers so that pop-ups are allowed on this website. |
| CSS | Disables all Cascading Style Sheets (CSS) on the webpage. When selected, the command is set and the webpage refreshes with CSS turned off. If you refresh the webpage, or start debugging script (which refreshes the webpage), CSS will be re-enabled. |
View menu
This menu allows you to view information about elements on the page without first locating the item in the HTML tree or source.
| Menu item | Description |
|---|---|
| Class and ID Information (Ctrl+I) | Displays the class and ID values of all HTML elements on a webpage. Within the corresponding elements, information is displayed as overlays on the webpage. Double-click the overlay to highlight information. Press Ctrl+C to copy. |
| Link paths | Displays the link paths for all links on a webpage. The information is displayed as text overlays on the webpage elements.. Double-click the overlay to highlight information. Press Ctrl+C to copy. |
| Link report | Generates a list of all links found on this webpage, and reports it in a new Internet Explorer instance. This makes it easy and convenient to inspect all links without having to browse through the entire HTML source. |
| Tab indexes | Displays the tab indexes as numbers overlaid on the webpage for elements whose tabindex attribute is defined. |
| Access keys | Displays the access keys as overlays for elements on a webpage whose accesskey attribute is defined. |
| Source | A submenu of the view menu, descriptions shown in the following table. |
| Source submenu item | Description |
|---|---|
| Element Source with Style | Displays 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 HTML tree must be selected by using the HTML tab view before this command can be executed. To select an element, use the Select element by click command, or click an element in the HTML tree. |
| DOM (Element) | Displays just the selected element's HTML source and its content in a new window. An HTML element must be selected using the HTML tab view before this command can be executed. To select an element, use the Select element by click command. |
| DOM (Page) | Displays the full HTML source in a new window, showing element nesting. This source view shows the Document Object Model (DOM) structure of the page, including sources that are dynamically written to the DOM using scripts as represented by Internet Explorer. |
| Original | Displays the original HTML source in a new window. |
Images menu
This menu provides commands that can help you understand and debug page layout by helping you identify the size and position of elements. It also helps you to visually identify all elements of a certain type by color-coding based on element type.
| Menu item | Description |
|---|---|
| Disable images | Turns off rendering of all images on a webpage. This command causes the webpage to refresh without showing any images, and will also disable the Show Image File Sizes command. |
| Show image dimensions | Displays the dimension of an image as text overlays for all images found on a webpage. |
| Show image file sizes | Displays the file size of an image as text overlays for all images found on a webpage. The file size is reported in bytes. If the Disable Images command is used, this command is disabled. |
| Show image paths | Displays the absolute path of an image as overlays for all images found on a webpage. |
| View Alt text | Displays the alternative text for all images whose alt attribute is defined. For images whose alt attribute is not defined, no overlay appears. |
| View image report | Generates a list of all images defined in the body code on the current webpage, and displays it in a new Internet Explorer tab. This list does not include images that are loaded with CSS (such as "background-image:url()"). |
Cache menu
| Menu item | Description |
|---|---|
| Always Refresh from Server | Forces Internet Explorer to always acquire webpage content from the server rather than using cached content. This command persists until you clear it or the Internet Explorer instance is closed. |
| Clear Browser Cache... (Ctrl+R) | Deletes the browser cache and all temporary files. |
| Clear Browser Cache for this Domain... (Ctrl+B) | 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. |
| Clear Session Cookies | Deletes all cookies acquired during this browser session. |
| Clear Cookies for Domain | Deletes all cookies from the current 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 on how to work with cookies. |
Tools menu
This menu provides various tools that help you with common tasks, such as testing a site in different resolutions, changing the user agent string, measuring areas of the page, and capturing the specific color of a point on the page.
| Menu item | Description |
|---|---|
| Resize | Provides a sub menu with some predefined screen sizes offered, and an option to customize a screen size. After a predefined screen size is selected, the Internet Explorer window resizes immediately to the dimension selected. The sub menu provides four preset sizes (with shortcuts), and a custom setting.
800x600Ctrl+Shift+1
1024x768Ctrl+Shift+2
1280x768Ctrl+Shift+3
1280x1024Ctrl+Shift+4
Custom(no shortcut)
The custom setting brings up a dialog box where you can enter your own screen sizes to test. Custom entries remain after you close the browser, so you can use them again in future testing sessions. .png) |
| Change user agent string | Lets you change the user agent string that is sent to a website when you request a webpage. There are a set of preset user agent strings, and a custom option. The custom option shows a dialog box to enter your own string. After the custom items are saved, they appear on the Change user agent string submenu. Refresh the page for changes to appear. Be aware that changing the docmode will override custom User Agent settings. .png) |
| Clear entries on navigate | Lets you clear or persist 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 tab capture logs when you leave a page. |
| Show Ruler (Ctrl+L) | Allows you to measure any arbitrary objects on the screen. The Ruler dialog box opens with options and hints for using the tool. Multiple colors and rulers are supported. For precision, a magnifying glass is also available. Press CTRL+M to toggle the magnifier on or off. Rulers show the ("x,y") coordinates of each end of the ruler relative to where the points are on the screen, and the length is shown in pixels at the center of the ruler. The measurements also appear on the bottom of the Ruler dialog box when you move the cursor over a ruler. A ruler can be moved, resized, and 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. Close the dialog box to hide all rulers. Open the Ruler dialog box to show them. |
| Show Color Picker (Ctrl+K) | Shows a color picker tool to sample colors from any object on the page. The Color Picker dialog box shows the color sample that the picker is on. Color Picker also shows the color's RGB and HEX values. To see the color value used on a webpage, click the color of intertest with the eyedropper cursor. Click Copy and Close to copy the value to the clipboard for use in your webpage. Click the X button or Hide color picker on this menu to close the dialog box. .png) |
| Outline elements | 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. For more information about using selectors, see Understanding CSS Selectors. .png) |
Validate menu
This lets you validate the current webpage or a file on your computer by using validation services on the web. A dialog box confirms that you want to take this action; otherwise, the request is canceled.
| Menu item | Description |
|---|---|
| HTML | Validates the HTML of the current webpage. The validated report appears in a new window. |
| CSS | Validates the CSS of the current webpage. The validated report appears in a new window. |
| Feed | Validates the Really Simple Syndication (RSS) feeds of a webpage. The validated report appears in a new window. |
| Links | Validates all links in the current webpage. The validated report appears in a new window. |
| Local HTML... | Opens a new window with the option to choose an HTML file on your computer to be validated. |
| Local CSS... | Opens a new window with the option to choose a CSS file on your local computer to be validated. |
| Accessibility | Gives access to the following accessibility validators:
WCAG ChecklistThe W3C's Web Content Accessibility Guidelines (WCAG). It defines guidelines for creating accessible webpages.
Section 508 Checklist The US government's accessibility guidelines for creating accessible webpages.
|
| Multiple validations | Lets you run one or more validations in a single request. Select the validation you want, and click OK to initiate the request. You will get only one dialog box confirming that you want to send this page to another site to do the validation. Each selection opens in a new tab and contains the resulting validation. .png) |
Browser mode menu
This command allows you to test how your webpage operates for users running other versions of Internet Explorer. For example, if you choose Windows Internet Explorer 7 browser mode, your webpages will be rendered based on that browser, and will be unable to access docmodes that are only available on later versions of Internet Explorer.
| Menu item | Description |
|---|---|
| Internet Explorer 7 | Internet Explorer 7 browser mode. |
| Windows Internet Explorer 8 | Internet Explorer 8 browser mode. |
| Windows Internet Explorer 9 | Internet Explorer 9 browser mode. This enables HTML5, CSS3, and other standards that Internet Explorer 9 supports. |
| Internet Explorer 9 compatibility view | Tests how Internet Explorer 9 users experience your webpage if they choose the Compatibility View option. |
Document mode menu
This command allows you to test how your page is interpreted in other versions of Internet Explorer. Changes made to webpages affect all documents in the page, including iframes.
| Menu item | Description |
|---|---|
| Quirks mode (Alt+Q) | This behavior matches that of Internet Explorer when rendering a document with no document type or a Quirks document type. Acts the same as the Quirks mode of Internet Explorer 7 or Internet Explorer 8. |
| Internet Explorer 7 Standards (Alt+7) | This behavior matches that of Internet Explorer 7, rendering a document that has a strict or unknown document type. |
| Internet Explorer 8 Standards (Alt+8) | This is the most standards-compliant behavior available in Internet Explorer 8 when rendering a document that has a strict or unknown document type. |
| Internet Explorer 9 Standards (Alt+9) | This is the most standards-compliant behavior available in Internet Explorer 9. |