Iexplorer f12 Tool

This and many other developer references available at

IE F12 Tools to Debug Webpages

Windows Internet Explorer 9 Samples and Tutorials

This and many other developer references available at http:/neatinfo.com/dev_notes/_cheat

Windows Internet Explorer 9 Samples and Tutorials

http:/neatinfo.com/dev_notes/_cheat-sheets

By: Jan Zumwalt – neatinfo.com May 20, 2012

IE Explorer F12 Tool Reference Page 2 of 53

Notes:

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________

______________________________________________________________



Table of Contents

F12 Tools: Introduction .............................................................................................................................................. 5

What F12 tools do ......................................................................................................................... 5

Opening F12 tools .......................................................................................................................... 7

Navigating your webpage and code in F12 tools .............................................................................. 7

F12 Tools: Getting Started ......................................................................................................................................... 10

Webpage tools ........................................................................................................................... 10

F12 Tools: Console - View Errors and Status ............................................................................................................... 19

The console tab and view ........................................................................................................... 19

Sending messages from code to console ................................................................................... 19

Executing script and commands in the console .......................................................................... 22

Filtering messages and extending the console object ................................................................. 24

F12 tools: console error messages ............................................................................................................................. 26

Introduction ................................................................................................................................. 26

Security errors ............................................................................................................................ 26

HTML codes ............................................................................................................................... 27

CSS codes ................................................................................................................................. 28

Scalable Vector Graphics (SVG) codes ...................................................................................... 29

Script codes ................................................................................................................................ 29

XML codes ................................................................................................................................. 29

F12 Tools: JavaScript Errors ....................................................................................................................................... 33

Starting and Stopping the Debugger ........................................................................................... 33

Using the Console to Find Syntax and Other Code Errors .......................................................... 33

Make Ugly Scripts Pretty ............................................................................................................ 34

Breaking Code Execution ........................................................................................................... 35

Managing Multiple Breakpoints by using the Breakpoints Tab .................................................... 36

Conditional Breakpoints .............................................................................................................. 37

Stepping Through your Code ...................................................................................................... 38

Watching Variables with the Watch and Locals Tabs .................................................................. 38

Looking at the Call Stack ............................................................................................................ 40

Debugging Multiple Scripts ......................................................................................................... 41

Changing the Document Mode Setting ....................................................................................... 41

F12 Tools: Debug HTML and CSS ................................................................................................................................ 42

Using the HTML Tab .................................................................................................................. 42

Changing Numeric CSS Values in the CSS Tab ......................................................................... 48



Search and Save Changes ......................................................................................................... 48

F12 Tools: Code Profiler to analyze performance ....................................................................................................... 49

Profiling your script ..................................................................................................................... 49

Viewing profile reports ................................................................................................................ 49

Profile data types ........................................................................................................................ 49

Search and sort reports .............................................................................................................. 51

Copying and saving reports ........................................................................................................ 51

Back Page ................................................................................................................................................................ 53

Documentation .................................................................................................................................................................. 53

Topic Description Introduction to F12 Tools F12 tools is a suite of tools to help you build and debug your webpage.

Getting Started with F12 Tools

The F12 tools menus and buttons provide page and visual tools to help you navigate the tool suite. Within the tools, you can create report lists of all the links in your document, change document modes, or visually outline a specific element on a page.

F12 Console to View Errors and Status

The F12 tools console commands let you receive error messages from Internet Explorer 9, as well as send your own messages back from your code without having to break the flow of your execution.

F12 tools console error messages

The F12 tools console can report error and informational messages that occur during runtime. This article describes the error messages and offers suggestions for how to fix the errors.

F12 Tools to Debug JavaScript Errors

F12 tools enables web developers to quickly debug JavaScript code without leaving the browser.

F12 Tools to Debug HTML and CSS

The F12 tools can help you find and fix errors in HTML and CSS code that might otherwise be hard to find in your source code.

Profiler Tool to analyze performance

The F12 tools provide a built-in script profiler that enables you to analyze the performance of JavaScript code running in Internet Explorer 9. This topic explains the features of this tool and how you can use it to check the performance of your scripts.



F12 Tools: Introduction

F12 developer tools is a suite of tools to help you build and debug your webpage.

Writing great webpages requires coding expertise, as well as the right tools to find and debug issues that will inevitably crop up. Windows Internet Explorer 9 provides a view of your rendered code, and F12 tools provides a view of how those pages are interpreted on a code level by Internet Explorer 9. F12 tools also help identify and report about elements on the page such as links and image reports.

• What F12 tools do • Opening F12 tools • Navigating your webpage and code in F12 tools • Related topics

What F12 tools do

When you analyze your HTML code, the view you see through F12 tools is the actual way Internet Explorer 9 Document Object Model (DOM) interprets the page, and not the original source code. This is an important distinction to note. Because of representation, it is a good idea to refresh the HTML tab to get the current DOM, especially when you use dynamic elements.

The HTML tab shows your webpage's dynamic markup in a tree view. This is different from the original source code in that it reflects how Internet Explorer 9 has interpreted the original markup code, and any changes that have been made to the DOM since loading the page. This view needs to be refreshed periodically to reflect any recent changes to the DOM.

For example, if you are using script to build a webpage, looking at the source might not show you what your page is actually displaying to your users. An HTML or Cascading Style Sheets (CSS) CSS rendering bug might take you a while to find with the original source code, but when you use the F12 tools, you see the actual code that Windows Internet Explorer is interpreting in the DOM.

The following example shows this behavior. The source code, and the resulting code that Internet Explorer interprets when dynamically creating elements in the webpage is shown in the following code example.

HTML Copy <!DOCTYPE html PUBLIC> <html> <head> <script type="text/javascript"> function makePage() { for (var i = 1; i < 10; i++) { var myChild = document.createElement("div"); var myDiv = document.getElementById("myCount"); myChild.appendChild(document.createTextNode("Number: " + i)); myDiv.appendChild(myChild); } }

By: Jan Zumwalt – neatinfo.com

IE Explorer F12 Tool Reference

</script> <title>Dynamic page sample</head> <body onload="makePage();"><h1>Dynamic page sample</h1<div id="myCount"></div> </body> </html>

When the preceding example is rendered by Internet Explorer 9, it looks like the following screen shot. The webpage shows a series of nine "<div>" elements with

When you look at the source code (rightsource), you only see the first "<div>" tag that was used as the parent element, but not much else.

However, when viewed in the HTML tab, you see the additional "div" elements and text that the script added. As you are working and changing script code, press F5 to refresh and get the current DOM view.

Page 6 of 53

Dynamic page sample</title>

="makePage();"> h1>

When the preceding example is rendered by Internet Explorer 9, it looks like the following screen shot. The webpage shows a series of nine "<div>" elements with text.

When you look at the source code (right-click inside the browser window, and then click ), you only see the first "<div>" tag that was used as the parent element, but not much else.

However, when viewed in the HTML tab, you see the parent tag ("<div id="myCount">") plus additional "div" elements and text that the script added. As you are working and changing script code, press F5 to refresh and get the current DOM view.

May 20, 2012

When the preceding example is rendered by Internet Explorer 9, it looks like the following screen shot.

click inside the browser window, and then click View ), you only see the first "<div>" tag that was used as the parent element, but not much else.

parent tag ("<div id="myCount">") plus additional "div" elements and text that the script added. As you are working and changing script code,



Opening F12 tools

F12 tools are available on any page you are

or by clicking the tools button but you can pin it to the page you're working with by clicking the pin button or pressing Ctrl+that the window cannot be pinned while debugging on the clicked).

If you do not need the complete tools interface, click the tools are pinned. The tools become a row atCommand Menu bar.

Navigating your webpage and code in F12 tools

The F12 tools are loosely broken into two areas, page and visual based tools, and code level or debugging tools.

The page and visual tools are accessed mostly by using the main menu or shortcut keys. These tools complete tasks such as creating reports of all the links in your document, or visually outlining a specific element on a page. For more information on using page and visual tools, mesee Getting Started with the F12 Developer Tools

The code level tools are accessed through six dedicated tabs that provide HTML, CSS, and script debugging, as well as code profiling and network traffic capturing. The receive and view messages that you can send from within your code using the

For more information, see the following topics:

Page 7 of 53

F12 tools are available on any page you are viewing from within Internet Explorer 9 by pressing F12,

, and then selecting F12 tools. F12 tools opens in a separate window, but you can pin it to the page you're working with by clicking the pin button or pressing Ctrl+that the window cannot be pinned while debugging on the Script tab (Start debugging

If you do not need the complete tools interface, click the Minimize button or press Ctrl+M after the tools are pinned. The tools become a row at the bottom of the window, providing access to the

Navigating your webpage and code in F12 tools

The F12 tools are loosely broken into two areas, page and visual based tools, and code level or

are accessed mostly by using the main menu or shortcut keys. These tools complete tasks such as creating reports of all the links in your document, or visually outlining a specific element on a page. For more information on using page and visual tools, me

Getting Started with the F12 Developer Tools.

The code level tools are accessed through six dedicated tabs that provide HTML, CSS, and script as well as code profiling and network traffic capturing. The Console

receive and view messages that you can send from within your code using the

For more information, see the following topics:

May 20, 2012

viewing from within Internet Explorer 9 by pressing F12,

. F12 tools opens in a separate window, but you can pin it to the page you're working with by clicking the pin button or pressing Ctrl+P. Note

Start debugging has been

button or press Ctrl+M after the the bottom of the window, providing access to the

The F12 tools are loosely broken into two areas, page and visual based tools, and code level or

are accessed mostly by using the main menu or shortcut keys. These tools complete tasks such as creating reports of all the links in your document, or visually outlining a specific element on a page. For more information on using page and visual tools, menus, and buttons,

The code level tools are accessed through six dedicated tabs that provide HTML, CSS, and script Console tab offers a way to

receive and view messages that you can send from within your code using the console commands.



• Using the F12 Developer Tools Console to View Errors and Status• Using Internet Explorer Developer Tools Network Capture

Many of the tools and options in F12 tools are context sensitive, that is, your options change as you change tabs. There are features that work across all tools. The following get started working with the tools.

Change attributes and variables

From most views in F12 tools, you can click attributes and variables to change the values, and type in a new value. In the CSS tab, you can toggle styles and

Search for items

You can type a specific tag, ID, element, variable, or string into the find that item within a webpage code or details (such as under an expanded list of propertiescript tab). All found items are highlighted in the current view, and searches can be done on all but the Console tab or console view on the search opens the Details view and shows search results across all categories. In the also search across all the script files being used for your page, not just the one being displayed.

When you have multiple hits, you can navigate between them by pressing click the Next or Previous result buttons.

Select element by click

To make finding specific elements in a large DOM tree, you can select individual elements in the browser, and have them highlighted in the HTML tab of the F12 tools. From the F12 tools debugging

window, click the Select Element by Clickwebpage as you hover on the page. When you click a highlightand scroll to the selected element in the code pane. In some situations, you might need to refresh the HTML tab to see the element.

Page 8 of 53

Using the F12 Developer Tools Console to View Errors and Status Using Internet Explorer Developer Tools Network Capture

Many of the tools and options in F12 tools are context sensitive, that is, your options change as you change tabs. There are features that work across all tools. The following tips and tricks will help you get started working with the tools.

Change attributes and variables

From most views in F12 tools, you can click attributes and variables to change the values, and type in a new value. In the CSS tab, you can toggle styles and rules by selecting or clearing check boxes.

You can type a specific tag, ID, element, variable, or string into the Search box and press find that item within a webpage code or details (such as under an expanded list of propertiescript tab). All found items are highlighted in the current view, and searches can be done on all but the

tab or console view on the Script tab.. For the Network tab, if you're in the and shows search results across all categories. In the

also search across all the script files being used for your page, not just the one being displayed.

have multiple hits, you can navigate between them by pressing Enterresult buttons.

To make finding specific elements in a large DOM tree, you can select individual elements in the rowser, and have them highlighted in the HTML tab of the F12 tools. From the F12 tools debugging

Select Element by Click button , or press Ctrl + B to highlight elements on the webpage as you hover on the page. When you click a highlighted element, the HTML tab will open and scroll to the selected element in the code pane. In some situations, you might need to refresh the

May 20, 2012

Many of the tools and options in F12 tools are context sensitive, that is, your options change as you tips and tricks will help you

From most views in F12 tools, you can click attributes and variables to change the values, and type in a rules by selecting or clearing check boxes.

box and press Enter to find that item within a webpage code or details (such as under an expanded list of properties on the script tab). All found items are highlighted in the current view, and searches can be done on all but the

, if you're in the Summary view, and shows search results across all categories. In the Script tab, you can

also search across all the script files being used for your page, not just the one being displayed.

Enter or Shift + Enter, or

To make finding specific elements in a large DOM tree, you can select individual elements in the rowser, and have them highlighted in the HTML tab of the F12 tools. From the F12 tools debugging

to highlight elements on the ed element, the HTML tab will open

and scroll to the selected element in the code pane. In some situations, you might need to refresh the



Page 9 of 53

May 20, 2012


IE Explorer F12 Tool Reference Page 10 of

53

F12 Tools: Getting Started

The F12 developer tools menus and buttons provide page and visual tools to help you navigate the tool suite. Within the tools, you can create report lists of all the links in your document, change document modes, or visually outline a specific element on a page. This topic includes the following sections.

• Webpage tools

• Related topics

WEBPAGE TOOLS

There are a number of tools and options under the main menus. Many of the tools within the F12 tools suite operate on the webpage or browser itself, or provide ways to get to options and features of the various code views. The following table outlines the menus and the options that the tools provide.

File menu Menu item Description

Undo All Resets all the changes, such as attribute values, made to the current instance of Windows

Internet Explorer and refreshes the webpage.

Customize Internet Explorer

view source

Gives you a menu that has the following options for setting the View Source viewer:

• Default Viewer: Uses the built-in viewer with code formatting.

• Notepad: Uses Windows Notepad to display source.

• Other: Lets you browse for and specify another editor or viewer application

installed on your computer.

Online help (F1) Provides a link to this documentation.

Exit (F12) Closes F12 tools.

Find menu

The Find menu has only one item, Select element by click. You can enable this feature from the menu

item, by clicking the Select clement by click button or by pressing Ctrl+B. By enabling this feature, you can choose an element on a webpage by clicking the element on the page. After the element on the webpage is clicked, a border is drawn around the element. If the HTML tab is open, the left pane will scroll to highlight the selected element. The properties pane (right pane) displays the properties of the selected element, according to the current property type that you have chosen (Style, Trace Styles, Layout, or Attributes). If the HTML tab isn't currently open, using Select element by click selects the element and automatically switches focus back to the HTML tab. Select element by click is only enabled until you click an element.



Disable menu

This menu helps you test how users experience your site if they disable certain features in their browser. By using this menu, you toggle these features on and off.

Menu

item

Script Disables all scripts on a webpage. When selected, the command is set and the page refreshe

not available if Internet Security has Protected Mode set to On. To use this command, clear

Mode on the Security tab in Internet Options.

Popup

Blocker Disables all pop-up blockers so that pop

CSS Disables all Cascading Style Sheets (CSS) on the webpage. When selected, the command is set and the

webpage refreshes with CSS turned off. If you refresh the webpage, or start debugging script (which refreshes

the webpage), CSS will be re

Page 11 of

53

sers experience your site if they disable certain features in their browser. By using this menu, you toggle these features on and off.

Description

Disables all scripts on a webpage. When selected, the command is set and the page refreshe

not available if Internet Security has Protected Mode set to On. To use this command, clear

tab in Internet Options.

up blockers so that pop-ups are allowed on this website.

Disables all Cascading Style Sheets (CSS) on the webpage. When selected, the command is set and the


the webpage), CSS will be re-enabled.

May 20, 2012

sers experience your site if they disable certain features in their

Disables all scripts on a webpage. When selected, the command is set and the page refreshes. This command is

not available if Internet Security has Protected Mode set to On. To use this command, clear Enable Protected

Disables all Cascading Style Sheets (CSS) on the webpage. When selected, the command is set and the




53

View menu

This menu allows you to view information about elements on the page without first locating the item in the HTML tree or source.

Menu item Description

Class and ID

Information (Ctrl+I)

Displays the class and ID values of all HTML elements on a webpage. Within the corresponding

elements, information is displayed as overlays on the webpage. Double-click the overlay to highlight

information. Press Ctrl+C to copy.

Link paths Displays the link paths for all links on a webpage. The information is displayed as text overlays on the

webpage elements.. Double-click the overlay to highlight information. Press Ctrl+C to copy.

Link report Generates a list of all links found on this webpage, and reports it in a new Internet Explorer instance.

This makes it easy and convenient to inspect all links without having to browse through the entire

HTML source.

Tab indexes Displays the tab indexes as numbers overlaid on the webpage for elements whose tabindex attribute

is defined.

Access keys Displays the access keys as overlays for elements on a webpage whose accesskey attribute is

defined.

Source A submenu of the view menu, descriptions shown in the following table.

Source

submenu

item Description

Element

Source with

Style

Displays just the selected element's HTML source and its content, along with the CSS that applies to it, in a

new window. This helps to focus on the sources of the selected element only. An HTML element within the

body of the HTML tree must be selected by using the HTML tab view before this command can be

executed. To select an element, use the Select element by click command, or click an element in the HTML

tree.

DOM

(Element)

Displays just the selected element's HTML source and its content in a new window. An HTML element must

be selected using the HTML tab view before this command can be executed. To select an element, use the

Select element by click command.

DOM (Page) Displays the full HTML source in a new window, showing element nesting. This source view shows the

Document Object Model (DOM) structure of the page, including sources that are dynamically written to the

DOM using scripts as represented by Internet Explorer.

Original Displays the original HTML source in a new window.

Images menu

This menu provides commands that can help you understand and debug page layout by helping you identify the size and position of elements. It also helps you to visually identify all elements of a certain type by color-coding based on element type.



53

Menu item Description

Disable images Turns off rendering of all images on a webpage. This command causes the webpage to refresh without

showing any images, and will also disable the Show Image File Sizes command.

Show image

dimensions Displays the dimension of an image as text overlays for all images found on a webpage.

Show image file

sizes Displays the file size of an image as text overlays for all images found on a webpage. The file size is

reported in bytes. If the Disable Images command is used, this command is disabled.

Show image

paths Displays the absolute path of an image as overlays for all images found on a webpage.

View Alt text Displays the alternative text for all images whose alt attribute is defined. For images whose alt attribute

is not defined, no overlay appears.

View image

report

Generates a list of all images defined in the body code on the current webpage, and displays it in a new

Internet Explorer tab. This list does not include images that are loaded with CSS (such as "background-

image:url()").

Cache menu Menu item Description

Always Refresh from Server

Forces Internet Explorer to always acquire webpage content from the server rather than

using cached content. This command persists until you clear it or the Internet Explorer

instance is closed.

Clear Browser Cache...

(Ctrl+R) Deletes the browser cache and all temporary files.

Clear Browser Cache for

this Domain... (Ctrl+B) Deletes only the browser cache and all temporary files that belong to the current domain.

Disable Cookies Disables the use of all cookies from this Internet Explorer instance. This command persists

until you clear it or the Internet Explorer instance is closed.

Clear Session Cookies Deletes all cookies acquired during this browser session.

Clear Cookies for Domain Deletes all cookies from the current domain.

View Cookie Information Generates a list of all cookies stored in Internet Explorer, and reports it in a new Internet

Explorer instance. See the cookie property reference on how to work with cookies.

Tools menu

This menu provides various tools that help you with common tasks, such as testing a site in different resolutions, changing the user agent string, measuring areas of the page, and capturing the specific color of a point on the page.

Menu Description



item

Resize

Provides a sub menu with some predefined screen sizes offered, and an option to customize a screen size.

After a predefined screen size is selected, the Internet Explorer window resizes immediately to t

selected. The sub menu provides four preset sizes (with shortcuts), and a custom setting.

800x600Ctrl+Shift+1

1024x768Ctrl+Shift+2



Custom(no shortcut)

The custom setting brings up a dialog box where yCustom entries remain after you close the browser, so you can use them again in future testing sessions.

Change

user

agent

string

Lets you change the user agent string that is sent to a website when you requeThere are a set of preset user agent strings, and a custom option. The custom option shows a dialog box to enter your own string. After the custom items are saved, they appear on the Change user agent stringchanging the docmode will override custom User Agent settings.

Page 14 of

53


After a predefined screen size is selected, the Internet Explorer window resizes immediately to t


The custom setting brings up a dialog box where you can enter your own screen sizes to test. Custom entries remain after you close the browser, so you can use them again in future

Lets you change the user agent string that is sent to a website when you requeThere are a set of preset user agent strings, and a custom option. The custom option shows a dialog box to enter your own string. After the custom items are saved, they appear on the Change user agent string submenu. Refresh the page for changes to appear. Be aware that changing the docmode will override custom User Agent settings.

May 20, 2012


After a predefined screen size is selected, the Internet Explorer window resizes immediately to the dimension


ou can enter your own screen sizes to test. Custom entries remain after you close the browser, so you can use them again in future

Lets you change the user agent string that is sent to a website when you request a webpage. There are a set of preset user agent strings, and a custom option. The custom option shows a dialog box to enter your own string. After the custom items are saved, they appear on the

ges to appear. Be aware that



Clear

entries on

navigate

Lets you clear or persist new webpage in a debugging session. By defaulmessages, and the network tab capture logs when you leave a page.

Show

Ruler

(Ctrl+L)

Allows you to measure any arbitrary objects on the screen. The options and hints for using the tool. magnifying glass is also available. Press show the ("x,y") coordinates of each end of the ruler relative to where the points are on the screen, and the length is shown in pixels at the center of the ruler. The measurements also appear on the bottom of the can be moved, resized, and reWhen done, click the X button at the upperdialog box to hide all rulers. Open the

Show

Color

Picker

(Ctrl+K)

Shows a color picker tool to sample colors from any objecdialog box shows the color sample that the picker is on. Color Picker also shows the color's RGB and HEX values. To see the color value used on a webpage, click the color of intertest with the eyedropper cursor. Click in your webpage. Click the X button or box.

Outline

elements

Helps you understand and debug page layout by making it easy to identify the size and position of elements. You can set a color to identify all elements of a certain element type. Use CSS selector syntax to specify elements on a webpage. For example, to highlight all paragraphs, use p in the selector field, and set a color. For more informatioselectors, see Understanding CSS Selectors

Page 15 of

53

Lets you clear or persist console messages and the network tab log when you navigate to a new webpage in a debugging session. By default, Internet Explorer clears all console messages, and the network tab capture logs when you leave a page.

Allows you to measure any arbitrary objects on the screen. The Ruleroptions and hints for using the tool. Multiple colors and rulers are supported. For precision, a magnifying glass is also available. Press CTRL+M to toggle the magnifier on or off. Rulers show the ("x,y") coordinates of each end of the ruler relative to where the points are on the

the length is shown in pixels at the center of the ruler. The measurements also appear on the bottom of the Ruler dialog box when you move the cursor over a ruler. A ruler can be moved, resized, and re-angled. To remove a ruler, select it and press the When done, click the X button at the upper-right corner to close the dialog box. Close the dialog box to hide all rulers. Open the Ruler dialog box to show them.

Shows a color picker tool to sample colors from any object on the page. The dialog box shows the color sample that the picker is on. Color Picker also shows the color's RGB and HEX values. To see the color value used on a webpage, click the color of intertest with the eyedropper cursor. Click Copy and Close to copy the value to the clipboard for use in your webpage. Click the X button or Hide color picker on this menu to close the dialog

Helps you understand and debug page layout by making it easy to identify the size and ition of elements. You can set a color to identify all elements of a certain element type.

Use CSS selector syntax to specify elements on a webpage. For example, to highlight all in the selector field, and set a color. For more informatio

Understanding CSS Selectors.

May 20, 2012

tab log when you navigate to a t, Internet Explorer clears all console

Ruler dialog box opens with Multiple colors and rulers are supported. For precision, a

to toggle the magnifier on or off. Rulers show the ("x,y") coordinates of each end of the ruler relative to where the points are on the

the length is shown in pixels at the center of the ruler. The measurements also dialog box when you move the cursor over a ruler. A ruler

angled. To remove a ruler, select it and press the Delete key. right corner to close the dialog box. Close the dialog box to show them.

t on the page. The Color Picker dialog box shows the color sample that the picker is on. Color Picker also shows the color's RGB and HEX values. To see the color value used on a webpage, click the color of intertest

to copy the value to the clipboard for use on this menu to close the dialog

Helps you understand and debug page layout by making it easy to identify the size and ition of elements. You can set a color to identify all elements of a certain element type.

Use CSS selector syntax to specify elements on a webpage. For example, to highlight all in the selector field, and set a color. For more information about using



Validate menu

This lets you validate the current webpage or a file on your computer by using validation services onthe web. A dialog box confirms that you want to take this action; otherwise, the request is canceled.

Menu item

HTML Validates the HTML of the current webpage. The validated report appears in a new window.

CSS Validates the CSS of the curre

Feed Validates the Really Simple Syndication (RSS) feeds of a webpage. The validated report appears in a new

window.

Links Validates all links in the current webpage. The validated report appears

Local

HTML... Opens a new window with the option to choose an HTML file on your computer to be validated.

Local CSS... Opens a new window with the option to choose a CSS file on your local computer to be validated.

Accessibility

Gives access to the following accessibility validators:

WCAG ChecklistThe W3C's Web Content Accessibility Guidelines (WCAG). It defines guidelines for creating

accessible webpages.

Section 508 Checklist The US government's accessibility guidelines for creating a

Multiple

validations

Lets you run one or more validations in a single request. Select the validation you want, and click OK to initiate the request. You will get only one dialog box confirming that you want to send this page to anothertab and contains the resulting validation.

Page 16 of

53

This lets you validate the current webpage or a file on your computer by using validation services onthe web. A dialog box confirms that you want to take this action; otherwise, the request is canceled.

Description

Validates the HTML of the current webpage. The validated report appears in a new window.

Validates the CSS of the current webpage. The validated report appears in a new window.

Validates the Really Simple Syndication (RSS) feeds of a webpage. The validated report appears in a new

Validates all links in the current webpage. The validated report appears in a new window.

Opens a new window with the option to choose an HTML file on your computer to be validated.

Opens a new window with the option to choose a CSS file on your local computer to be validated.

ccess to the following accessibility validators:


Section 508 Checklist The US government's accessibility guidelines for creating a

Lets you run one or more validations in a single request. Select the validation you want, to initiate the request. You will get only one dialog box confirming that you

want to send this page to another site to do the validation. Each selection opens in a new tab and contains the resulting validation.

May 20, 2012

This lets you validate the current webpage or a file on your computer by using validation services on the web. A dialog box confirms that you want to take this action; otherwise, the request is canceled.

Validates the HTML of the current webpage. The validated report appears in a new window.

nt webpage. The validated report appears in a new window.

Validates the Really Simple Syndication (RSS) feeds of a webpage. The validated report appears in a new

in a new window.

Opens a new window with the option to choose an HTML file on your computer to be validated.

Opens a new window with the option to choose a CSS file on your local computer to be validated.


Section 508 Checklist The US government's accessibility guidelines for creating accessible webpages.

Lets you run one or more validations in a single request. Select the validation you want, to initiate the request. You will get only one dialog box confirming that you

site to do the validation. Each selection opens in a new



Browser mode menu

This command allows you to test how your webpage operates for users running other versions of Internet Explorer. For example, if you cwebpages will be rendered based on that browser, and will be unable to access docmodes that are only available on later versions of Internet Explorer.

Menu item

Internet Explorer 7 Internet

Windows Internet Explorer 8 Internet Explorer 8 browser mode.

Windows Internet Explorer 9 Internet Explorer 9 browser mode. This enables HTML5, CSS3, and other standards that

Internet Explorer 9 supports.

Internet Explorer 9

compatibility view Tests how Internet Explorer 9 users experience your webpage if they choose the

Compatibility View option.

Document mode menu

This command allows you to test how your page is interpreted in other versions of Internet Explorer. Changes made to webpages affect all documents in the page, including iframes.

Menu item

Quirks mode (Alt+Q) This behavior matches that of Internet Explorer when rendering a document with no document

type or a Quirks document type. Acts the same as the

Internet Explorer 8.

Internet Explorer 7

Standards (Alt+7) This behavior matches that of Internet Explorer 7, rendering a document that has a strict or

unknown document type.

Internet Explorer 8

Standards (Alt+8) This is the most standards

document that has a strict or unknown document type.

Page 17 of

53

This command allows you to test how your webpage operates for users running other versions of Internet Explorer. For example, if you choose Windows Internet Explorer 7 browser mode, your webpages will be rendered based on that browser, and will be unable to access docmodes that are only available on later versions of Internet Explorer.

Description

Internet Explorer 7 browser mode.

Internet Explorer 8 browser mode.

Internet Explorer 9 browser mode. This enables HTML5, CSS3, and other standards that

Internet Explorer 9 supports.

Tests how Internet Explorer 9 users experience your webpage if they choose the

Compatibility View option.

This command allows you to test how your page is interpreted in other versions of Internet Explorer. ade to webpages affect all documents in the page, including iframes.

Description

This behavior matches that of Internet Explorer when rendering a document with no document

type or a Quirks document type. Acts the same as the Quirks mode of Internet Explorer 7 or

Internet Explorer 8.

This behavior matches that of Internet Explorer 7, rendering a document that has a strict or

unknown document type.

his is the most standards-compliant behavior available in Internet Explorer 8 when rendering a

document that has a strict or unknown document type.

May 20, 2012

This command allows you to test how your webpage operates for users running other versions of hoose Windows Internet Explorer 7 browser mode, your

webpages will be rendered based on that browser, and will be unable to access docmodes that are only

Internet Explorer 9 browser mode. This enables HTML5, CSS3, and other standards that

Tests how Internet Explorer 9 users experience your webpage if they choose the

This command allows you to test how your page is interpreted in other versions of Internet Explorer. ade to webpages affect all documents in the page, including iframes.

This behavior matches that of Internet Explorer when rendering a document with no document

Quirks mode of Internet Explorer 7 or

This behavior matches that of Internet Explorer 7, rendering a document that has a strict or

compliant behavior available in Internet Explorer 8 when rendering a



53

Internet Explorer 9

Standards (Alt+9) This is the most standards-compliant behavior available in Internet Explorer 9.



F12 Tools

The F12 developer tools console commands let you receive error messages from Windows Internet Explorer 9, as well as send your own messages back from your code without having to break the flow of your execution.

You can use the F12 tools console view to immediately run script statements outside your program code.

• The console tab and view

• Sending messages from code to console

• Executing script and commands in the console

• Filtering messages and extending the console object

• Related topics

THE CONSOLE TAB AND VIEW

F12 tools console messages can be viewed either from the Script tab. The console receives messages from Windows Internet Explorer when it is open, when you have an error in your code. There are a number of informational and error messages that Internet Explorer 9 can send to the console. To navigate to an error location in your code, click the source information provided in the error. If a memessage is shown the next time you open F12 tools. The following screen shot shows the F12 tools console.

You can also send messages from your code to the console to log status, flag errors, or warn about issues by using the console object. Internet Explorer 9 provides four types of messages to differentiate between issues in your code - log, warn, error, and info. These messages can be used instead of using "window.alert()" when debugging, or just to keep Message strings can consist of text, variables, or expression results, or combinations of all of them. The following screen shot shows the F12 tools console that has several messages displayed.

SENDING MESSAGES FROM CODE TO CON

Page 19 of

53

F12 Tools: Console - View Errors and Status

The F12 developer tools console commands let you receive error messages from Windows Internet Explorer 9, as well as send your own messages back from your code without having to break the flow

You can use the F12 tools console view to immediately run script statements outside your program

Sending messages from code to console

d commands in the console

Filtering messages and extending the console object

F12 tools console messages can be viewed either from the Console tab, or the console pane under the tab. The console receives messages from Windows Internet Explorer when it is open,

when you have an error in your code. There are a number of informational and error messages that Internet Explorer 9 can send to the console. To navigate to an error location in your code, click the source information provided in the error. If a message occurs when F12 tools is closed, a warning message is shown the next time you open F12 tools. The following screen shot shows the F12 tools

You can also send messages from your code to the console to log status, flag errors, or warn about issues by using the console object. Internet Explorer 9 provides four types of messages to differentiate

log, warn, error, and info. These messages can be used instead of using "window.alert()" when debugging, or just to keep a running log if important state in your code. Message strings can consist of text, variables, or expression results, or combinations of all of them. The following screen shot shows the F12 tools console that has several messages displayed.

GES FROM CODE TO CONSOLE

May 20, 2012

View Errors and Status

The F12 developer tools console commands let you receive error messages from Windows Internet Explorer 9, as well as send your own messages back from your code without having to break the flow

You can use the F12 tools console view to immediately run script statements outside your program

tab, or the console pane under the tab. The console receives messages from Windows Internet Explorer when it is open, such as

when you have an error in your code. There are a number of informational and error messages that Internet Explorer 9 can send to the console. To navigate to an error location in your code, click the

ssage occurs when F12 tools is closed, a warning message is shown the next time you open F12 tools. The following screen shot shows the F12 tools

You can also send messages from your code to the console to log status, flag errors, or warn about issues by using the console object. Internet Explorer 9 provides four types of messages to differentiate

log, warn, error, and info. These messages can be used instead of using a running log if important state in your code.

Message strings can consist of text, variables, or expression results, or combinations of all of them. The following screen shot shows the F12 tools console that has several messages displayed.



53

F12 tools provides commands that can be used from within your script code to send messages, start or stop profiling, or change the window that script statements typed into the console are evaluated in.

You use the console object to send a message to the console from your code. Using the console instead of "window.alert()" when testing code is less obtrusive and doesn't stop you with a modal dialog box. This object provides a number of forms so that you can distinguish between informational messages and error messages if you want. When you use the console object, make sure that the F12 tools are open. To avoid executing needless code, use the following feature test:

HTML

Copy

if(window.console && window.console.clear)

When you test many Internet Explorer 9 objects without parentheses and parameters, they return a true value if the feature exists. In this case, we test for the console.clear() feature. You can also just check generically by just testing for the console object:

JavaScript

Copy

if (window.console){ // Add console commands here. }

window.console

The following table shows the syntax and examples of the console commands that you can use in your script.

Command Example Description

log(message)

HTML

window.console.log("This is a logging message");

Prints " message" to the console prefaced by

"LOG:".

warn(message)

HTML

window.console.warn("This is a warning message");

Prints warning " message" to the console. The

message is prefaced by a warning icon .

error(message) HTML

window.console.error("This is an error message");

Prints error " message" to the console. The

message text color is red and it is prefaced by

an error icon .



53

info(message)

HTML

window.console.info("This is an info message");

Prints an informational " message" to the

console. The message is prefaced by the

information icon .

clear()

HTML

Copy

window.console.clear();

Clears messages from the console. Does not

clear script error messages or script code you

entered into the Console command line. Right-

click the Console pane and click the Clear

Console option to clear all messages.

dir(object)

HTML

Copy

window.console.dir(oExample);

Prints the properties of "object" to the console.

assert(expression,

message)

HTML

Copy

window.console.assert((x == 1), "assert message: x != 1");

Prints a "message" if "expression" evaluates to

false.

profile(report)

HTML

Copy

window.console.profile("My profile report");

Starts recording profile information under the

title of "report". This command is equivalent to

clicking the Start profiling button on the Profile

tab.

profileEnd()

HTML

Copy

window.console.profileEnd();

Stops recording profile information under the

last report title. This command is equivalent to

clicking the Stop profiling button on the Profile

tab. "Report" can be viewed on the Profile tab.

Messaging console commands can be formatted by using substitution patterns in the style of "printf". For example, you can call "console.log" in one of the following ways:

Copy



console.log("Variable x = " + x + " and variable y = " + y)console.log("Variable x = ", x, " and variable y = ", y)console.log("Variable x = %d The console messaging methods accept optional parameters to let you replace variables in your message with values. for

example, you could have a single function report errors to the console:

JavaScript

Copy

function sendErrorConsole(errorCode) { window.console.error( }

EXECUTING SCRIPT AND COMMANDS

At the bottom of the Console tab, or the multiple line console commands or script statements. Any valid script command or expression can be executed in the console.

For example, to view a variable value, type the name in the console and press value of a variable in a script, type the assignment into the console. Press the up arrow to scroll through previously executed command.

The Console pane in the Script tab can be used whether the debugger is started or not. When execution stops at a breakpoint, the commands entered in this pane will run in the scope of the breakpoint; when execution is not paused, the commands will run in the global scope

Using cd() to execute commands across frames

Execution of script statements and commands by default is done in context of the topyou are using frames, use the "cd()" console command.

cd()

cd(window)

Allows you to change command

webpage to the window of a frame. Calling cd() without parameters returns to the top

The following illustration shows several steps that were executed in the example provided here.

Page 22 of

53

console.log("Variable x = " + x + " and variable y = " + y) console.log("Variable x = ", x, " and variable y = ", y) console.log("Variable x = %d and variable y = %d", x, y)

The console messaging methods accept optional parameters to let you replace variables in your message with values. for

example, you could have a single function report errors to the console:

sendErrorConsole(errorCode) { window.console.error("Error: %s occured", errorCode);

SCRIPT AND COMMANDS IN THE CONSOLE

tab, or the Console pane in the Script tab, you can execute single or multiple line console commands or script statements. Any valid script command or expression can be

For example, to view a variable value, type the name in the console and press value of a variable in a script, type the assignment into the console. Press the up arrow to scroll through previously executed command.

tab can be used whether the debugger is started or not. When execution stops at a breakpoint, the commands entered in this pane will run in the scope of the breakpoint; when execution is not paused, the commands will run in the global scope

Using cd() to execute commands across frames

Execution of script statements and commands by default is done in context of the topyou are using frames, use the "cd()" console command.

Allows you to change command-line expression evaluation from the default top

webpage to the window of a frame. Calling cd() without parameters returns to the top

The following illustration shows several steps that were executed in the example provided here. May 20, 2012

The console messaging methods accept optional parameters to let you replace variables in your message with values. for

, errorCode);

tab, you can execute single or multiple line console commands or script statements. Any valid script command or expression can be

For example, to view a variable value, type the name in the console and press Enter. To change a value of a variable in a script, type the assignment into the console. Press the up arrow to scroll

tab can be used whether the debugger is started or not. When execution stops at a breakpoint, the commands entered in this pane will run in the scope of the breakpoint; when execution is not paused, the commands will run in the global scope.

Execution of script statements and commands by default is done in context of the top-level window. If

ression evaluation from the default top-level window of the

webpage to the window of a frame. Calling cd() without parameters returns to the top-level window.

The following illustration shows several steps that were executed in the example provided here.



From the top of the console view, the following commands were executed:

• cd() - Prints the current window.

• cd(myframe) - Changed expression evaluation to the example frame with an id = "myframe."

• counter - Display a global variable from the iframe calle

• counter = 25 - Changes value of counter to 25.

• cd() - Changes expression evaluation back to default top

• counter - In this case, counter is not a valid variable in the top

You can change to iframes by using an ID nam"document.frames[0]" works just as well.

Executing multiple line scripts

To execute multiple line script commands, click the multiline mode button Type script into the multiline wisingle line mode, which executes a single line of script, pressing window. The resizable input window has additional controls through the rightsuch as copy and paste, and Unicode features.

Page 23 of

53

From the top of the console view, the following commands were executed:

Prints the current window.

Changed expression evaluation to the example frame with an id = "myframe."

Display a global variable from the iframe called "counter."

Changes value of counter to 25.

Changes expression evaluation back to default top-level window.

In this case, counter is not a valid variable in the top-level window.

You can change to iframes by using an ID name, or by using the frames[] collection. In this case, "document.frames[0]" works just as well.

Executing multiple line scripts

To execute multiple line script commands, click the multiline mode button into the multiline window, and then click the Run script button to execute. Unlike the

single line mode, which executes a single line of script, pressing Enter adds a line feed in the script window. The resizable input window has additional controls through the rightsuch as copy and paste, and Unicode features.

May 20, 2012

Changed expression evaluation to the example frame with an id = "myframe."

e, or by using the frames[] collection. In this case,

or press Ctrl+Alt+M. button to execute. Unlike the

adds a line feed in the script window. The resizable input window has additional controls through the right-click or shortcut menu



FILTERING MESSAGES AND EXTENDING THE CON

Console messages can be filtered from the console pane to show or hide certain classes of messages. To filter messages, right-click the appears where the filter with a check mark is active.

The console object can be extended to add new functionality. For example, you might want a custom method to output formatted debugging messagyou might add the following code snippets to your JavaScript code:

Copy

console.debug = function(name, value){ console.warn("DEBUG: " + name + "==" + value);

Page 24 of

53

ND EXTENDING THE CONSOLE OBJECT

Console messages can be filtered from the console pane to show or hide certain classes of messages. click the Console pane and hover over Filter. A list of available filters

appears where the filter with a check mark is active.

The console object can be extended to add new functionality. For example, you might want a custom method to output formatted debugging messages to the console. To add a "console.debug" command, you might add the following code snippets to your JavaScript code:

console.debug = function(name, value){ console.warn("DEBUG: " + name + "==" + value);

May 20, 2012

Console messages can be filtered from the console pane to show or hide certain classes of messages. . A list of available filters

The console object can be extended to add new functionality. For example, you might want a custom es to the console. To add a "console.debug" command,



53

}

This example takes in two arguments and outputs them to the Console pane with some minimal formatting. You can customize function arguments and behavior however you want. In this way, the console object can be used to add any number of new commands you may need.

Note Because you are using existing console commands within your new command, Filter will still be applied. For example, the console.debug command in the previous example uses console.warn to output messages to the Console pane. If you clear Console Warnings from the Filter list, none of the output from console.warn will show up in the Console pane.



53

F12 tools: console error messages

The F12 developer tools console can report error and informational messages that occur during runtime. This article describes the error messages and offers suggestions for how to fix the errors.

INTRODUCTION

F12 tools console error messages provide codes that provide information about the error, for example, SEC7111 or HTML1114. These codes and messages appear in both the Console and Script tabs in F12 tools. For JavaScript programmers, these codes are thrown from Windows Internet Explorer. ActiveX and Browser extension developers can also send these errors and messages.

The tables later in this topic are broken into sections that include the code, the message, a description, and when appropriate, suggestions to fix the problem. While the descriptions in the table provide a starting point for debugging problems, the best way to get information is to visit online developer forums or the Internet Explorer developer center.

SECURITY ERRORS

These errors are in the form SEC7xxx, such as SEC7113. These reflect security conditions that Windows Internet Explorer 9 enforces, such as mixed content, and Tracking Protection.

Code Message Description Suggested fix

SEC7111 HTTPS security is

compromised by [name of

resource]

Secure Hypertext Transfer

Protocol (HTTPS) page also has

unsecured (mixed) content.

Do not include unsecured content on a HTTPS

page

SEC7112 Script from [URL] was

blocked due to mime type

mismatch

The HTTP response header for the

JavaScript file that is specified by

the URL has an "X-Content-Type-

Options: nosniff "header, and did

not have a content type

declaration.

Add the correct content type for the JavaScript

file (such as text/javascript,

application/javascript, and so on) See MIME-

Handling Changes in Internet Explorer for more

information and a full list of content types.

SEC7113 CSS was ignored due to

mime type mismatch

An imported style sheet was not

used due to the wrong MIME type

in the HTTP header.

Ensure style sheet file is delivered with the

proper HTTP response header, which includes a

content type of text\css. See MIME-Handling

Changes in Internet Explorer for more

information.

SEC7114

A download in this page

was blocked by Tracking

Protection.[URL provided

here]

User blocked script or content by

using Tracking Protection. None - user initiated.

SEC7115

:visited and :link styles

can only differ by color.

Some styles were not

applied to :visited.

More than one attribute, such as

font or size, were changed by

using the visited and link styles. Change only the color attribute.



53

Note For websites in a users trusted security zone, Internet Explorer will not check the MIME type of a style sheet.

HTML CODES

These codes are in the form of HTML1xxx, such as HTML1115. They can specify errors or states that the developer might or might not be able to control.


HTML1112 Codepage restart from

[encoding] to [encoding] A codepage was specified that was

different than the server. Use same codepage as server to avoid

message.

HTML1113 Document mode restart

from [mode] to [mode]

The webpage requires a different

document mode than the browser

was currently set to.

This message can occur when the user

browses from another page, so it can be

out of the developer's control.

HTML1114

Codepage [codepage] from

[domain] overrides

conflicting codepage

[codepage] from [domain]

Conflicting codepages specified in

the http header and markup for a

website. Fix codepage conflict.

HTML1115

X-UA-Compatible META tag

("[META tag]") ignored

because document mode is

already finalized

Typically the "META" tag was placed

after a "Script" or "Style" declaration,

which fixed the document mode for

the page.

Move the X-UA-Compatible META tag as

early in the header as possible. A good

practice is to put it immediately after the

"<title>" and charset value.

HTML1116

X-UA-Compatible META tag

("[META tag]") ignored

because of earlier X-UA-

Compatible META tag

("[META tag]")

There are more than one "X-UA-

Compatible""META" tag in the

"<head>" section of the source code.

Remove all but one "X-UA-Compatible

META" tag, and ensure it is as early in the

header as possible. A good practice is to

put it immediately after the "<title>" and

charset value.

HTML1200

[domain] is on the Internet

Explorer 9 Compatibility

View List ('[path to local

Compatibility View List]').

The current website is listed on

Internet Explorer's internal list.

Website developers can follow guidelines

to remove their site from the

Compatibility View list. The list is

periodically updated by Microsoft, so

changes can be downloaded and

reflected.

HTML1201 [domain] is a website you've

added to Compatibility View.

The user has clicked the

Compatibility View button for the

current website or added it through

the Compatibility View settings.

User initiated.

HTML1202

[domain] is running in

Compatibility View because

"Display intranet sites in

Compatibility View" is

checked.

The user has selected the Display

intranet sites in Compatibility View

check box in the Compatibility View

settings.

User needs to press <Alt> + T, click

Compatibility View settings, and then

clear the Display intranet sites in

Compatibility View check box.

HTML1203 [domain] has been

configured to run in

Compatibility View through

The network administrator has

specified that the webpage be run in

Compatibility View.

User needs to contact the network

administrator.



53

Group Policy.

HTML1204

[domain] is running in

Compatibility View because

"Display all websites in

Compatibility View" is

checked.

The user has selected the Display all

websites in Compatibility View

check box in the Compatibility View

settings.

User needs to press <Alt> + T, click

Compatibility View settings, and then

clear theDisplay all websites in

Compatibility View check box.

CSS CODES

These errors are in the form CSS31xx and are related to "Web Open Font Format (WOFF)", and "Embedded OpenType font (EOT)" source and host server problems.


CSS3111 @font-face encountered

unknown error

An unknown problem was encountered

with the "Web Open Font Format

(WOFF)", and "Embedded OpenType

font (EOT)" of the Cascading Style

Sheets (CSS) font.

Check source of "WOFF" fonts. Try alternate

font face or source to see if problem

reproduces.

CSS3112 @font-face failed WOFF

integrity check

The "Web Open Font Format (WOFF)"

font is possibly corrupt, incomplete, or

not the correct format.

Check source of the fonts. Try known good

font face or source to see if problem

reproduces.

CSS3113 @font-face mismatch

between document

origin and EOT root string

The font cannot be used because the

URL(rootstring) in the "Embedded

OpenType font (EOT)" does not match

the domain of the document using the

font.

The URL checksum in the "EOT" rootstring

might be incorrect, indicating a corrupt or

altered URL for the font. Ensure that the

font is licensed or has permissions for the

website where the fonts are being used.

CSS3114

@font-face failed

OpenType embedding

permission check.

Permission must be

Installable.

The font-face does not have

permissions to install with the current

webpage.

Obtain the correct permission or licenses for

embedding the font.

CSS3115 @font-face unable to

load invalid OpenType

font. The font-face is not valid for this use.

Obtain the permission or licenses for the

current and valid font-face.

CSS3116

@font-face failed cross-

origin request. No

Access-Control-Allow-

Origin header.

The font might not be configured for

cross-domain access.

The font is not served from the same origin

as the document. Ensure that the host

serving the font allows the use of this font

by using the "Access-Control-Allow-

Origin"HTTP header.

CSS3117 @font-face failed cross-

origin request. Resource

access is restricted.

The "Access-Control-Allow-Origin"

header might not be configured

correctly or the font host might not

allow this font to be used by your page.

Ensure that correct permissions and a

correctly configured HTTP response header

that has cross-domain access origin for the

host serving the fonts.



53

SCALABLE VECTOR GRAPHICS (SVG) CODES

F12 tools do not currently support extensive Scalable Vector Graphics (SVG) debugging, but several console messages are displayed to help debug SVG code.


SVG5601 SVG Path data has incorrect

format and could not be

completely parsed.

The SVG Path string is not formatted

correctly, or contains unrecognized

commands. Check format of commands.

SVG5602 SVG Point list has incorrect

format and could not be

completely parsed.

The list of points used for an element,

such as a polyline, is not correctly

formatted.

Ensure that points are complete and

correctly formatted for the users

coordinate system.

SCRIPT CODES

JavaScript runtime errors are also reported in F12 tools. These errors are in the form SCRIPT50xx, such as SCRIPT5001. These errors are documented on the Windows Scripting Host developer page.

XML CODES

The F12 tools console can report XML codes. These errors are in the form of XML5xxx, such as XML5603. For more information about XML, see the XmlLite Reference.

Code Message

XML5001 Applying Integrated XSLT Handling.

XML5601 MX_E_MX

XML5602 Unexpected end of input.

XML5603 Unrecognized encoding.

XML5604 Unable to switch the encoding.

XML5605 Unrecognized input encoding signature.

XML5606 WC_E_WC

XML5607 Whitespace expected.

XML5608 Semicolon expected.

XML5609 Expected ">".

XML5610 Quote character expected.

XML5611 Expected "=".

XML5612 The < character is not allowed in attributes values.



53

XML5613 Hexadecimal digit expected.

XML5614 Decimal digit expected.

XML5615 Expected "[".

XML5616 Expected "(".

XML5617 Illegal XML character.

XML5618 Illegal name character.

XML5619 Incorrect document syntax.

XML5620 Incorrect CDATA section syntax.

XML5621 Incorrect comment syntax.

XML5622 Incorrect conditional section syntax.

XML5623 Incorrect ATTLIST declaration syntax.

XML5624 Incorrect DOCTYPE declaration syntax.

XML5625 Incorrect ELEMENT declaration syntax.

XML5626 Incorrect ENTITY declaration syntax.

XML5627 Incorrect NOTATION declaration syntax.

XML5628 Expected "NDATA".

XML5629 Expected "PUBLIC".

XML5630 Expected "SYSTEM".

XML5631 Invalid name.

XML5632 Only one root element is allowed.

XML5633 End-tag name does not match the corresponding start-tag name.

XML5634 An attribute with the same name already exists on this element.

XML5635 An XML declaration is only allowed at the beginning of the file.

XML5636 Leading "xml".

XML5637 Incorrect text declaration syntax.

XML5638 Incorrect XML declaration syntax.

XML5639 Incorrect encoding name syntax.

XML5640 Incorrect public identifier syntax.

XML5641 Parameter entity references are not allowed within markup declarations in an internal DTD subset.



53

XML5642 The replacement text for parameter entity references used between markup declarations must itself contain

a series of complete markup declarations.

XML5643 A parsed entity must not contain a direct or indirect reference to itself.

XML5644 The content of the specified entity is not well-formed.

XML5645 The specified entity has not been declared.

XML5646 Entity reference cannot contain the name of an unparsed entity.

XML5647 Attribute values must not contain direct or indirect references to external entities.

XML5648 Incorrect processing instruction syntax.

XML5649 Incorrect system identifier syntax.

XML5650 Expected a question mark (?).

XML5651 The CDATA-section-close delimiter "]]>" must not be used in element content.

XML5652 Not all chunks of data have been read.

XML5653 DTD was found but is prohibited.

XML5654 Found xml:space attribute with invalid value. Valid values are "preserve" or "default".

XML5655 NC_E_NC

XML5656 Illegal qualified name character.

XML5657 Multiple colons ":" must not occur in a qualified name.

XML5658 A colon ":" must not occur in a name.

XML5659 Declared prefix.

XML5660 The specified prefix has not been declared.

XML5661 Non-default namespace declarations must not have an empty URI.

XML5662 The "xml" prefix is reserved and must have the URI "http://www.w3.org/XML/1998/namespace".

XML5663 The "xmlns" prefix is reserved for use by XML.

XML5664 The xml namespace URI (http://www.w3.org/XML/1998/namespace) must only be assigned to the prefix

"xml".

XML5665 The xmlns namespace URI (http://www.w3.org/2000/xmlns/) is reserved and must not be used.

XML5666 SC_E_SC

XML5667 Exceeded maximum depth of nested elements.

XML5668 Exceeded maximum number of entity expansions.



53

XML5669 WR_E_WR

XML5670 WR_E_NONWHITESPACE: writer: specified string is not whitespace.

XML5671 WR_E_NSPREFIXDECLARED: writer: namespace prefix is already declared with a different namespace.

XML5672 WR_E_NSPREFIXWITHEMPTYNSURI: writer: cannot use prefix with empty namespace URI.

XML5673 WR_E_DUPLICATEATTRIBUTE: writer: duplicate attribute.

XML5674 WR_E_XMLNSPREFIXDECLARATION: writer: can not redefine the xmlns prefix.

XML5675 WR_E_XMLPREFIXDECLARATION: writer: xml prefix must have the

http://www.w3.org/XML/1998/namespace URI.

XML5676 WR_E_XMLURIDECLARATION: writer: xml namespace URI (http://www.w3.org/XML/1998/namespace) must

be assigned only to prefix "xml".

XML5677 WR_E_XMLNSURIDECLARATION: writer: xmlns namespace URI (http://www.w3.org/2000/xmlns/) is

reserved and must not be used.

XML5678 WR_E_NAMESPACEUNDECLARED: writer: namespace is not declared.

XML5679 WR_E_INVALIDXMLSPACE: writer: invalid value of xml:space attribute (allowed values are "default" and

"preserve").

XML5680 WR_E_INVALIDACTION: writer: performing the requested action would result in invalid XML document.

XML5681 WR_E_INVALIDSURROGATEPAIR: writer: input contains invalid or incomplete surrogate pair.

XML5682 Unexpected character in character entity. Expected a decimal digit.

XML5683 Unexpected character in character entity. Expected a hexadecimal digit.

XML5684 The Unicode value of the specified character entity is invalid.

XML5685 Invalid encoding.

XML5686 Unspecified XML error.



53

F12 Tools: JavaScript Errors

F12 developer tools enables web developers to quickly debug JavaScript code without leaving the browser. Built into every installation of Windows Internet Explorer 9, F12 tools provides debugging tools such as breakpoints, watch and local variable viewing, and a console for messages and immediate code execution.

• Starting and Stopping the Debugger

• Using the Console to Find Syntax and Other Code Errors

• Make Ugly Scripts Pretty

• Breaking Code Execution

• Managing Multiple Breakpoints by using the Breakpoints Tab

• Conditional Breakpoints

• Stepping Through your Code

• Watching Variables with the Watch and Locals Tabs

• Looking at the Call Stack

• Debugging Multiple Scripts

• Changing the Document Mode Setting

• Related topics

This topic discusses how to use the F12 tools to debug your JavaScript code. The purpose is not to be a comprehensive debugging tutorial, but to highlight the tools that can help get you started working with your own code. From Internet Explorer 9, press F12 to open the tools, and click the Script tab to get started.

In the Script tab, you see the source pane on the left, where you can view your JavaScript code, set breakpoints, and step through the execution path of your functions. In the right pane, you can switch between the console, watch variables, local variables, watch stack, and breakpoint tabs.

STARTING AND STOPPING THE DEBUGGER

When you first open the F12 tools and click the Script tab, your code appears on the left and the console on the right. In the console you might see a message: "Refresh the page to see messages that may have occurred before the F12 tools were opened. " When you refresh the webpage, the console shows you any errors or warnings that the browser has raised.

To be able to set breakpoints, view watch and local variables, and see the call stack of a series of functions, click the Start debugging button. By pressing the Start debugging button, you refresh the webpage and restart the code in the debugger.

USING THE CONSOLE TO FIND SYNTAX AND OTHER CODE ERRORS

In most coding projects, errors usually consist of syntax, logical, or data input errors. The console view shows JavaScript errors and exceptions, as well as Document Object Model (DOM) exceptions. From inside your code, you can use the console object to send status and program error messages to the console, rather than user "alert()" calls, or screen real estate. For example, you can add a line such as

Copy



53

window.console.log("The file opened successfully"); to your JavaScript code to get the status in a script without breaking the execution. For more information about using the

console, see Using the F12 Tools Console to View Errors and Status.

MAKE UGLY SCRIPTS PRETTY

F12 tools can debug JavaScript on a line or statement level, whether or not the code is displayed that way. Scripts that are condensed so that they appear as a big block of code can still be stepped through. However, it is hard to follow the logic sometimes when the code is in a single block.

To format, or "pretty print" a script, click the Configuration button , and then click Format JavaScript. The following screen shots show before and after formatting a block of JavaScript code.



BREAKING CODE EXECUTION

Setting breakpoints in F12 tools is similar to binary code debugthe left pane, click to the left of the line of code you want to break on. Breakpoints are toggled, so you click to add them, and click again to remove them.

Page 35 of

53

Setting breakpoints in F12 tools is similar to binary code debuggers like Microsoft Visual Studio. In the left pane, click to the left of the line of code you want to break on. Breakpoints are toggled, so you click to add them, and click again to remove them.

May 20, 2012

gers like Microsoft Visual Studio. In the left pane, click to the left of the line of code you want to break on. Breakpoints are toggled, so you



You can add as many breakpoints as you want to your code. and click Insert breakpoint, or click in the left margin next to the statement you want to break on.

With F12 tools, you can set a breakpoint at the statement level, even if those statements are in a multistatement block or line. This allows you to break within a condensed section of code. The best way to set a breakpoint under these conditions is to rightshortcut menu. You can also use the script formatting (plines to make it easier to click in the margin.

MANAGING MULTIPLE BREAKPOINTS BY USING T

If you have a large codebase that has many breakpoints or even across multiple files, the tab can help you keep track of them all. In the right pane. See the following image for an example.

Page 36 of

53

You can add as many breakpoints as you want to your code. You can either right, or click in the left margin next to the statement you want to break on.

With F12 tools, you can set a breakpoint at the statement level, even if those statements are in a multint block or line. This allows you to break within a condensed section of code. The best way to

set a breakpoint under these conditions is to right-click the code, and click Insert breakpointshortcut menu. You can also use the script formatting (pretty print) described previously to format the lines to make it easier to click in the margin.

EAKPOINTS BY USING THE BREAKPOINTS TAB

If you have a large codebase that has many breakpoints or even across multiple files, the tab can help you keep track of them all. In the Script tab, click the Breakpointsright pane. See the following image for an example.

May 20, 2012

You can either right-click a line of code , or click in the left margin next to the statement you want to break on.

With F12 tools, you can set a breakpoint at the statement level, even if those statements are in a multi-nt block or line. This allows you to break within a condensed section of code. The best way to

Insert breakpoint from the retty print) described previously to format the

If you have a large codebase that has many breakpoints or even across multiple files, the Breakpoints Breakpoints tab in the property or



From the Breakpoints tab, you can enable or disable, delete, select, and copy breakpoints withouhaving to go to the exact place you set them. To turn a breakpoint on or off, click the check box next to the setting that you want to change. You can jump immediately to the breakpoint in the code by double-clicking the listing as well. You can select mand clicking on several breakpoints.

The Breakpoints tab also has a shortcut menu (available when you rightdelete, enable, disable, or copy breakpoints. The options are shown

Menu item

Delete Removes a breakpoint permanently.

Delete all Removes all breakpoints permanently.

Enable all Sets all check boxes in the list.

Disable all Clears all check boxes in the list.

Condition Lets you set a conditional breakpoint for a single breakpoint. This option is disabled when multiple

breakpoints are selected.

Copy Copies the text of selected breakpoint descriptions.

Select all Highlights all breakpoints in the list.

Go To source

code Navigates left code pane to show the selected breakpoint. This option is disabled when multiple


CONDITIONAL BREAKPOINTS

Breaking unconditionally on a line of code is helpful, but breaking when a property or variable reaches a specific value is even more powerful. To break when a specific value is reached or set, set the breakpoint and then open the BreakpointsCondition.

In the condition dialog box, add a valid JavaScript statrunning at that breakpoint if the statement is true. For example, in the following image, the code stops running when the oAudio.paused property is false.

Page 37 of

53

tab, you can enable or disable, delete, select, and copy breakpoints withouhaving to go to the exact place you set them. To turn a breakpoint on or off, click the check box next to the setting that you want to change. You can jump immediately to the breakpoint in the code by

clicking the listing as well. You can select multiple breakpoints by pressing the and clicking on several breakpoints.

tab also has a shortcut menu (available when you right-click) that allows you to bulk delete, enable, disable, or copy breakpoints. The options are shown in the following table.

What it does

Removes a breakpoint permanently.

Removes all breakpoints permanently.

Sets all check boxes in the list.

Clears all check boxes in the list.

ou set a conditional breakpoint for a single breakpoint. This option is disabled when multiple


Copies the text of selected breakpoint descriptions.

Highlights all breakpoints in the list.

gates left code pane to show the selected breakpoint. This option is disabled when multiple


Breaking unconditionally on a line of code is helpful, but breaking when a property or variable reaches c value is even more powerful. To break when a specific value is reached or set, set the

Breakpoints tab. Right-click the breakpoint you want to use, and click

In the condition dialog box, add a valid JavaScript statement. When you run the code, it will stop running at that breakpoint if the statement is true. For example, in the following image, the code stops running when the oAudio.paused property is false.

May 20, 2012

tab, you can enable or disable, delete, select, and copy breakpoints without having to go to the exact place you set them. To turn a breakpoint on or off, click the check box next to the setting that you want to change. You can jump immediately to the breakpoint in the code by

ultiple breakpoints by pressing the Control key,

click) that allows you to bulk in the following table.

ou set a conditional breakpoint for a single breakpoint. This option is disabled when multiple

gates left code pane to show the selected breakpoint. This option is disabled when multiple

Breaking unconditionally on a line of code is helpful, but breaking when a property or variable reaches c value is even more powerful. To break when a specific value is reached or set, set the

click the breakpoint you want to use, and click

ement. When you run the code, it will stop running at that breakpoint if the statement is true. For example, in the following image, the code stops



53

You can have a single condition, or by using logical statements, break on a more complex condition. Keep in mind though that the scope for variables and objects will be the same as if you were inspecting them in the watch window at the breakpoint. If you use a condition that is not in scope, the condition will not evaluate as true.

STEPPING THROUGH YOUR CODE

When code execution stops at a breakpoint, you can use the navigation buttons to continue (F5), Break all (Ctrl+Shift+B), or step into (F11), step over (F10), or step out (Shift+F11) of a function. While execution is paused at a breakpoint or being stepped through, the debugging window is essentially modal.

Because of this, you need to stop debugging (Shift+F5) , or continue (F5) before interacting again with the webpage. This is good to keep in mind if your webpage appears to become unresponsive . If you have a number of windows open and the debugger is not on top, it could be waiting for a response on a breakpoint. If this happens, find the debugging window for that webpage and press F5 to continue, or press Shift+F5 to stop debugging, to return control to your webpage.

WATCHING VARIABLES WITH THE WATCH AND LOCALS TABS

The Watch tab allows you to set and watch variables in your code. It lists the name, value, and type of variables you specify. You can click the line marked click to add... in the Watch tab and type in a variable name. If you do not want to type the variable name, you can copy and paste it into the watch list.

The watch variable list displays values whether you are debugging code or not. When you have debugging turned on and are tracing through code, or have breakpoints set, the scope of the variable values in the list are where you are in the script. If debugging is turned off, the scope is global, and only global variables will show values.

Unlike the Watch tab, which shows variables whether in or out of scope, the Locals tab views shows only variables in the current scope. You do not need to add variables to watch, as it updates with all the variables available as the scope changes.

To see the difference, open the following example in Internet Explorer 9 and follow the steps.

HTML

Copy

<!DOCTYPE html> <html> <head> <title>JavaScript debugging example</title> <script type="text/javascript"> //create a global variable for our <div> var display;



53

function init() { //initialize only after the HTML has been loaded display = document.getElementById("results"); } function firstParam() { //set breakpoint here var a = 5; secondParam(a); } function secondParam(a) { var b = 10; thirdParam(a, b); } function thirdParam(a, b) { var c = 15; var d = a + b + c; //display to console if F12 tools is open if (window.console && window.console.log) { window.console.log(a + " + " + b + " + " + c + " = " + d); } else { display.innerText = a + " + " + b + " + " + c + " = " + d; } } </script> </head> <body onload="init();"> <p><button onclick="firstParam();">Run</button></p> <div id="results"></div> </body> </html>

1. In Internet Explorer 9, load the example.

2. Press F12 to open the F12 tools, and click the Script tab

3. In the left pane, scroll to the first function, right-click the line that says "var a = 5;", and click Insert breakpoint.

HTML

Copy

function firstParam() { //set breakpoint here var a = 5; secondParam(a); }



4. Click Start debugging, and then on the webpage in the browser, click the

5. In F12 tools, click the Watch tab on the right side, and add the variables "a, b, c, and d.".

6. Step through your code by pressing

Watch tab.

You should see the watched values change from undefined to a value as you step through each function.

To see the difference with the Localsthe Run button on the webpage to rerun the code and return to the F12 tools. In the right pane of the Script tab, click the Locals tab, and press list, notice that only the variables that have a value are listed. The arguments that are passed to a function, their value, and type.

LOOKING AT THE CALL STACK

The Call stack tab lets you see the path that is taken as functions are called fromhelp uncover an unexpected code path as a result of a bug. From the click any of the functions and be taken to that call in the source code.

Try the example mentioned previously and look at the functions.

Page 40 of

53

, and then on the webpage in the browser, click the Run button.

tab on the right side, and add the variables "a, b, c, and d.".

Step through your code by pressing F11, or by clicking the Step into button, and watch the variables on the

You should see the watched values change from undefined to a value as you step through each

Locals tab, press F5 to continue out of F12 tools. In the browser, click button on the webpage to rerun the code and return to the F12 tools. In the right pane of the

tab, and press F11 to step through the functions again. In the local variable t only the variables that have a value are listed. The Locals view also shows the

arguments that are passed to a function, their value, and type.

tab lets you see the path that is taken as functions are called fromhelp uncover an unexpected code path as a result of a bug. From the Call stackclick any of the functions and be taken to that call in the source code.

Try the example mentioned previously and look at the Call stack tab while you trace through the

May 20, 2012

button.

tab on the right side, and add the variables "a, b, c, and d.".

button, and watch the variables on the

You should see the watched values change from undefined to a value as you step through each

2 tools. In the browser, click button on the webpage to rerun the code and return to the F12 tools. In the right pane of the

to step through the functions again. In the local variable view also shows the

tab lets you see the path that is taken as functions are called from your code. This can Call stack tab, you can double-

tab while you trace through the



53

In the Call stack tab, the current function or location is always on the top (pointed to by the arrow, both in the Call stack tab, and in the code margin). When you double-click any of the functions in the list, the statement that called the function is highlighted.

DEBUGGING MULTIPLE SCRIPTS

Larger webpages typically include several JavaScript files. F12 tools lets you operate across multiple script files as you debug your code. To view a different file, click the down arrow next to the Start debugging button to show a list of scripts that are associated with the webpage. When you use F12 tools to step through code, F12 tools will follow the execution path through multiple files. You can add variables to watch from any script file, and the call stack view shows the execution path across functions contained in different script files.

CHANGING THE DOCUMENT MODE SETTING

The Document Mode setting on the right side of the Menu bar is available in any tab of F12 tools, but it can be especially helpful when debugging code in the Scripts tab. Internet Explorer 9 lets you change the document mode to emulate the standards of previous versions of Windows Internet Explorer. In Internet Explorer 9, leaving off a <!doctype> declaration causes the doctype to default to Quirks Mode. When working with a new feature or standard, such as HTML5 audio or canvas, some bugs that might appear to be coding errors could actually be a missing or wrong doctype declaration.

Internet Explorer 9 F12 tools cannot fix your code for you, but it can make finding JavaScript errors a little easier.



F12 Tools

The F12 developer tools can help you find and fix errors in HTML and Cascading Style Sheets (CSS) code that might otherwise be hard to find in your source code. By showing your HTML and CSS code in a Document Object Model (DOM) tree as Windows Internet Explorer interprets the source, code such as dynamically generated changes are easier to debug.

This topic includes the following sections:

• Using the HTML Tab

• Changing Numeric CSS Values in the CSS Tab

• Search and Save Changes

• Related topics

USING THE HTML TAB

The HTML tab view shows your webpageWindows Internet Explorer 9 in memory. It reflects the DOM when F12 tools is opened, and needs to be refreshed if changes are made. You can navigate the tree directly by using the mouse or the keyboard, and view attributes, and change values.

To jump to a specific element on a webpage, press button. On the webpage, elements are highlighted as you hover your mouse over them. When you click an element, that node in the DOM tree is highlighted in the HTML view.

Page 42 of

53

F12 Tools: Debug HTML and CSS

The F12 developer tools can help you find and fix errors in HTML and Cascading Style Sheets (CSS) code that might otherwise be hard to find in your source code. By showing your HTML and CSS code

ct Model (DOM) tree as Windows Internet Explorer interprets the source, code such as dynamically generated changes are easier to debug.

This topic includes the following sections:

Changing Numeric CSS Values in the CSS Tab

The HTML tab view shows your webpage's dynamic markup in a tree view as represented by Windows Internet Explorer 9 in memory. It reflects the DOM when F12 tools is opened, and needs to be refreshed if changes are made. You can navigate the tree directly by using the mouse or the

d view attributes, and change values.

To jump to a specific element on a webpage, press Ctrl+B or click the Select element by clickbutton. On the webpage, elements are highlighted as you hover your mouse over them. When you click

n the DOM tree is highlighted in the HTML view.

May 20, 2012

The F12 developer tools can help you find and fix errors in HTML and Cascading Style Sheets (CSS) code that might otherwise be hard to find in your source code. By showing your HTML and CSS code

ct Model (DOM) tree as Windows Internet Explorer interprets the source, code

's dynamic markup in a tree view as represented by Windows Internet Explorer 9 in memory. It reflects the DOM when F12 tools is opened, and needs to be refreshed if changes are made. You can navigate the tree directly by using the mouse or the

Select element by click button. On the webpage, elements are highlighted as you hover your mouse over them. When you click



53

When you select an element in the HTML tab, you can use the View > Source menu to filter your view to either the elements you have selected with their associated CSS styles, or just by themselves.

The Element source with style button shows just the selected element's HTML source and its content, along with the CSS that applies to it, in a new window. This helps to focus on the sources of the selected element only. An HTML element within the body of the DOM tree must be selected by using the HTML tab view before this command can be run. To select an element, click the Select element by click button, or click an element in the DOM tree. When you use Select element by click, it is a good idea to refresh the view first.

To expand or collapse the properties of an element, click the box marked with a plus (+ )or minus (-) sign. All elements in the HTML and CSS views are editable, and the edits take effect immediately. Style rules and attributes can be turned on or off by clicking the check box next to the element name.

Viewing Dynamic HTML Code

Most websites use dynamic code. Client side scripting is often used to generate the rendered HTML that the user sees. Static HTML code is often minimal and only used to get things started on the page. Because F12 tools displays HTML and CSS code as it is rendered in the browser, and not the strict HTML source, finding errors is easier.

The HTML tab shows the current state of the DOM and does not automatically track changes. If you change a value or attribute, and it does not display immediately, refresh the view by pressing F5 in the HTML tab.



53

Changing Values and Adding Attributes

F12 tools allows you to change the value of almost any attribute or property. From within the HTML tab, select an element either from the DOM tree, or by using the Select element by click button. In the properties view (right pane), click a value to highlight and change.

For example, open the CSS sample page from How to Add Rounded Corners with CSS3 in Internet

Explorer 9 and press F12 to open the tools. Click the Select element by click button , and click the maroon Now in stock at Fourth Coffee title. In the properties pane, click the color attribute under the "h2" selector. Type a new color name or value, such as blue, and press Enter. The color of the heading changes immediately.

To add an attribute, right-click an element in the left pane of the HTML or CSS tab, and then click Add attribute in the context menu. You need to know the format of the attribute, such as "background-color:", and the correct values.

To remove an attribute, either one you added or existing ones, click the attribute in the right pane view, and then press the Delete key. For attributes in the original page, you can get them back by refreshing the webpage. Added attributes need to be reapplied.

If you just want to turn off an attribute temporarily during a session, clear the check box next to the attribute in the right pane of either the HTML or CSS tab.

HTML Tab Views and Tools

When you select an element in the left pane tree view, on the right, you can view and change styles, box model layout, and attributes for the selected and child elements. Changes you make are not permanent and will be lost when you refresh or open another page. However, you can save your HTML code by clicking the Save button.

When you view multiple CSS rules that apply to a selected element in the Style and Trace Style tabs, the rules are displayed based on their specificity according to the CSS specification. The rule at the top of the list is the first to get applied to the selected element, while the rule at the bottom is the one that currently defines the style properties of a selected element. The values of these rules are editable: Click a value, type a new value, and press "Enter". A change appears on the webpage immediately. The information found in both property types are the same. However, in the Trace Style property type, the same information is grouped by properties that have the rules displayed below them. The properties are listed in alphabetical order and the rules are again ordered based on specificity.



• Style displays the rules and styles for an element that you select in the tree view. It is organized by rules and

includes inherited and overriden attributes.

• Trace Styles shows the same informat

Page 45 of

53

displays the rules and styles for an element that you select in the tree view. It is organized by rules and

includes inherited and overriden attributes.

shows the same information as Style, but is grouped by properties rather than rules.

May 20, 2012

displays the rules and styles for an element that you select in the tree view. It is organized by rules and

ion as Style, but is grouped by properties rather than rules.



• Layout shows the box model for the selected element. Any value in the Layout view can be changed by clicking it

in the diagram. The Layout tab is disabled for Scalable Vector Graphics (SVG) el

• Attributes shows the attributes, such as ID, for a selected element. Attributes can be added or removed

Page 46 of

53

shows the box model for the selected element. Any value in the Layout view can be changed by clicking it

tab is disabled for Scalable Vector Graphics (SVG) elements.

shows the attributes, such as ID, for a selected element. Attributes can be added or removed

May 20, 2012

shows the box model for the selected element. Any value in the Layout view can be changed by clicking it

ements.

shows the attributes, such as ID, for a selected element. Attributes can be added or removed



Right-click Menu on the HTML Tab

As mentioned previously, you can rightthe options you can use in the HTML tab.

Menu item

Add attribute Adds a new attributes to a tag or an element.

Copy Copies the tag and attributes to the clipboard.

Copy InnerHTML Copies the InnerHTML content (child text, elements, and attributes

Copy OuterHTML Copies the OuterHTML content (child text, elements, and attributes) of an element to the clipboard.

If you click a child node of an element in the HTML tab, such as the text element of an "h2" tag, you might not get all the options. If you do not see the option you want, go to the parent element and try again.

Inspecting CSS Rules

The CSS tab shows you the interplay among your style sheets. This tab is most useful for sites that use multiple style sheets. To switch between style sheets, use the style sheet chooser. When you select a style sheet, the rules and their associated style properties appear in the left pane. By default, this button shows the first style sheet referenced in your webpage. Click thesheet if there is more than one style sheet being used on the webpage.

Shortcut Menu options on the

When you right-click the CSS tab, the shortcut menu offers more options than the HTML tab. The enabled options are context sensitive and depend on where you click in the CSS tab.

Menu item What it does

Page 47 of

53

click Menu on the HTML Tab

As mentioned previously, you can right-click an element in the left pane of the HTML tab. Here are ions you can use in the HTML tab.

What it does

Adds a new attributes to a tag or an element.

Copies the tag and attributes to the clipboard.

Copies the InnerHTML content (child text, elements, and attributes) of an element to the clipboard.

Copies the OuterHTML content (child text, elements, and attributes) of an element to the clipboard.

If you click a child node of an element in the HTML tab, such as the text element of an "h2" tag, you ight not get all the options. If you do not see the option you want, go to the parent element and try

The CSS tab shows you the interplay among your style sheets. This tab is most useful for sites that use . To switch between style sheets, use the style sheet chooser. When you select a

style sheet, the rules and their associated style properties appear in the left pane. By default, this button shows the first style sheet referenced in your webpage. Click the drop-down list to select another style sheet if there is more than one style sheet being used on the webpage.

Shortcut Menu options on the CSS Tab

click the CSS tab, the shortcut menu offers more options than the HTML tab. The tions are context sensitive and depend on where you click in the CSS tab.

What it does Where to right

May 20, 2012

click an element in the left pane of the HTML tab. Here are

) of an element to the clipboard.

Copies the OuterHTML content (child text, elements, and attributes) of an element to the clipboard.

If you click a child node of an element in the HTML tab, such as the text element of an "h2" tag, you ight not get all the options. If you do not see the option you want, go to the parent element and try

The CSS tab shows you the interplay among your style sheets. This tab is most useful for sites that use . To switch between style sheets, use the style sheet chooser. When you select a

style sheet, the rules and their associated style properties appear in the left pane. By default, this button down list to select another style

click the CSS tab, the shortcut menu offers more options than the HTML tab. The tions are context sensitive and depend on where you click in the CSS tab.

Where to right-click



Add attribute Adds a new attribute to a tag or an element.

Add rule Add a selector, declaration, or style.

Add rule after Adds a selector or rule after the current rule.

Add rule before. Adds a selector or rule before the current rule.

Delete attribute. Deletes the selected attribute.

Delete rule Deletes the selected rule and all related attributes.

CHANGING NUMERIC CSS VALUES IN THE CSS TA

Values for CSS properties can be changed as almost any other property in FCSS properties by clicking the property value and typing a new value. In the CSS tab, you can also use the up and down arrow keys to increment or decrement numeric values.

SEARCH AND SAVE CHANGES

Like with the rest of the tabs in the F12 tools, you can search for specific tags, properties, attributes, or values with the Search box in both the HTML and CSS tabs. When you click the instances of the keyword are highlighted, and the pane scrolls to show the first mat

If there are multiple matches, you can scroll forward and back using the

Changes you make, such as adjusting a box model or adding an attribute, are not persistant. When you reload the page in the browser or navigate tochanges to a local copy of the HTML/CSS file, click the

Page 48 of

53

Adds a new attribute to a tag or an element. On either a rule or an attribute (any element).

laration, or style. In the white area, not on an existing element.

Adds a selector or rule after the current rule. On any element.

Adds a selector or rule before the current rule. On any element.

es the selected attribute. On any attribute.

Deletes the selected rule and all related attributes. On any rule or selector.

VALUES IN THE CSS TAB

Values for CSS properties can be changed as almost any other property in F12 tools. You can change CSS properties by clicking the property value and typing a new value. In the CSS tab, you can also use the up and down arrow keys to increment or decrement numeric values.

the F12 tools, you can search for specific tags, properties, attributes, or box in both the HTML and CSS tabs. When you click the

instances of the keyword are highlighted, and the pane scrolls to show the first mat

If there are multiple matches, you can scroll forward and back using the Next

Changes you make, such as adjusting a box model or adding an attribute, are not persistant. When you reload the page in the browser or navigate to another webpage, any changes you make are lost. To save changes to a local copy of the HTML/CSS file, click the Save button on the left pane.

May 20, 2012

On either a rule or an attribute (any element).

In the white area, not on an existing element.

On any rule or selector.

12 tools. You can change CSS properties by clicking the property value and typing a new value. In the CSS tab, you can also use

the F12 tools, you can search for specific tags, properties, attributes, or box in both the HTML and CSS tabs. When you click the Search button, all

instances of the keyword are highlighted, and the pane scrolls to show the first match.

and Previous buttons.

Changes you make, such as adjusting a box model or adding an attribute, are not persistant. When you another webpage, any changes you make are lost. To save

button on the left pane.



53

F12 Tools: Code Profiler to analyze performance

The F12 developer tools provide a built-in script profiler that enables you to analyze the performance of JavaScript code running in Windows Internet Explorer 9. This topic explains the features of this tool and how you can use it to check the performance of your scripts.

PROFILING YOUR SCRIPT

To get started, open the page you want to profile in Internet Explorer 9. In Internet Explorer 9, press F12 to open F12 tools, and then click the Profiler tab.

The profiler lets you start and stop profiling and offers several views or reports of functions, the number of times they were run, and the time each took to run.

When you first click the Profiler tab, the grid is empty. Click the Start profiling button, and then run the code that you want profiled in the browser. If you want to start from the initial load of the webpage, click Refresh to run the code on the page. Click Stop profiling when you want to stop collecting data and view the results. To profile just a section of code, click Start profiling, run just that section in the browser (such as a function called from a button click), and then click Stop profiling.

VIEWING PROFILE REPORTS

Reports from the profiler tool are automatically generated when you click Stop profiling. Each profiler session is a discrete report, so you can run a profile any number of times, such as for multiple sections of script, or modify values, and profile the same section again. Only the most current profiler report is displayed by default, but you can click the Current report drop-down list to see others.

Reports can be viewed two ways, either in functions or as call tree views. Functions view shows all the functions in the order in which they were run. The Call tree view shows the hierarchy of the functions, so you can see parent and child relationships easier.

PROFILE DATA TYPES



53

The profiler returns up to 12 columns of data from your profile. In the report, you can right-click the top of the columns and add or remove columns. The following table shows the available data.

Column

heading What it shows

Function The name of the function being profiled.

Count The total number of times this function was called.

Inclusive time

(ms) The amount of run time that passed while within that function. This includes the time spent in child or

external functions called from that function.

Inclusive time

% The percentage of run time that passed while within that function. This includes the time spent in child or


Exclusive time

(ms) The amount of run time that passed while within that function. This excludes the time spent in child or


Exclusive time

% The percentage of run time that passed while within that function. This excludes the time spent in child

or external functions called from that function.

Avg time (ms) The average time spent in this function and its children and external functions.

Max time (ms) The maximum time spent in this function and its children and external functions.

Min time (ms) The minimum time spent in this function and its children and external functions.

Function type Type of function - DOM, user, build-in.

URL The URL of the source file where this function is defined.

Line number The line number for the beginning of this function in the source code.

Inclusive and exclusive times can give some indication of problems in the code. Inclusive time provides the total time of the function, and any functions called or called by its children. Exclusive time shows only the time actually spent inside that specific function. It is possible to have a very high inclusive time on a function, but the exclusive time is minimal. For example:

Copy

function bar() { // do some work for a 250 milliseconds } function foo() { // do some work for 200 milliseconds and then call bar() bar(); } function main() { //do some work for 50 milliseconds then call foo() foo();



}

In this example, the function "main()" is calwhich takes 200 milliseconds, and then calls "bar()", which works for 250 milliseconds before it is done. The following chart shows the values that inclusive and exclusive times might show.

Function Inclusive time Exclusive time

main() 500ms 50ms

foo() 450ms 200ms

bar() 250ms 250ms

Inclusive time for each function is the time that the function takes to run, plus all the time the functions that follow it (children) take to run. Exclusive time is function, as the last one in the chain, shows the same time for both.

SEARCH AND SORT REPORTS

You can search for specific functions in your reports with the F12 toolscorner of the tool. Type all or part of a name into the Enter. All instances of the keyword are highlighted, and the report scrolls to the first occurrence. You can navigate between the matches by pressing result buttons.

When you search in the Call treeexpanded.

Click the header of any visible column to sort by that data. You can toggle between ascending descending by clicking the heading again. You can also rightclick Sort by, and then choose the column you want.

When you sort in the Call tree report view, only the values at the top level functions are sortedchild functions stay in their hierarchy order.

COPYING AND SAVING REPORTS

You can copy all or some of the information in the profiler reports by selecting the rows and pressing Ctrl+C or right-click and click Copy

Page 51 of

53

In this example, the function "main()" is called, which works for 50 milliseconds, then calls "foo()", which takes 200 milliseconds, and then calls "bar()", which works for 250 milliseconds before it is done. The following chart shows the values that inclusive and exclusive times might show.

Exclusive time

Inclusive time for each function is the time that the function takes to run, plus all the time the functions that follow it (children) take to run. Exclusive time is only the current function's time. The "bar()" function, as the last one in the chain, shows the same time for both.

You can search for specific functions in your reports with the F12 toolsSearchtool. Type all or part of a name into the Search box and click the search button or press

. All instances of the keyword are highlighted, and the report scrolls to the first occurrence. You can navigate between the matches by pressing Enter or Shift + Enter, or click the

Call tree view, all parent functions above the functions that match are

Click the header of any visible column to sort by that data. You can toggle between ascending descending by clicking the heading again. You can also right-click the data area in the

, and then choose the column you want.

report view, only the values at the top level functions are sortedchild functions stay in their hierarchy order.

You can copy all or some of the information in the profiler reports by selecting the rows and pressing Copy. To select all rows, press Ctrl + A, and then press

May 20, 2012

led, which works for 50 milliseconds, then calls "foo()", which takes 200 milliseconds, and then calls "bar()", which works for 250 milliseconds before it is done. The following chart shows the values that inclusive and exclusive times might show.

Inclusive time for each function is the time that the function takes to run, plus all the time the functions only the current function's time. The "bar()"

Search box in the upper-right box and click the search button or press

. All instances of the keyword are highlighted, and the report scrolls to the first occurrence. You , or click the Next or Previous

view, all parent functions above the functions that match are

Click the header of any visible column to sort by that data. You can toggle between ascending and click the data area in the Profiler tab,

report view, only the values at the top level functions are sorted. The

You can copy all or some of the information in the profiler reports by selecting the rows and pressing and then press Ctrl+C.



53

To export directly to a comma-delimited (.csv) file, click the Export icon (next to Start profiling button). The export function saves all rows, including the headings, while copy and paste only includes the selected rows, with no headings.



53

Back Page

Documentation

Discovering IE Developer Tools http://msdn.microsoft.com/en-us/library/dd565628(v=vs.85).aspx

How to use F12 Developer Tools http://msdn.microsoft.com/en-us/library/ie/gg589507(v=vs.85).aspx

Cool tricks with IExplorer Developer Tools http://blogs.msdn.com/b/marcelolr/archive/2011/06/06/cool-tricks-with-internet-explorer-developer-tools-and-datajs.aspx

Documents

Iexplorer f12 Tool