Share via

Developer Tools User Interface Reference

  • Article

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

This article is designed to give you a quick reference to the commands and menus available in the Developer Tools interface commands. The goal is to help you quickly identify main areas of the interface and to quickly find your way around, ultimately improving your productivity. Each element of the interface is identified and a short description of what it does is provided. For more on F12 tools in Windows Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.

  • Main Interface Reference
  • The Command Menu Bar
  • The File Menu
  • The Find Menu
  • The Disable Menu
  • The View Menu
    • The Source Menu
  • The Outline Menu
    • The Positioned Object Menu
  • The Images Menu
  • The Cache Menu
  • The Tools Menu
  • The Validate Menu
  • The Browser Mode Menu
  • The Document Mode Menu
  • Inspecting HTML Tab
    • The Mode Specific Toolbar
    • The Primary Content Pane
    • The Property Type Chooser Menu Bar
    • The Properties Pane
  • Inspecting CSS Tab
    • The Mode Specific Toolbar
    • The Primary Content Pane
  • Inspecting Script Tab
    • The Mode Specific Toolbar
    • The Primary Content Pane
    • The Property Type Chooser
    • The Properties Pane
  • Inspecting Profiler Tab
    • The Mode Specific Toolbar
    • The Primary Content Pane
    • The Search Box
    • The Developer Tools Window Controls
  • Related topics

Main Interface Reference

When you press F12, the Developer Tools interface window opens in a default state. The following image shows a sample of this interface; the main command interface for the Developer Tools.

Main interface for the Developer Tools

Reference Name Brief Description
Command Menu bar List of command menus that can be performed at any time regardless of the Mode tab selected. This menu bar persists on the screen even when the Developer Tools interface is Pined to the window while being Minimized.
Mode tab The highlighted tab indicates the current mode that Developer Tools is inspecting. Selecting a tab will also change the Mode-specific toolbar for this selected tab.
Mode-specific toolbar Provides commands specific to the current Mode tab.
Primary Content Pane This is the core view for this tab. It provides source codes, tree structure, or profiling information.
Properties Pane This pane displays properties for the current Mode tab and Property Type. The divider between the two panes can be moved to resize each pane.
Property Type Chooser Depending on the current tab, you can select the type of properties to inspect.

 

The Command Menu Bar

The following sections describe the details of each Command Menu.

The File Menu

The following commands are available on the File menu:

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 Gives you a menu with the following options for setting the View Source viewer:
  • Default Viewer: Use the built-in viewer.
  • Notepad: Use Notepad as the viewer.
  • Other: Choose another application installed in your machine to be use as a viewer.
Exit Close this instance of Developer Tools.

 

The Find Menu

The following commands are available in the Find menu:

Command Name Description
Select Element by Click

Allows you to choose an element on a webpage by clicking the element. Once the element is clicked, a border is drawn around the element on the webpage. If your current Mode tab is HTML, the Primary Content Pane will scroll to display the element in the pane and will highlight the selected element. The corresponding Properties Pane will also reflect the properties of the selected element, according to the current Property Type Chooser. If the current Mode tab is not on HTML, however, Select Element by Click will perform the selection and automatically switch focus back to the HTML tab. The following figure shows the results after the element is selected.

Results after element is selected

 

The Disable Menu

This menu helps you test how users would experience your site based on how they have configured their browser. The following commands are available in the Disable menu:

Command Name Description
Script Disable all scripts on a webpage. This command must be clicked again to enable all scripts. When selected, the command is set and causes the page to refresh. This command is not available if Internet Security has Protected Mode set to On. To activate this command, set Protected Mode to Off.
Popup Blocker Disable all pop-up blockers so that pop-ups are allowed on this website. This command must be selected again to enable pop-up blockers. This command is not available if Internet Security has Protected Mode set to On. To activate this command, set Protected Mode to Off.
All CSS Disable all Cascading Style Sheets (CSS) on the page. Click again to enable all CSS. When selected, the command is set and causes the page to refresh to reflect the selection. This command will be re-enabled when a webpage refreshes.

 

The View Menu

This menu allows you to quickly view information about elements on the page without first locating the item in the HTML tree or source. The following commands are available in the View menu:

Command Name Description
Class and ID Information 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; this will allow you to copy it.
Link Paths Displays the link paths for all links on a webpage. The information is displayed as overlays. Double-click the overlay to highlight information; this will allow you to copy it.
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 inspects all links without having to browse through the entire HTML source.
Tab Indexes Displays the tab indexes as overlays for elements on a webpage whose tabindex attribute is defined.
Access Keys Displays the access keys as overlays for elements on a webpage whose accesskey attribute is defined.

 

The Source Menu

Submenu of the View menu. The Source menu provides access to various sources of a document. When executed, the requested source will be displayed in a new window. The following commands are available in the Source menu:

Command Name Description
Element Source with Style Displays just the selected element's HTML source and its content, along with the CSS style rules that applies to it, in a new window. This helps to focus on the sources of the selected element only. An HTML element must be selected 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 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 will show full DOM structure of the page, including sources that are dynamically written to the DOM using scripts. This is the Document Object Model (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. Sources written to the DOM using scripts are not shown.

 

The Outline Menu

This menu provides commands that help you understand and debug page layout by making it easy to identify the size and position of elements. It also makes it easy to visually identify all elements of a certain type by color-coding based on element type. The following commands are available in the Outline menu:

Command Name Description
Table Cells Draws an outline around all table cells found on a webpage. If no table cell is found, a dialog box will confirm this.
Tables Draws an outline around all tables found on a webpage. If no table is found, a dialog box will confirm this.
DIV Elements Draws an outline around all div elements found on a webpage. If no div is found, a dialog box will confirm this.
Images Draws an outline around all image elements found on a webpage. If no image is found, a dialog box will confirm this.
Any Element Allows you to specify your own element to outline. When clicked, a dialog will appear, allowing you to add an element you want to outline. To add an element, enter the element name, choose a color to associate with this element, and click Add. If that element exist on the page, an outline with the specified color will be immediately drawn around all elements found. You may also delete a custom element by selecting it from the list and clicking Delete. The elements you define will persist until you remove them from the list, select Clear Outlines, or close the Internet Explorer instance.
Clear Outlines Clears all drawn outlines on a webpage, and removes all custom elements in the Any Element list.

 

The Positioned Object Menu

This is a submenu of the Outline menu. The Positioned Objects menu provides access to various positioned elements in a document. The following commands are available in the Positioned Objects submenu:

Command Name Description
Relative Draws an outline around all elements found on a webpage that have a position defined as "relative".
Absolute Draws an outline around all elements found on a webpage that have a position defined as "absolute".
Fixed Draws an outline around all elements found on a webpage that have a position defined as "fixed".
Float Draws an outline around all elements found on a webpage that have a position defined as "float".

 

Note  When these commands are run and the requested Positioned Objects are not found on the webpage, a dialog box will confirm this.

The Images Menu

This menu provides similar functionality to the View commands, but provides special handling for images. The following commands are available in the Images menu:

Command Name Description
Disable Images Disables rendering of all images on a webpage. This command will cause 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 overlays for all images found on a webpage.
Show Image File Sizes Displays the file size of an image as overlays for all images found on a webpage. The file size is reported in bytes. Selecting the Disable Images command will disable this command. To enable this command, deactivate the Disable Images command.
Show Image Paths Displays the absolute path of an image as overlays for all images found on a webpage.
View Alt Text Displays the alt text for all images whose alt attribute is defined. For images whose alt attribute is not defined, no overlay will show up.
View Image Report Generates a list of all images defined on this page, and display it in a new Internet Explorer instance.

 

The Cache Menu

This menu helps you test a site as it sits on the server instead of using a local cached copy. This is helpful when you're regularly changing the source or testing the server response. The following commands are available in the Cache menu:

Command Name Description
Always Refresh from Server Forces Internet Explorer to always acquire webpage content from the server rather than using cached content. This command will persist until you clear it or the Internet Explorer instance is closed.
Clear Browser Cache... Deletes the browser cache and all temporary files.
Clear Browser Cache for this Domain... 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 will persist 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 this domain.
View Cookie Information Generates a list of all cookies stored in Internet Explorer, and reports it in a new Internet Explorer instance. Click here for reference on how to work with cookie.

 

The Tools Menu

This menu provides various tools that help you with common tasks, like testing a site in different resolutions, measuring areas of the page, and capturing the specific color of a point on the page. The following commands are available in the Tools menu:

Command Name Description
Resize Provides a sub menu with some predefined screen sizes offered, and an option to customize a screen size. Once a predefined screen size is selected, the Internet Explorer window will resize immediately to the dimension selected. A list of shortcut keys are available for these predefined screen sizes, and can be found in the article: Developer Tools Keyboard Shortcuts Reference. You can create your own custom screen sizes. To Add a custom screen size, do the following:
  1. From the Tools menu, click Custom command. A Resize Browser dialog box will open.
  2. Enter the Width and Height of your custom screen size and click Add. This will add your custom screen size to the list.
From the Resize Browsers dialog box, you can Add, Delete, and Resize browser windows using your custom sizes. For example, to custom-resize the browser, open the Resize Browsers dialog box, select the screen size you want and click Resize. The associated Internet Explorer window will resize immediately. The custom screen sizes you added will exist across browser sessions until you Delete them. New screen sizes added will be available to subsequent instances of Internet Explorer, and will not be available to instances that are already opened. Once you are done with the Resize Browsers dialog box, click Close or press ESC to close the dialog box.
Show Ruler Allows you to measure any arbitrary objects on the screen. The command will open the Ruler dialog box, 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. Once a ruler is drawn, it will show the (x,y) coordinates of each end of the ruler relative to where the points are on the screen; the ruler length will be shown at the center of the ruler in pixels. This information is also reflected on the bottom of the Ruler dialog box when you move the cursor over a defined ruler. A defined 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. When the dialog box is closed, all rulers are also hidden. They will show up again when you reopen the Ruler dialog box.
Show Color Picker Allows you to use a color picker tool to pick out a color sample from any object on the page. This command will open the Color Picker dialog box, showing the color sample the picker is on. Color Picker will also show the color's RGB and HEX values. To pick a color from the webpage, follow these steps:
  1. Position the cursor over the object whose color you want to pick.
  2. Left-click once to select this color
  3. If you want to pick a different color sample, click the color picker icon and repeat the steps above.
  4. Once you are satisfied with the selected color, click Copy and Close to capture this color to the clipboard. The HEX value can then be pasted into your sources.
To close the Color Picker dialog box, press the X on the upper right corner of the dialog box.

 

The Validate Menu

The purpose of this menu is to give you quick access to useful validators available on the Web. Upon request, the Developer Tools forward your request to the respective website to do the validation. A dialog will confirm that you want to take this action, otherwise the request is canceled. The following commands are available in the Validate menu:

Command Name Description
HTML Validates the HTML of the current webpage. The validated report will show up in a new window.
CSS Validates the CSS of the current webpage. The validated report will show up in a new window.
Feed Validates the RSS feeds. The validated feed will show up in a new window.
Links Validates all links in the current webpage. The validated report will show up in a new window.
Local HTML... Opens a new window with the option to choose an HTML file on your local machine to be validated.
Local CSS... Opens a new window with the option to choose a CSS file on your local machine to be validated.
Accessibility Gives access to the following accessibility validators:
  • WCAG Checklist is the W3C's 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.
Selecting an accessibility option will validate the current webpage against the selected accessibility validator and the results will show up in a new window.
Multiple Validations... Opens a Validate Set dialog box. This dialog box allows you to choose one or more validations to run in one single request. Select the validation you want, and click OK to initiate the request. You will get one dialog confirming that you want to send this page to another site to do the validation. Each selection will be open in a new tab with the resulting validation. To cancel this action, click Cancel or press ESC to continue.

 

The Browser Mode Menu

This command allows you to test how your page appears and behaves for users running Windows Internet Explorer 7 or running Windows Internet Explorer 8 in Compatibility View. The following commands are available in the Browser Mode menu:

Command Name Description
Internet Explorer 7 Use this mode if you want to test how Internet Explorer 7 users will experience your website.
Internet Explorer 8 Use this mode if you want to test how Internet Explorer 8 users will experience your website.
Internet Explorer 8 Compatibility View Use this mode to test how Internet Explorer 8 users will experience your webpage if they choose the Compatibility View option by clicking on the Compatibility View button Compatibility View button in Internet Explorer.

 

On initial load of a webpage, Developer Tools determines the default Browser Mode and selects the appropriate mode. A check mark appears next to the current mode of the document. Once the mode changes, it causes the webpage to refresh. The page remains in this mode until another mode is chosen or until you close the browser. For more information, see the article on Testing Browser and Document Compatibility Modes with the Developer Tools.

The Document Mode Menu

This command allows you to modify the chosen document mode of the current page without modifying the DOCTYPE or META tag in the source. The following commands are available in the Document Mode menu:

Command Name Description
Quirks 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.
Internet Explorer 7 Standards This behavior matches that of Internet Explorer 7 rendering a document with a strict or unknown document type.
Internet Explorer 8 Standards 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.

 

On initial webpage load, Developer Tools determines the default Document Mode and selects the appropriate mode. It also indicates the default mode of the webpage with (Page Default). A check mark appears next to the current mode of the document. Once the mode changes, it causes the webpage to refresh, and remains in this mode until another mode is chosen or until the browser is closed. For more information, see the article on Testing Browser and Document Compatibility Modes with the Developer Tools.

Inspecting HTML Tab

The HTML tab allows 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 could be used to incorporate new or modified material into the main site. The HTML tab has the following features:

  • The Mode Specific Toolbar
  • The Primary Content Pane
  • The Property Type Chooser Menu Bar
  • The Properties Pane

The Mode Specific Toolbar

The following screen shot shows the toolbar command icons.Buttons in Mode Specific Toolbar for HTML tab

The following table describes each of the above command icons in more detail:

Command Name Description
Select Element by Click Use this command to quickly find the source to the content you see on a webpage. Once you click an element, the Primary Content Pane and the Properties Pane will reflect your action. The selection will also draw an outline around the selected element.
Clear Browser Cache Clear the browser cache and get information from the Web server upon refresh.
Refresh Refresh the content in the Primary Content Pane to its default state. Under the default state, only the HTML node is visible. The Refresh button has no affect when the Edit mode is on.
Element Source with Style Use the Select Element by Click and select an element, then click this command. A new window will show up with the selected element's HTML source and CSS styles with nested element structure. This is a shortcut to the same command found in the View/Source command menu.
Save HTML Click this command to invoke the Save As dialog box. The file is saved in a .txt file format. This serves to prevent you from accidentally overriding your original source file. For more information, see the article on Debugging HTML and CSS with the Developer Tools under the "Saving Changes" section.
Edit Click this command to edit the current HTML file. The Primary Content pane will load the sources of the current page and act as a text editor. This source is the internal representation that Internet Explorer uses to render the page. In this mode the Word Wrap icon will be activated. To see the results of your changes, click this command icon again. This will switch out of the Edit mode and the page will refresh to reflect any new changes.
Word Wrap When you are in the Edit mode, this command will be activated to wrap the text in your file based on the width of the Primary Content Pane. Otherwise, this command is disabled.

 

The Primary Content Pane

This pane acts as a tree navigation for the HTML structure of the document, as well as a text editor under the Edit mode.

  • Under the default tree navigation mode, this pane contains the DOM structure of the HTML tree that exist for the current document. On initial load, and when the Refresh button is clicked, this view shows only the HTML node of the tree. This tree structure can be expanded or collapsed. You can use the tree structure to drill down to the element you want to inspect, or use Select Element by Click and the Developer Tools will find the element within the document for you. You can also edit any attribute names and values by clicking on it directly. On the other hand, clicking on an element will select it, and the properties of this element will be reflected in the Properties Pane.
  • Under the Edit mode, this pane acts as a text editor. Word wrap is supported if you click the Word Wrap command icon.

The divider bar between this pane and Properties Pane can be moved to resize the viewable area of each pane.

The Property Type Chooser Menu Bar

The Property Type Chooser menu bar allows closer inspection of the selected HTML element. Each command has its own view in the Properties Pane. Clicking on a command item will select it and cause the view in the Properties Pane to reflect its content. The commands are described in the following table:

Command Name Description
Style The Style command shows how your CSS rules have been applied to the selected element. It shows the rules and their properties and values. The check marks to the left of each rule can enable or disable the rule; you can use the checkmarks to experiment with how the properties and rules affect your webpage. The rules shown for an element are in cascading order: the last rule on the list is currently being applied, and the ones higher on the list are stricken through if they have been overwritten. The rules are grouped by defined style rules.
Trace Styles The Trace Styles command displays the same information as the Style command, except it is grouped by properties. Expanding the property will show a list of style rules that have this property defined.
Layout The Layout command displays the attributes of the element's box model, which in turn shows how the element flows in relation to the objects around it. For more information about the box model, see the W3C's box model discussion.
Attributes The Attributes command displays all of the currently selected element's attributes and their values.

 

For more information, see the article on Debugging HTML and CSS with the Developer Tools in the "Inspecting HTML Elements" section.

The Properties Pane

This pane will reflect the content of the currently selected Property Type Chooser. It serves multiple purposes and is context-specific, depending on what is currently selected from the Property Type Chooser menu bar. The content of each type is described above.

Inspecting CSS Tab

The CSS tab helps you understand the effects your style sheets have on a webpage. It is most useful for sites that use multiple style sheets. You can switch between style sheets by clicking on the Style Sheet Chooser button, and make changes to any style currently defined. The changes can also be saved to a text file. The CSS tab has the following features:

  • The Mode Specific Toolbar
  • The Primary Content Pane

The Mode Specific Toolbar

The following image shows the toolbar command icons. Buttons in Mode Specific Toolbar for CSS tab

The following table describes each of the previous command icons in more detail.

Command Name Description
Select Element by Click Use this command to quickly find an element on a webpage. After you click an element in the page, the context will switch over to the HTML tab, and the Primary Content Pane will reflect your action.
Clear Browser Cache... Clear the browser cache and get information from the server on refresh.
Save CSS Click this command to invoke the Save As dialog box. The file is saved in a .txt file format. This is to prevent you from accidentally overriding your original source file. See the article on Debugging HTML and CSS with the Developer Tools under the "Saving Changes" section for more information.
Style Sheet Chooser button Use this chooser button to switch between all your external style sheets that are included in this webpage. The content of the chosen style sheet is displayed in the Primary Content Pane.

 

The Primary Content Pane

This pane displays the content of the style sheet currently selected. The check boxes allow you to enable and disable specific properties or entire rules. When the check box next to a style rule is checked, all properties of that rule are enabled; when cleared, it will deactivate all properties of the rule. Each property has its own check box to turn that property on or off. To edit a property name or value, click it. Any changes made will take effect immediately after they are accepted by pressing ENTER.

Inspecting Script Tab

The Script tab offers developers an intuitive and lightweight Microsoft JScript debugger. The Script tab has the following features:

  • The Mode Specific Toolbar
  • The Primary Content Pane
  • The Property Type Chooser
  • The Properties Pane

The Mode Specific 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 command icons in more detail.

Command Name Description
Select Element by Click Quickly finds an element on a webpage. After you click an element in the page, the context will switch over to the HTML tab, and the Primary Content Pane will reflect your action.
Clear Browser Cache... Clears the browser cache and gets information from the server upon refresh.
Continue Continues running script without pausing, until another breakpoint or script error is hit.
Break All Pauses execution immediately before the next script statement is to be executed.
Break On Error Pauses execution at the point where the error occurs when this button is pressed; otherwise, execution will not break and will continue by throwing exceptions.
Step Into Executes the next line of script and pauses, even if the next line is inside a new method.
Step Over Continues until the next line of script in the current method, and then pauses. Useful for stepping over method calls.
Step Out Continues executing script until the next line in the method that called the current method.
Start Debugging Starts debugging. Click again to stop debugging. The debugger control will be enabled once Start Debugging is clicked and disabled once debugging has stopped. Clicking on Start Debugging will also unpin Developer Tools from its tab if it is pined.
Script Chooser button Gets a list of external scripts included on this webpage. Select a script, and its content will show up in the Primary Content Pane.

 

The Primary Content Pane

This pane acts as a text viewer under the Script tab. You can view other files by selecting them from the Script Chooser list. This pane offers line numbers and syntax coloring. You can click the left margin or a line number to set or unset break points. You can also select text in this pane, and right click to get a context menu that offers additional commands. The divider bar between this pane and Properties Pane can be moved to resize the viewable area of each pane.

The Property Type Chooser

The Property Type Chooser menu bar allows closer inspection of the selected type of command. Each command has its own view in the Properties Pane. Clicking on a command item will select it and cause the view in the Properties Pane to reflect its content. The following table describe these commands.

Command Name Description
Console

The console allows you to perform two primary tasks:

  1. Run custom script codes right where execution has stopped or in the global scope.
  2. Capture messages using the console.log APIs.
In the first case, the Console command allows the insertion of codes right where execution has stopped on an error or a breakpoint. The Console supports Single Line Mode and Multiple Line Mode. Once you click Run Script, the codes will be executed immediately and any results will appear in the Console's pane. In the second case, the Console command supports the use of console. Log APIs to capture messages from your scripts so you no longer have to use the alert() method in your codes. More information about console.log can be found at Debugging Script with the Developer Tools under the "Using Console to Execute Code Statements" section.
Breakpoints

Set breakpoints to stop execution at this point of the script in order to inspect the code. From the Primary Content Pane where the script code is displayed, you can set breakpoints by:

  • Right-clicking on a line of code and choosing Insert Breakpoint,
  • Clicking on the line number to insert or delete a breakpoint, or
  • Positioning the cursor on a line of code and pressing F9 to insert or delete a breakpoint.
You can set breakpoints at anytime. Once a breakpoint is set, the The Breakpoint icon icon will appear next to the line number of the code, and the code of that line will be highlighted.

Developer Tools also supports the use of conditional breakpoints. You can set a condition to a breakpoint such that execution only stops at that breakpoint when the condition is true. To set a condition to a breakpoint, right-click a breakpoint in either the Primary Content Pane or Properties Pane, and select Condition.

From the Properties Pane of the Breakpoints command, you can view a list of all the breakpoints being set. Double-clicking a breakpoint item will take you to that breakpoint in the code. Right-clicking the pane will give you a context menu with more options and commands to act upon.
Locals Inspect local variables within the scope of the current function. This requires the debugger to have been started. Local variables can be inspected by setting breakpoints to stop execution at a particular line in the script or when an error occurs.
Watch Inspect variables from any scope. You can add any local or global variables and objects by clicking the Click to add command in the Properties Pane and typing in the object you want to watch. You can also double-click an existing item to edit its name. In addition, you can select objects in the Primary Content Pane, right-click, then choose Add Watch to add that object to the Watch list. This command requires the debugger to be started and execution to be stopped at a breakpoint. JavaScript - anonymous function can also be watched and inspected.
Call Stack Trace the flow of function calls from this command. The current function is on top and the function that calls it is below it in the stack. Double-clicking a function will take you to that function definition. This command requires the debugger to be started and execution to be stopped at a breakpoint.

 

The Properties Pane

This pane will reflect the content of the currently selected command in the Property Type Chooser. It serves many purposes and is context-specific, depending on what is currently selected from the Property Type Chooser menu bar.

Inspecting Profiler Tab

Internet Explorer 8 Developer Tools provides a built-in script profiler that enables you to profile your JavaScript code running in Internet Explorer. The Profiler tab has the following features:

  • The Mode Specific Toolbar
  • The Primary Content Pane
  • The Search Box
  • The Developer Tools Window Controls

The Mode Specific Toolbar

The following image shows the toolbar command icons.Buttons in Mode Specific Toolbar for Profiler tab

The table that follows describes each of these command icons in greater detail.

Command Name Description
Select Element by Click Use this command to quickly find an element on a webpage. After you click an element in the page, the context will switch over to the HTML tab, and the Primary Content Pane will reflect your selection.
Clear Browser Cache... Use this command to clear the browser cache and get information from the server upon refresh.
Current View Use this command to set the current view of the profile report. The profile report can be viewed using either the Functions or Call Tree view.
  • Functions lists all the functions used during the profiling session.
  • Call Tree shows a hierarchy of calls during the profiling session.
In both views, various profile data is presented in different columns in the Primary Content Pane. To add or remove columns, right-click anywhere on the Primary Content 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.
Export Data Click the Export Data button The Profiler's Export Data button. to 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. Once the profiler is started, click the activities you want to profile on your webpage. These script activities will be collected and presented to you in a Report. When done, click the Stop Profiling button. The session will be logged into a report and the information displayed in the Primary Content Pane. Repeat this process to record another profiling session.
Report Each recorded profile session is logged into a Report and numbered. Click the Report drop-down list to switch between reports. To export the data from this report to a CVS file format, click the Export Data button.
Close Click this button to close the current report. The closed report will be removed from the list of Report. The next report on the list will become the current report.

 

The Primary Content Pane

This is the main viewing area for the current report. Current View controls how profiled information is presented. Report columns can be added or removed by right-clicking anywhere in the viewable area, and then choosing Add / Remove Columns from the shortcut menu. Clicking on the title of a column will also sort the report based on that column. Double-clicking on an entry will take you to the Script tab and display the code where this item is defined.

The search box is context-sensitive, based on the currently selected Mode tab. For example, when HTML tab is selected, the Search box will say Search HTML; when the CSS tab is selected, the Search box will say Search CSS. The Search box allows you to search for text in the file currently open in the Primary Content Pane. Once you initiate a search, all matching words are highlighted and two helper buttons will appear to help you traverse the next and previous matches. As you traverse the list of matches, the current match is highlighted and brought into view of the Primary Content Pane.

The Search box for the HTML tab also supports W3C Selectors API syntax. For example, you may do a search for "@div" to find all the div elements in the page. You may also search for a CSS class name by "@.myClassName" to find all elements with "myClassName" defined. You may narrow your search down by element. For example, "@div.myClassName" will only find all div elements that have "myClassName" defined. Notice that in this case, the class name is case sensitive. To learn more about CSS selectors read Understanding CSS Selectors.

The Developer Tools Window Controls

The Developer Tools window controls appear in the upper-right corner of the window, and offer common controls such as Minimize, Maximize, Close, Pin, Unpin, and Restore. The Developer Tools user interface has two main states: Pin and Unpin.

  • Click the Pin button to attach the Developer Tools interface to the Internet Explorer instance that opened it. This is especially useful when multiple instances of Developer Tools are opened. However, in script debugging mode, Developer Tools will always be Unpined from its window.
  • Click Unpin to detach Developer Tools from the Internet Explorer instance.

The Pin feature has the following characteristics:

  • Each Internet Explorer instance has its own instance of Developer Tools. When working with multiple webpages, use the Pin feature to attach each instance of Developer Tools to its associated Internet Explorer instance. However, when script debugging is started, Developer Tools will unpin itself, if it is Pined.
  • When the Developer Tools interface is Pined, it can be resized by stretching the upper edge of the Developer Tools interface window, or minimized by clicking the Minimize button. In this minimized state, Developer Tools remains attached to the window and only the Menu Bar is visible.

Discovering Internet Explorer Developer Tools

Debugging HTML and CSS with the Developer Tools

Debugging Script with the Developer Tools

Profiling Script with the Developer Tools

Testing Browser and Document Compatibility Modes with the Developer Tools

Developer Tools Keyboard Shortcuts Reference