Upload
jwzumwalt
View
324
Download
12
Embed Size (px)
DESCRIPTION
A developers reference for using MS IE developer F12 tool. Shows example for all major features.
Citation preview
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:
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
______________________________________________________________
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 3 of 53
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 4 of 53
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 5 of 53
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,
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
• 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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
Page 9 of 53
May 20, 2012
By: Jan Zumwalt – neatinfo.com 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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
webpage refreshes with CSS turned off. If you refresh the webpage, or start debugging script (which refreshes
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
webpage refreshes with CSS turned off. If you refresh the webpage, or start debugging script (which refreshes
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 12 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 13 of
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
1280x768Ctrl+Shift+3
1280x1024Ctrl+Shift+4
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
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.
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
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 the dimension
selected. The sub menu provides four preset sizes (with shortcuts), and a custom setting.
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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:
WCAG ChecklistThe W3C's Web Content Accessibility Guidelines (WCAG). It defines guidelines for creating
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.
WCAG ChecklistThe W3C's Web Content Accessibility Guidelines (WCAG). It defines guidelines for creating
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 18 of
53
Internet Explorer 9
Standards (Alt+9) This is the most standards-compliant behavior available in Internet Explorer 9.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 20 of
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 .
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 21 of
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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,
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 25 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 26 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 27 of
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.
Code Message Description Suggested fix
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 28 of
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.
Code Message Description Suggested fix
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 29 of
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.
Code Message Description Suggested fix
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 30 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 31 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 32 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 33 of
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 34 of
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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
breakpoints are selected.
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
breakpoints are selected.
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
breakpoints are selected.
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 38 of
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;
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 39 of
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); }
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 41 of
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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 43 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 44 of
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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
• 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.
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
• 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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 49 of
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
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 50 of
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
external functions called from that function.
Exclusive time
(ms) The amount of run time that passed while within that function. This excludes the time spent in child or
external functions called from that function.
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();
By: Jan Zumwalt – neatinfo.com
IE Explorer F12 Tool Reference
}
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 52 of
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.
By: Jan Zumwalt – neatinfo.com May 20, 2012
IE Explorer F12 Tool Reference Page 53 of
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