Discovering Windows Internet Explorer Developer Tools
This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.
Every installation of Windows Internet Explorer 8 comes with the Developer Tools. This tool enables Web site developers to quickly debug Microsoft JScript, investigate a behavior specific to Windows Internet Explorer, or iterate rapidly to prototype a new design or try solutions to a problem on-the-fly. This article introduces you to key features of the Developer Tools in Internet Explorer 8. For F12 tools in Windows Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
- Introduction
- Getting Started
- Debugging HTML and CSS
- Inspecting HTML Elements
- Inspecting CSS Properties
- Editing Sources On-The-Fly
- Saving Changes
- Debugging JavaScript
- Starting and Stopping the Debugger
- Controlling Execution
- Inspecting Variables
- Inspecting Call Stack
- Using the Debugger Console
- Profiling JavaScript Performance
- Starting and Stopping Profiler
- Viewing Data
- Profiling Multiple Sessions and Exporting Data
- Searching for Content
- Viewing Sources
- Outlining Elements on Screen
- Working with Images
- Controlling Cache and Cookies
- Using Power Tools
- Validating Your Sources
- Testing in Different Browser and Document Modes
- Testing Browser Modes
- Testing Document Modes
- Using Keyboard Shortcuts
- Referencing Interface Commands
- Related topics
Introduction
Great tools play a critical role in developer productivity, and while many web development tools exist, they likely don't meet your needs in all tasks. For example, you may want to quickly debug JScript, investigate a behavior specific to Internet Explorer, or iterate rapidly to prototype a new design or try solutions to a problem. In order to improve developer productivity in these and similar scenarios, Internet Explorer 8 includes powerful, yet easy-to-use tools that have a few important characteristics:
- Integrated and simple to use: An instance of the Developer Tools comes with every installation of Internet Explorer 8. This enables debugging on any machine running Internet Explorer 8. In addition, the tools only load when needed to limit the impact of the tools on browser performance. Using the Developer Tools, you can do on-the-fly script debugging for only the current Internet Explorer process rather than enabling debugging for all of Internet Explorer.
- Provide a visual interface to the platform: Instead of reverse engineering how your site works or modifying your site to output debug information, the Developer Tools let you look into Internet Explorer to view its representation of your site. This reduces the time you spend debugging dynamic sites where source inspection isn't useful or investigating a behavior specific to Internet Explorer where a generic authoring tool cannot help.
- Enable fast experimentation: When prototyping a new design or testing fixes in previous versions of Internet Explorer, you likely edit your source, save it, refresh your page in the browser, and repeat. The Internet Explorer 8 Developer Tools streamline this scenario by letting you edit your site within the browser and see changes take effect immediately.
- Optimize application performance: Identifying and fixing performance issues is usually an iterative approach done by focusing on one scenario at a time. With the Internet Explorer 8 Developer Tools script Profiler, you can collect statistics like execution time and number of times a JScript function was called as you test your application and use the profile report to quickly identify and fix performance bottlenecks.
With these characteristics, the features of the Developer Tools will dramatically improve your productivity when developing in Internet Explorer. The rest of this article explains many of these and other features in more detail.
Getting Started
Getting started with the tools is simple: press F12 or click Developer Tools from the Tools menu.
Once open, the tools exist in their own window, each one connected to a single tab in Internet Explorer. If you prefer to decrease the number of open windows, pin the tools to a tab by clicking the Pin button or pressing CTRL+P.
Some features of the tools do not need the complete tools interface. In that case, click the Minimize button or press CTRL+M when the tools are pinned. The tools become a row at the bottom of the window, providing access to just the Command Menu bar.
Debugging HTML and CSS
The tools give you visibility into the browser so you can inspect your site's HTML and Cascading Style Sheets (CSS) as they exist inside Internet Explorer instead of just the original source. This is particularly helpful with dynamic sites, complex sites, and sites that use frameworks like Active Server Pages (ASP) or PHP.
The Primary Content Pane in the tools displays the site's Document Object Model (DOM) tree, which reflects the one maintained by Internet Explorer to represent the site in memory. You can navigate the tree with the mouse or the keyboard. The quickest way to find the node for a specific element on the page is to use the Select Element by Click feature. Use this feature to select an element on the page and the tools will automatically select the corresponding tree node. An alternative method is to use the Search box.
Inspecting HTML Elements
Once you selected an element in the DOM tree, the Properties Pane on the right exposes more information about the element in the following ways:
- Style: The Style command improves CSS debugging by providing a list of all rules that apply to the selected element. The rules display in precedence order so those that apply last appear at the bottom and any property overridden by another is struck through, allowing you to quickly understand how CSS rules affect the current element without manually matching selectors. You may quickly turn a CSS rule on or off by toggling the checkbox next to the rule and the action will take effect immediately on your page.
- Trace Style: This command contains the same information as Style except it group styles by property. If you are looking for information about a specific property, switch to Trace Styles command. Simply find the property that interests you, click the plus (+) icon, and view a list of all rules that set that property, again in precedence order.
- Layout: The Layout command provide box model information such as the element's offset, height, and padding. Use this command when debugging an element's positioning.
- Attributes: The Attributes command allows you to inspect all defined attributes of the selected element. This command also allows you to edit, add or remove attributes from the selected element.
To further inspect CSS, switch to the CSS tab for a list of all CSS files for the current site.
Inspecting CSS Properties
Switching to the CSS tab gives you access to all external CSS files to inspect. Select a style sheet by clicking on the Style Sheet Chooser button. Clicking on a style property name or value allows you to change it and see it take effect immediately.
Editing Sources On-The-Fly
After using the tools to inspect and gather the information you needed, you may want to take action on your findings right away. To edit any HTML attributes or CSS properties, just click it, type the new value, and press ENTER. The change takes effect immediately so you can quickly test changes. In HTML, you can also press the Edit button to make the entire tree editable and then add, remove, or edit complete elements. In either case, the Developer Tools enable quick editing without modifying your source. Once you get everything to where you want it, you can save your changes.
Saving Changes
All changes made in the tools only exist in Internet Explorer's internal representation of the site. Therefore, refreshing the page or navigating away brings back the original site. However, in some cases you may want to save the changes. In the HTML and CSS tabs, click the Save button to save the current HTML or CSS, respectively, to a file. Remember that not only will the areas of your site that you modified differ from your source, but other parts may also differ since the tools display your site as it exists in Internet Explorer rather than in your source. To prevent accidentally overwriting source, the tools save the output as text and add a leading comment to the file.
For more information on HTML and CSS, read the article Debugging HTML and CSS with the Developer Tools.
Debugging JavaScript
While CSS makes it easier to build dynamic sites without JavaScript, most complex sites still need at least some script. And as with any programming language, a good debugger is critical to being productive and the Developer Tools provide just that.
Starting and Stopping the Debugger
Debugging JavaScript in Internet Explorer 8 is simple. On any site you want to debug, open the Developer Tools and switch to the Script tab, then click Start Debugging. When starting the debugging process, the Developer Tools will Refresh the page and Unpin the tools if it is pinned.
Once started, you have all the functionality you expect from a debugger. Once you are done, click the button again to Stop Debugging. While the debugger is started, the Developer Tools offer powerful control and insights into your scripts.
Controlling Execution
You can pause execution at a specified place by setting breakpoints. Click a line number or right-click the source and choose Insert Breakpoint. You can set breakpoints within inline functions or event handlers. In addition, Conditional Breakpoints can also be set.
If you're not sure where to set a breakpoint, click Break All to pause execution before the next JavaScript statement runs or Break On Error to pause execution when Internet Explorer encounters a script error. After pausing execution, step through script, including anonymous functions, with Step Into, Step Over, and Step Out commands.
Inspecting Variables
As you step through code, it is helpful to inspect the current state of variables. Within the Script tab, use the Locals pane to view local variables and the Watch pane to monitor a custom list of variables. You can add variables to this list by right-clicking in the source and clicking Add Watch or typing the variable name in the Watch pane.
Inspecting Call Stack
As you debug your application by stepping through the JavaScript code, you can view the functions in the current call stack. Clicking on a function from the call stack list displays the source code in the Primary Content Pane.
Using the Debugger Console
Instead of editing your source to test a statement, with the Developer Tools you simply type the JavaScript statements in the Console pane to execute it. Click Multi Line Mode to enter multiple lines of to be executed at a time. Internet Explorer executes the code immediately so you can test the outcome of adding that code at the same location as the current breakpoint. You can use Console even when you are not debugging. To make it easy for you to fix errors on your page, Console also logs all the script error messages through the use of console.log. More information on this can be found at Debugging Script with the Developer Tools under the "Using Console to Execute Code Statements" section.
For more indepth information on script debugging, read the article Debugging Script with the Developer Tools.
Profiling JavaScript Performance
Debugging JavaScript helps perfect the behavior of your site, but the JavaScript Profiler can help take your site to the next level by improving its performance. The Profiler gives you data on the amount of time spent in each of your site's JavaScript methods and even built-in JavaScript functions like string concatenation. Since you can start and stop the JavaScript Profiler at any time during application execution, you can collect multiple profile data for the specific scenario that interests you.
Starting and Stopping Profiler
As with the debugger, getting started is simple: open the Profiler tab and click Start Profiling to begin a session. Perform the scenario you want to profile and then click Stop Profiling. The resulting data can then be examined immediately.
Viewing Data
By default, the data appears in a function view which lists all the functions used. Click the Current View dropdown menu and select Call Tree to view a tree representing the order of calls made so you can walk through the code path and find hot spots. In both views, you can add, remove, arrange, and sort the columns to find the information you're looking for.
The profile report gives you information on the URL and line number of the function to help you locate the code in your application. Click the function name to bring up the source code for the function in the Primary Content Pane of the Script tab.
Note Line number maping to source codes functionality only available when script debugging is enabled. More information about script debugging can be found at: Debugging Script with the Developer Tools.
Profiling Multiple Sessions and Exporting Data
Click Start Profiling again to begin a new profiling session. When you click Stop Profiling, the new data displays. To view the data from previous profiled sessions, click the file drop-down list and choose another report. The profile report persists for the current Internet Explorer process, but you can save the profile data in CSV format by clicking the Export button and use any other application for later investigations.
For more information about profiling, read the article Profiling Script with the Developer Tools.
Searching for Content
The Developer Tools offers a suite of tools to inspect and modify your sources to test things out on the fly. When you have a lot of sources to look through, wouldn't it be nice to be able to find things quickly? It is possible and you can do it with the Search box provided in the Developer Tools. The Search box is context sensitive to the Mode tab you are currently on. For example, if you are currently on the HTML tab, then the search is perform against the DOM in the Primary Content Pane. All matchings are highlighted and the first match is selected. Similarly, you can search in the CSS tab, Script tab, and Profiler tab.
The Search box also support W3C Selectors API syntax for the HTML tab. To use selectors syntax, you start the search with the "@" symbol. For example, to find all div elements, type "@div". To find only div elements with a perticular CSS class name, type "@div.myClassName", or to find all elements with that class name, type "@.myClassName". You can also search for elements with an id defined, type "@#myID". To learn more about CSS selectors read Understanding CSS Selectors.
Note CSS class names are case sensitive when using selector syntax in the Search box.
Viewing Sources
Prior to Internet Explorer 8, the only source you can view is the original source when you right-click a Web page and select View Source. This is still available; however, using the View command from the Developer Tools, you have more control over what sources to view. You may choose to look at a specific element with its DOM sources only or with DOM sources and styles that are applied to that element. This isolates the element to give you the focus you need to spot any potential problems. You can also view the Original source of the Web page or the DOM sources as represented by Internet Explorer. This includes the original sources and those inserted by scripts. Now you see exactly what the Internet Explorer browser sees.
Also part of the View command is the option to view Link Report. The link report is generated in a separate browser tab with information of all links found on the page.
Note Developer Tools offers you the option to choose your own application to View Source with. You can find this option under the File menu.
Outlining Elements on Screen
Have you ever wondered where the border of a particular element is on screen? Have you ever found yourself having to turn an element's border to 1 just to see where it is? With the Outline command from the Developer Tools, you can see all your elements' outlines without having to modified your sources. The command provides a few commonly used elements like Tables, Div Elements, and Images. It also offers you a dialog to add Any Element... you want to outline. You may also assign a color to each element to help differentiate them. The outline will persist until you turn it off or refresh the page. More information about Outline menu can be found at Developer Tools User Interface Reference under "The Outline Menu" section.
Working with Images
When working with images, Developer Tools offers several commands to help you quickly identify information about your images such as file size, dimensions, and path, right on screen. It also allows you to turn image rendering on or off. It even offers an option to generate Image Report for each images found on the Web page.
Controlling Cache and Cookies
The Cache command menu gives you the control over your cache and cookie settings. You can set the broswer to Always Refresh from Server so you know you are getting the latest information. You can also control the cache with Clear Browser Cache or Clear Browser Cache for this Domain.
Working with cookie, you may choose to disabled it so no cookie will be written to your machine. You can quickly see a complete list of all your cookies by clicking on View Cookie Information. You can also choose to Clear Session Cookies or Clear Cookies for Domain.
In both cases for cache and cookies, these commands will come in handy because it gives you quick access and tight control over your browser environment.
Using Power Tools
The Tools command menu offers you three power tools as you work on your Web sites.
- The Resize tool: This tool help you quickly resize your browser window to standard sizes such as 800x600 or 1024x768, or you may even add Costom... window sizes. There are keyboard shortcuts available for this from the Developer Tools Keyboard Shortcuts Reference.
- The Show Ruler tool: This tool allows you to draw rulers on screen to help capture distance between objects. The rulers can be set to Snap to XY axis, Snap to element, or free form. You may draw as many rulers as you want, and you may also reuse a ruler by resizing it and dragging it around.
- The Show Color Picker tool: This tool will help you pick a color. By placing the picker over any text, object, or background you see on screen you can see a sample of the color the picker is currently on, along with its HEX value. Once you click a color, you can then copy the value into your code.
Validating Your Sources
Once you are done with development work, it is nice to know that your code meet various standards, such as HTML, CSS, and accessibility. The Developer Tools has gathered these useful resources to help you check your sources against these validators. Simply choose the type of validation you want to perform or choose to do a Multiple Validations... session.
Testing in Different Browser and Document Modes
Internet Explorer 8 has the ability to render pages and report version information as Windows Internet Explorer 7. Web developers and end users can use this ability to ensure sites continue to work even if not built for Internet Explorer 8, but you can also use it to test how your site will look to Internet Explorer 7 users.
Testing Browser Modes
The Browser Mode menu lets you choose how Internet Explorer should report three important properties:
- User agent string: The value Internet Explorer sends to Web servers to identify itself.
- Version vector: The value used when evaluating conditional comments.
- Document mode: The value used to determine whether Internet Explorer uses the most recent behavior for CSS, DOM, and JScript operations or emulates a previous version of Internet Explorer for compatibility.
Three Browser Mode options exist, each modifying these values in different ways:
- Internet Explorer 7: In this mode, Internet Explorer reports a user agent, version vector, and document mode identical to those used by Internet Explorer 7. Use this mode to test how Internet Explorer 7 users experience your site.
- Internet Explorer 8: In this mode, Internet Explorer reports a user agent, version vector, and document mode to match the default Internet Explorer 8 behavior, which is the most standards-compliant available in Internet Explorer 8. Use this mode if you want to test how Internet Explorer 8 users experience your site.
- IE8 Compatibility View: In this mode, Internet Explorer 8 reports version vector, document mode, and user agent string as if it is Internet Explorer 7; however, the user agent string also includes a token indicating that the browser is really Internet Explorer 8. Use this mode to test how Internet Explorer 8 users experience your site if they've chosen the Compatibility View option.
Testing Document Modes
The Document Mode defines how Internet Explorer renders your page, but has no effect on the version vector or user agent string. By using this option in conjunction with the Browser Mode, you can quickly test which document mode you should use for your site. Three options exist:
- Quirks Mode: This behavior matches that of Internet Explorer when rendering a document with no doctype or a Quirks doctype. It's similar to the behavior of Microsoft Internet Explorer 5 and the Quirks mode behavior of Microsoft Internet Explorer 6, and the same as the Quirks mode of Internet Explorer 7.
- Internet Explorer 7 Standards Mode: This behavior matches that of Internet Explorer 7 rendering a document with a strict or unknown doctype.
- Internet Explorer 8 Standards Mode: This behavior is the latest standards-compliant 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 doctype.
For more information on document compatibility modes, read the article Testing Browser and Document Compatibility Modes with the Developer Tools
Using Keyboard Shortcuts
The Internet Explorer 8 Developer Tools have extensive keyboard shortcut support to make it even easier to accomplish tasks. Use standard Windows conventions like F12 to open or close the Developer Tools and F5 to Refresh the page. You can find the complete list by going to Developer Tools Keyboard Shortcuts Reference.
Referencing Interface Commands
While this article introduces you to many of the major features of the Developer Tools, you can find even more information about all the tools available by going to Developer Tools User Interface Reference.
Related topics
How to use F12 Developer Tools to Debug your Webpages
Debugging HTML and CSS with the Developer Tools
Debugging Script with the Developer Tools
Profiling Script with the Developer Tools
Developer Tools User Interface Reference
Developer Tools Keyboard Shortcuts Reference