.gif)
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:
.gif)
Figure 1: Main screen shot of the Developer Tools.
The marked areas from the image above are identified in the following table:
| Reference Name | Brief Description |
|---|
| 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 when the Developer Tools is Pined to the window and is Minimized. |
| Mode tab | The 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 toolbar | Provides commands specific to the current mode. |
| Primary Content plane | This 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 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 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 Name | Description |
|---|
| Undo All | Resets 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 Name | Description |
|---|
| 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. .gif)
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 Name | Description |
|---|
| Script | Disable 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 Blocker | Disable 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 CSS | Disable 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 Name | Description |
|---|
| Class and ID Information | Displays 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 Paths | Displays 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 Report | Generate a list of all links defined on this Web page, and report it in a new Internet Explorer instance. |
| Tab Indexes | For elements on a Web page whose tabindex attribute is defined, this command displays the tab indexes as overlays. |
| Access Keys | For 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 Name | Description |
|---|
| Element Source with Style | Display 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. |
| Original | Display 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 Name | Description |
|---|
| Table Cells | Draws 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. |
| Tables | Draws 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 Elements | Draws 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. |
| Images | Draws 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 Element | Define 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 Outlines | Clear 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 Name | Description |
|---|
| Relative | Draws an outline around all elements found on a Web page that has a position defined as "relative". |
| Absolute | Draws an outline around all elements found on a Web page that has a position defined as "absolute". |
| Fixed | Draws an outline around all elements found on a Web page that has a position defined as "fixed". |
| Float | Draws 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 Name | Description |
|---|
| Disable Images | Disable 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 Dimensions | Display 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 Sizes | Display 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 Paths | Display 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 Text | For 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 Report | Generate 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 Name | Description |
|---|
| Always Refresh from Server | Set 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 Cookies | Disable 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 | All cookies acquired during this browser session will be deleted. |
| Clear Cookies for Domain | All cookies from this domain will be deleted. |
| View Cookie Information | Generate 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 Name | Description |
|---|
| Resize | This 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 Ruler | This 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 Picker | This 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:
- Position the cursor over the object whose color you want to pick.
- Left-click once to select this color; notice that the color picker icon is now sunk.
- If you want another color sample, click on the color picker icon and repeat the steps above.
- 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 Name | Description |
|---|
| HTML | Validate the HTML of the current Web page. The validated report will show up in a new window. |
| CSS | Validate the CSS of the current Web page. The validated report will show up in a new window. |
| Feed | Validate the RSS feeds. The validated feed will show up in a new window. |
| Links | Validate 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. |
| Accessibility | Gives 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 Name | Description |
|---|
| Internet Explorer 7 | Use this mode if you want to test how Internet Explorer 7 users will experience your Web site. |
| Internet Explorer 8 | Use this mode if you want to test how Internet Explorer 8 users will experience your Web site. |
| Internet Explorer 8 Compatibility View | Use 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 .gif) 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 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 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 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:
.gif)
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 Name | Description |
|---|
| Select Element by Click | Use 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 Cache | Clear the browser cache and get information from the Web server on refresh. |
| Refresh | Refresh 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 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. |
| 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 Discovering the Internet Explorer 8 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 effect of your changes, click on this command icon. The page will refresh and the new changes will be reflected. |
| 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 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 Name | Description |
|---|
| Style | The 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 Styles | The 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. |
| 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 .gif) . |
| Attributes | The 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:
.gif)
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 Name | Description |
|---|
| Select Element by Click | Use 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 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 Discovering the Internet Explorer 8 Developer Tools under the "Saving Changes" section for more information. |
| Style Sheet Chooser | Use 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:
.gif)
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 Name | Description |
|---|
| Select Element by Click | Use 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. |
| Continue | Continue running script without pausing until another breakpoint or script error is hit. |
| Break All | Pause execution immediately before the next script statement is to be executed. |
| Break On Error | Pause 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 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 | Click 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 Chooser | Click 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 Name | Description |
|---|
| Locals | Inspect 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 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 debugger to be started and execution stopped at a breakpoint. |
| Console | The console allows you to perform two primary tasks:
- Run custom script codes right where execution has stopped.
- 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, the.gif) 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:
.gif)
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 Name | Description |
|---|
| Select Element by Click | Use 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 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 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 Data | Click the Export Data button .gif) 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 Profiling | Click 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. |
| Report | Each 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. |
| 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. 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