Using the F12 Tools Console to View Errors and Status
This content refers to an older version of F12 developer tools. Please visit our latest F12 tools documentation.
The F12 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
- Using cd() to execute commands across frames
- Executing multiple line scripts
- Filtering messages and extending the console object
- Related topics
The console tab and view
F12 tools console messages can be viewed either from the Console tab, or the console pane under the Script 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 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 console.
.png)
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 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.
.png)
Sending messages from code to console
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:
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:
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) | window.console.log("Logging message"); | Prints " message" to the console prefaced by "LOG:". |
| warn(message) | window.console.warn("Warning message"); | Prints warning " message" to the console. The message is prefaced by a warning icon .png) . |
| error(message) | indow.console.error("Error message"); | Prints error " message" to the console. The message text color is red and it is prefaced by an error icon .png) . |
| info(message) | window.console.info("Info message"); | Prints an informational " message" to the console. The message is prefaced by the information icon .png) . |
| clear() | 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) | window.console.dir(oExample); | Prints the properties of "object" to the console. |
| assert(expression, message) | window.console.assert((x == 1), "assert message: x != 1"); | Prints a "message" if "expression" evaluates to false. |
| profile(report) | 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() | 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:
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:
function sendErrorConsole(errorCode) {
window.console.error("Error: %s occured", errorCode);
}
Executing script and commands in the console
At the bottom of 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 executed in the console.
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 through previously executed command.
.png)
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 top-level window. If you are using frames, use the "cd()" console command.
cd() cd(window) |
Allows you to change command-line expression 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.
.png)
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 called "counter."
- counter = 25 - Changes value of counter to 25.
- cd() - Changes expression evaluation back to default top-level window.
- counter - 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 .png)
or press Ctrl+Alt+M. Type script 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 right-click or shortcut menu such as copy and paste, and Unicode features.
.png)
Filtering messages and extending the console object
Console messages can be filtered from the console pane to show or hide certain classes of messages. To filter messages, right-click the Console pane and hover over Filter. A list of available filters appears where the filter with a check mark is active.
.png)
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);
}
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.