Click to Rate and Give Feedback
MSDN
MSDN Library
Web Development
Tools
Developer Tools
 Internet Explorer 8 Developer Tools...
Internet Explorer 8 Developer Tools GUI Reference
New for Windows Internet Explorer 8
Note: This documentation is preliminary and is subject to change.

This article is designed to give you a quick reference to the commands and menus available in the Developer Tools GUI. 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.

Identifying Main Areas of the Develeroper Tools Graphical User Interface (GUI)

When you press F12, the Developer Tools opens with a default interface. The image below shows a sample of this interface. Each area of the interface is marked with a number to identify the area. The following is the main graphical user interface for the Developer Tools:

Main screen shot of the Developer Tools
Figure 1: Main screen shot of the Developer Tools.

The marked areas from the image above are identified in the following table:

Reference NameBrief Description
Menu barList of command menus that can be performed at any time regardless of the Mode tab selected. This menu bar persists on the screen when the Developer Tools is Pined to the window and is Minimized.
Mode tabThe highlighted tab indicates the current mode that the Developer Tools is inspecting. Selecting a tab will also change the Mode-specific toolbar for this selected tab.
Mode-specific toolbarProvides commands specific to the current mode.
Primary Content planeThis is the core view for this tab. It provides source, tree, or profiling information. Horizontal and vertical scroll bars will be provided when content flows beyond the current pane's view.
Properties paneThis 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 chooserDepending on the current tab, you can select the type of properties to inspect.

The Command Bar Menus

The following sections describe the details of each Menu Bar menu.

The File Menu

The following commands are available on the File menu:

Command NameDescription
Undo AllResets all the changes made to a particular Web page and refreshes the Web page.

The Find Menu

The following commands are available in the Find menu:

Command NameDescription
Select Element by Click

Allows users to choose an element on a Web page by clicking the element. Once the element is clicked, a border is drawn around the element on the Web page. If your current Mode tab is HTML, the Primary Content pane will scroll to display the element in the pane view and 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 you will have to click the HTML tab to inspect the element. The following figure shows the results after the element is selected.

This figure shows Select Element by Click button and the results from selecting an element.
Figure 2: The Select Element by Click button and the results from selecting an element.

The Disable Menu

The following commands are available in the Disable menu:

Command NameDescription
ScriptDisable all scripts on a Web page. This command must be selected again to enable all scripts. When selected, the command is set and causes the page to refresh. This command is not available if the Internet Security has Protected Mode set to On. To activate this command, turn Protect Mode to Off.
Popup BlockerDisable all popup blockers so that pop-ups are allowed on this Web site. This command must be selected again to enable popup blockers. This command is not available if your Internet Security has Protected Mode set to On. To activate this command, turn Protected Mode to Off.
All CSSDisable all Cascading Style Sheets (CSS) on the page. Select again to enable all CSS. When selected, the command is set and causes the page to refresh. This command can also be re-enabled when a Web page is refreshed.

The View Menu

The following commands are available in the View menu:

Command NameDescription
Class and ID InformationDisplays the Class and ID values of all HTML elements on a Web page. Within the corresponding elements, information is displayed as overlays on the Web page. For more information, move the cursor over a class or ID overlays. Double-click the overlay to highlight information; this will allow you to copy it.
Link PathsDisplays the link paths for all links on a Web page. The information is displayed as overlays. For more information, move the cursor over a link overlay. Double-click the overlay to highlight information; this will allow you to copy it.
Link ReportGenerate a list of all links defined on this Web page, and report it in a new Internet Explorer instance.
Tab IndexesFor elements on a Web page whose tabindex attribute is defined, this command displays the tab indexes as overlays.
Access KeysFor elements on a Web page whose accesskey attribute is defined, this command displays the access keys as overlays.

The Source Menu

Submenu of the View menu. The Source menu provide access to various sources of a document. When executed, the requested source will show up in a new Internet Explorer with line numbers and syntax coloring. The following commands are available in the Source menu:

Command NameDescription
Element Source with StyleDisplay just the selected element's HTML source in a new window, showing the CSS styles with nested element structure. This helps to focus on the sources of the selected element only. An HTML element must be selected first before this command can be executed. To select an element, use the Select Element by Click command.
DOM (Element)Display the selected element's HTML source in a new window, showing element nesting for the selected element. 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)Display 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.
OriginalDisplay the original HTML source in a new window. This is equivalent to performing a View Source on a Web page inInternet Explorer. Sources written to the DOM using scripts are not shown.

The Outline Menu

The following commands are available in the Outline menu:

Command NameDescription
Table CellsDraws an outline around all table cells found on a Web page. If no table cell is found, a dialog box will confirm this. Click OK to continue.
TablesDraws an outline around all tables found on a Web page. If no table is found, a dialog box will confirm this. Click OK to continue.
DIV ElementsDraws an outline around all div elements found on a Web page. If no div is found, a dialog box will confirm this. Click OK to continue.
ImagesDraws an outline around all image elements found on a Web page. If no image is found, a dialog box will confirm this. Click OK to continue.
Any ElementDefine your own element to outline. When clicked, a widget 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 will be immediately drawn around all elements found with the specified color. 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, selecting Clear Outlines, or closing the Internet Explorer instance.
Clear OutlinesClear all drawn outlines on a Web page and remove 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 NameDescription
RelativeDraws an outline around all elements found on a Web page that has a position defined as "relative".
AbsoluteDraws an outline around all elements found on a Web page that has a position defined as "absolute".
FixedDraws an outline around all elements found on a Web page that has a position defined as "fixed".
FloatDraws an outline around all elements found on a Web page that has a position defined as "float".
Note  When these commands are run and the requested Positioned Objects is not found on the Web page, a dialog box will confirm this. Click OK to continue.

The Images Menu

The following commands are available in the Images menu:

Command NameDescription
Disable ImagesDisable rendering of all images on a Web page. This command will cause the Web page to refresh and will disable the Show Image File Sizes command.
Show Image DimensionsDisplay the dimension of an image as overlays for all images found on a Web page. To get more information, move the cursor over an overlay.
Show Image File SizesDisplay the file size of an image as overlays for all images found on a Web page. The file size is reported in bytes. Selecting the Disable Images command will disable this command. To enable this command, deselect the Disable Images command.
Show Image PathsDisplay the absolute path of an image as overlays for all images found on a Web page. To get more information, move the cursor over an overlay.
View Alt TextFor all images found on a Web page, display the alt text of an image whose alt attribute is defined as overlays. For images whose alt attribute is not defined, no overlays will show up for this command.
View Image ReportGenerate a list of all images defined on this page, and report it in a new Internet Explorer instance.

The Cache Menu

The following commands are available in the Cache menu:

Command NameDescription
Always Refresh from ServerSet this flag to force Internet Explorer to always acquire Web page content from the server and not use any cache content. This command will persist until you clear it or the Internet Explorer instance is closed.
Clear Browser Cache...Browser cache and all temporary files will be deleted.
Clear Browser Cache for this Domain...Only browser cache and all temporary files that belong to the current domain will be deleted.
Disable CookiesDisable 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 CookiesAll cookies acquired during this browser session will be deleted.
Clear Cookies for DomainAll cookies from this domain will be deleted.
View Cookie InformationGenerate a list of all cookies stored in Internet Explorer, and report it in a new Internet Explorer instance.

The Tools Menu

The following commands are available in the Tools menu:

Command NameDescription
ResizeThis command 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. All tabs in this Internet Explorer window will be affected by the resize. A list of shortcut keys are available for these predefined screen sizes and can be found from the article on Developer Tools: Keyboard Shortcuts.
You can create your own custom screen sizes. To add a custom screen size, click Custom. A Resize Browser dialog box will open. Enter the Width and Height of your custom screen size and click Add. This will add your custom screen size to the list. To custom-resize the browser, select the screen size you want and click Resize. The active Internet Explorer window will resize immediately. The custom screen sizes you added will exist across the session until you delete them. New screen sizes added will be available for 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 continue.
Show RulerThis command 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 PickerThis command 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 Web page, follow these steps:
  1. Position the cursor over the object whose color you want to pick.
  2. Left-click once to select this color; notice that the color picker icon is now sunk.
  3. If you want another color sample, click on 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.

The Validate Menu

The purpose of this menu is to give you quick access to useful validators available on the Web. Upon execution, the Developer Tools forward your request to the respective Web page to do the validation. The following commands are available in the Validate menu:

Command NameDescription
HTMLValidate the HTML of the current Web page. The validated report will show up in a new window.
CSSValidate the CSS of the current Web page. The validated report will show up in a new window.
FeedValidate the RSS feeds. The validated feed will show up in a new window.
LinksValidate all links in the current Web page. The validated report will show up in a new window.
Local HTML...Once clicked, a new window will show up with the option to choose an HTML file on your local machine to be validated.
Local CSS...Once selected, a new window will show up with the option to choose a CSS file on your local machine to be validated.
AccessibilityGives access to the following accessibility validators:
  • WAI is the W3C's Web Accessibility Initiative (WAI). It defines guidelines for creating accessible Web pages.
  • Section 508 is the US government's accessibility guidelines for creating accessible Web pages.
Selecting an accessibility option will validate the current Web page against the selected accessibility validator and the results will show up in a new window.
Multiple Validations...Once selected, a Validate Set dialog box will show up. 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. For each selected validation, a respective window will be open with the resulting validation. To cancel this action, click Cancel or press ESC to continue.

The Browser Mode Menu

The following commands are available in the Browser Mode menu:

Command NameDescription
Internet Explorer 7Use this mode if you want to test how Internet Explorer 7 users will experience your Web site.
Internet Explorer 8Use this mode if you want to test how Internet Explorer 8 users will experience your Web site.
Internet Explorer 8 Compatibility ViewUse this mode to test how Internet Explorer 8 users will experience your Web site if they choose the Compatibility View option by clicking on the Compatibility View button The Compatibility View button in Internet Explorer.
On initial load of a Web page, the 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 Web page 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 Discovering the Internet Explorer 8 Developer Tools in the "Testing Web pages in Different Modes" section.

The Document Mode Menu

The following commands are available in the Document Mode menu:

Command NameDescription
QuirksThis 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 Internet Explorer 6, and is the same as the quirks mode of Internet Explorer 7.
Internet Explorer 7 StandardsThis behavior matches that of Internet Explorer 7 rendering a document with a strict or unknown document type.
Internet Explorer 8 StandardsThis is the latest 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 Web page load, the Developer Tools determines the default Document Mode and selects the appropriate mode. It also indicate the Web page's default mode with "(Page Default)". A check mark appears next to the current mode of the document. Once the mode changes, it causes the Web page 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 Discovering the Internet Explorer 8 Developer Tools under the "Testing Web pages in Different Modes" section.

Inspecting HTML Tab

The HTML tab allows you to inspect your document sources and to make changes to test out its effect. These changes can then be saved into a text for use to incorporate into the main site. The HTML tab has the following features:

The Mode Specific Toolbar

The following image shows the toolbar command icons:
This image shows the buttons available in the Mode Specific Toolbar for HTML tab.
Figure 3: This image shows the buttons available in the Mode-Specific toolbar for the HTML tab.
The following table describes each of the above command icons in more detail:

Command NameDescription
Select Element by ClickUse this command to quickly find the source to the content you see on a Web page. Once you click on an element on the Web page, the Primary Content Pane and the Properties Pane will reflect your action.
Clear Browser CacheClear the browser cache and get information from the Web server on refresh.
RefreshRefresh the content in the Primary Content Pane to its default state. Under this state, only the HTML node is visible. However, when the Edit mode is on, this command has no effect.
Element Source with StyleUse 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.
Save HTMLClick 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 Discovering the Internet Explorer 8 Developer Tools under the "Saving Changes" section.
EditClick 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 effect of your changes, click on this command icon. The page will refresh and the new changes will be reflected.
Word WrapWhen 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 the 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 the value 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 also 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. For example, moving the bar to the right will expand the Primary Content Pane and shrink Properties Pane by the same amount.

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 NameDescription
StyleThe Style command shows how your CSS rules have been applied to the selected element. It shows the attributes that have been affected and where the values have been specified. The check marks to the left of each rule can enable or disable the rule; you can use the checkmarks to experiment with the appearance of the elements on your Web page. The rules shown for an element are in cascading order: the last rule on the list has been applied and the one higher on the list that has been overwritten is stricken through.
Trace StylesThe Trace Styles command displays the CSS attributes that have been applied to an element, the element where the attribute is defined, and (if applicable) the name of the style sheet defining the attribute value. The rules shown for an attribute are in cascading order: the last element on the list has been applied and the one higher on the list that has been overwritten is stricken through.
LayoutThe 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 World Wide Web link.
AttributesThe Attributes command displays all of the currently selected element's attributes and their values.
For more information, see the article on Discovering the Internet Explorer 8 Developer Tools in the "Using the HTML Tools" section.

The Properties Pane

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

Inspecting CSS Tab

The CSS Tab helps you understand the interplay between your style sheets and their effects to a Web page. 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 has the following features:

The Mode Specific Toolbar

The following image shows the toolbar command icons:
This image shows the buttons available in the Mode Specific Toolbar for CSS tab.
Figure 4: Buttons available in the Mode-Specific toolbar for the CSS tab.
The following table describes each of the above command icons in more detail.

Command NameDescription
Select Element by ClickUse this command to quickly find the style to the content you see on the page. Once you click on an element in the page, the Primary Content Pane will reflect your action.
Clear Browser Cache...Clear the browser cache and get information from the server on refresh.
Save CSSClick 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 Discovering the Internet Explorer 8 Developer Tools under the "Saving Changes" section for more information.
Style Sheet ChooserUse this chooser button to switch between all your external style sheets that are included in this Web page. 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 styles are listed in order: first by type, then by alphabet. For example, the HTML tags with defined styles are listed first in alphabetical order, then by custom-defined classes alphabetically. A "+" next to the style will show or hide the style's attribute from view in the Primary Content pane. When checked, the check box by the class will activate all attributes of the class; when cleared, it will deactivate all attributes of the class. Each attribute has its own check box to turn that attribute on or off, as determined by the class.
To edit an attribute or value, click on it. Any changes you make here will take effect immediately after they are accepted by pressing ENTER or by clicking next to the edit box.

Inspecting Script Tab

The goal of the Microsoft JScript debugger is to bring one-click simplicity to the end-to-end JScript debugging experience through an intuitive, lightweight JScript debugger targeted at non-professional developers, yet still powerful enough to play an important role in a professional developer's tool set. The Script tab has the following features:

The Mode Specific Toolbar

The following image shows the toolbar command icons:
This image shows the buttons available in the Mode Specific Toolbar for Script tab.
Figure 5: This image shows the buttons available in the Mode-Specific toolbar for the Script tab.
The table below describes each of the above command icons in more detail.

Command NameDescription
Select Element by ClickUse this command to quickly find an element on a Web page. Once you click on an element in the page, switch over to the HTML tab or the CSS 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.
ContinueContinue running script without pausing until another breakpoint or script error is hit.
Break AllPause execution immediately before the next script statement is to be executed.
Break On ErrorPause execution at the point where the error occurs when the button is pressed; otherwise, execution will not break on error and will continue by throwing the exception.
Step IntoExecutes the next line of script and pauses, even if the next line is inside a new method.
Step OverContinues until the next line of script in the current method and then pauses. Useful for stepping over method calls.
Step OutContinues executing script until the next line in the method that called the current method.
Start DebuggingClick to start debugging and click again to stop debugging. The debugger control will be enabled once Start Debugging is clicked and disabled once debugging has stopped.
Script ChooserClick to get a list of external scripts included on this Web page. 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 change to view other files by selecting it from the Script Chooser list. This pane offers line numbers and syntax coloring. You can click on the left margin or a line number to set or unset a 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. For example, moving the bar to the right will expand the Primary Content Pane and shrink Properties Pane by the same amount.

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 NameDescription
LocalsInspect local variables within the scope of the current function. This requires debugger to be 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 To this command, add variables and objects you want to inspect. 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 and right-click then choose Add Watch to add that object to the Watch table. This command requires debugger to be started and execution stopped at a breakpoint. JScript - anonymous function can be watched and inspected.
Call StackTrace 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 debugger to be started and execution stopped at a breakpoint.
ConsoleThe console allows you to perform two primary tasks:
  1. Run custom script codes right where execution has stopped.
  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. The Console supports Single Line Mode and Multiple Line Mode where you can insert a single line of code or multiple lines of codes. Once you click Run Script, the codes will be executed immediately and any results will appear in the Console's view.
In the second case, the Console command supports the use of console.log APIs to capture messages from your scripts. The type of messages you can send includes the following:
  • console.log
  • console.info
  • console.warn
  • console.error
  • console.assert

These console commands can be called with a list of arguments that will be concatenated to generate the output string. The input parameters can also be formatted by using substitution patterns in the style of printf. For example, you can call console.log in either of the following ways:

  • console.log("Variable x = ", x, " and variable y = ", y)
  • console.log("Variable x = %d and variable y = %d", x, y)
You can decide which messages you want to view in the Console tab by setting filters. To manage the type of messages to track, right-click on the Console window and move the cursor over Filter. A filter that has a check mark is active. Clicking will deactivate it; clicking again will reactivate it.
Breakpoints

Set breakpoints to stop execution at this point of the script 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
You can set breakpoints at anytime. Once a breakpoint is set, theThe Breakpoint icon icon will appear next to the line number of the code, and the code of that line will be highlighted.

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

The Developer Tools also support 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 on a breakpoint in either the Primary Content or Properties pane, and select Condition.

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

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

The Mode Specific Toolbar

The following image shows the toolbar command icons:
This image shows the buttons available in the Mode Specific Toolbar for Profiler.
Figure 6: Buttons in the Mode Specific toolbar for the Profiler tab.
The table that follows describes each of these command icons in greater detail.

Command NameDescription
Select Element by ClickUse this command to quickly find an element on a Web page. Once you click on an element in the Web page, switch to the HTML or CSS 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.
Current ViewUse 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 profile session.
  • Call Tree provides the hierarchy of calls.
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 DataClick the Export Data button The Profiler's Export Data button. to save the profile data of the current report locally to a disk in CSV format. 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 ProfilingClick this button to start collecting profile information. Once the profiler is started, click the activities you want to profile on your Web page. 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.
ReportEach recorded profile session is logged into a Report. Reports are numbered starting from 1. Click the Report drop-down list box to switch between reports. To export the data from this report to a CVS file format, click the Export Data button.
CloseClick 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. The 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

The search box is context-sensitive to the current 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, two helper buttons will appear to help you search for the next and previous matches. As you search, the current match is highlighted and brought into view of the Primary Content pane.

The Developer Tools Window Controls

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

  • Click the Pin button to attach Developer Tools to the Internet Explorer instance that opened it. This is especially useful when multiple instances of the Developer Tools are opened. However, in script debugging mode, the Developer Tools will always be unpinned from its window.
  • Click Unpin to detach Developer Tools from the Internet Explorer instance; Developer Tools opens in its own window.
The Pin feature has the following characteristics:
  • Each Internet Explorer instance has its own instances of the Developer Tools. When working with multiple Web pages, use the Pin feature to attach the Developer Tools to its associated Internet Explorer instance. However, when script debugging is started, the Developer Tools will unpin itself, if it is pinned.
  • When the Developer Tools is pinned, it can be resized by stretching the upper edge of the Developer Tools, or minimized by clicking the Minimize button. In this state, Developer Tools remains attached to the window and only the Menu Bar is visible.

Remarks

  • Depending on the state of the Developer Tools, some commands might be disabled until a certain condition is met. When disabled, such commands will be unavailable.
  • You can validate various aspects of your Web page against validators available on the Web. The validation can be performed on live or local pages.
  • The separator between the Primary Content and Properties panes is movable, giving more view to one pane or the other. Scroll bars are also available when information flows beyond the viewable window.

Related Topics

Tags What's this?: Add a tag
Community Content   What is Community Content?
Add new content RSS  Annotations
Processing
© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker