Web Console

The Web Console:

  1. logs information associated with a web page: any network requests, JavaScript, CSS, and security errors and warnings, as well as error, warning, and informational messages explicitly logged by JavaScript code running in the page context
  2. enables you to interact with a web page by executing JavaScript expressions in the context of the page

It's part of the replacement for the old Error Console built into Firefox: but the Error Console showed errors, warnings, and messages from all web pages, from the browser's own code, and from add-ons. This makes it much more difficult to see which messages are relevant to a specific page. The Web Console is always associated with a specific web page and only shows information associated with that page.

The other half of the replacement for the Error console is the Browser Console, which shows errors, warnings, and messages from the browser's code and from add-ons.

Opening the Web Console

To open the Web Console select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut.

The Toolbox will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the DevTools toolbar):

Underneath the DevTools Window's own toolbar, the Web Console's interface is split into three sections:

  • Toolbar: along the top is a toolbar containing buttons with labels like "Net", "CSS", and "JS". This toolbar is used to filter which messages are displayed
  • Command Line: along the bottom is a command line that you can use to enter JavaScript expressions
  • Message Display Pane: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages

Message Display Pane

Most of the Web Console is occupied by the message display pane:

The message display pane displays the following sorts of messages:

Each message is displayed as a separate row:

Time The time the message was recorded. From Firefox 28 onwards this is not shown by default, and you can opt to see timestamps using a setting in the Toolbox.
Category

Category: this indicates what sort of message this is:

  • Black: HTTP request
  • Blue: CSS warning/error/log
  • Orange: JavaScript warning/error
  • Red: security warning/error
  • Light Gray: messages explicitly logged from JavaScript code using the console API
  • Dark Gray: input/output from the interactive command line interpreter
Type For all messages except HTTP requests and interactive input/output, an icon indicating whether it is an error(X), a warning(!), or an informational log message (i).
Message The message itself.
Number of occurrences If a line that generates a warning or error is executed more than once, it is only logged once, and this counter appears to indicate how many times it was encountered.
Filename and line number For JavaScript, CSS, and console API messages, the message can be traced to a specific line of code. The console then provides a link to the filename and line number that generated the message.

HTTP requests

HTTP requests are logged with a line that looks like this:

Time The time the message was recorded.
Category Indicates that the message is an HTTP request.
Method The specific HTTP request method
URI The target URI
Summary The HTTP version, status code, and time taken to complete.

If you click on the message, you'll see a window like this, containing more details about the request and response:

Scrolling down reveals the response headers. By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies", reload the page, and you'll then see them in the "Inspect Network Request" window.

Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.

From Firefox 30 onwards, Network log messages are not shown by default.

JavaScript errors and warnings

JavaScript messages look like this:

From Firefox 30 onwards, JavaScript warnings are not shown by default.

CSS errors, warnings, and reflow messages

CSS messages look like this:

By default, CSS warnings and log messages are not shown.

Reflow events

The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the DOM in JavaScript.

Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from JavaScript, which code triggered them.

Reflow events are logged as "Log" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the toolbar and selecting "Log".

Each message is labeled "reflow" and shows the time taken to execute the reflow:

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

Click the link to open the file in the Debugger.

Synchronous and asynchronous reflows

If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.

However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls window.getComputedStyle(thing).height:

var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;

Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.

Security warnings and errors

Security warnings and errors look like this:

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

The complete list of security messages is as follows:

Message Details
Blocked loading mixed active content The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display content The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure page The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure page The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored. See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead. See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen. Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header. See HTTP Strict Transport Security for more details.

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

console API messages


This section describes the Web Console output for those console API calls that actually result in output. For more general documentation on the console API, please refer to its documentation page.

Error messages

API Message content
error()

The argument to error().

console.error("an error");
exception() An alias for error().
assert()

New in Firefox 29.

If the assertion succeeds, nothing. If the assertion fails, the argument:

console.assert(false, "My assertion always fails");

Warning messages

API Message content
warn()

The argument to warn().

console.warn("a warning");

Info messages

API Message content
info()

The argument to info().

console.info("some info");

Log messages

API Message content
count()

This message is new in Firefox 30.

The label supplied, if any, and the number of times this occurrence of count() has been called with the given label:

console.count(user.value);

log()

The argument to log().

console.log("logged");
trace()

Stack trace:

console.trace();
dir()

Listing of the object's properties:

var user = document.getElementById('user');
console.dir(user);
time()

Notification that the specified timer started.

console.time("t");
timeEnd()

Duration for the specified timer.

console.timeEnd("t");

Grouping messages

You can use console.group() to create indented groups in the console output. See Using groups in the console for more information on this.

Input/output messages

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

Filtering and searching

You can use the toolbar along the top to constrain the results displayed.

You can display only specific types of messages or only message containing specific strings.

Finally, you can use this toolbar to clear the log.

The command line interpreter

You can interpret JavaScript expressions in real time using the command line provided by the Web Console.

Entering expressions

To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".

The expression you type is echoed in the message display window, followed by the result:

Accessing variables

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript like jQuery:

Autocomplete

The command line has autocomplete: enter the first few letters and a popup appears with possible completions:

Type "Enter" or "Tab" to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

From Firefox 30, you get autocomplete suggestions for array elements, as well:

Inspecting objects

If the result object is an object it appears in italics. Click on it, and you'll see a new panel appear containing details of the object:

To dismiss this panel press "Escape".

Before Firefox 30, inspectable objects appear in square brackets and underlined, like this: [object Function].

Defining variables

You can define your own variables, and then access them:

Highlighting and inspecting nodes

This feature is new in Firefox 30.

If you hover the mouse over any DOM element in the console output, it's highlighted in the page:

In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the Inspector with that node selected.

Command history

The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.

Working with iframes

This feature is new in Firefox 30.

If a page contains embedded iframes, you can use the cd() command to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using cd():

You can pass the iframe DOM element:

var frame = document.getElementById("frame1");
cd(frame);

You can pass a CSS selector that matches the iframe:

cd("#frame1");

You can pass the iframe's global window object:

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

To switch the context back to the top-level window, call cd() with no arguments:

cd();

For example, suppose we have a document that embeds an iframe:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

The iframe defines a new function:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script>
      function whoAreYou() {
        return "I'm frame1";
      }
   </script>
  </head>
  <body>
  </body>
</html>

You can switch context to the iframe like this:

cd("#frame1");

Now you'll see that the global window's document is the iframe:

And you can call the function defined in the iframe:

Helper commands

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

$()
Looks up a CSS selector string, returning the first element that matches. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.
$$()
Looks up a CSS selector string, returning a list of DOM nodes that match. This is a shortcut for document.querySelectorAll().
$0
The currently-inspected element in the page.
$x()
Evaluates an XPath expression and returns an array of matching nodes.
keys()
Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.
values()
Given an object, returns a list of the values on that object; serves as a companion to keys().
clear()
Clears the console output area.
inspect()
Given an object, opens the object inspector for that object.
pprint()
Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
help()
Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
cd()
Switch JavaScript evaluation context to a different iframe in the page. See working with iframes.
Please refer to the Console API for more information about logging from content.

The split console

The split console is new in Firefox 28.

Starting in Firefox 28, you can use the console alongside other tools. While you're in another tool in the Toolbox, just press "Escape" or press the "Toggle split console" button in the Toolbar. The toolbox will now appear split, with the original tool above and the web console underneath.

As usual, $0 works as a shorthand for the element currently selected in the Inspector:

When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:

Keyboard shortcuts

  Windows Mac OS X Linux
Open the Web Console Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K
Search in the message display pane Ctrl + F Cmd + F Ctrl + F
Clear the object inspector pane Escape Escape Escape
Focus on the command line Ctrl + Shift + K Cmd + Opt + K Ctrl + Shift + K

Command line interpreter

These shortcuts apply when you're in the command line interpreter.

  Windows Mac OS X Linux
Scroll up through console output Page up Page up Page up
Scroll down through console output Page down Page down Page down
Go backwards through command history Up arrow Up arrow Up arrow
Go forward through command history Down arrow Down arrow Down arrow
Move to the beginning of the line Home Cmd + A Ctrl + A
Move to the end of the line End Cmd + E Ctrl + E
Execute the current expression Return Return Return
Add a new line, for entering multiline expressions Shift + Return Shift + Return Shift + Return

Autocomplete popup

These shortcuts apply while the autocomplete popup is open:

  Windows Mac OS X Linux
Choose the current autocomplete suggestion Tab Tab Tab
Cancel the autocomplete popup Escape Escape Escape
Move to the previous autocomplete suggestion Up arrow Up arrow Up arrow
Move to the next autocomplete suggestion Down arrow Down arrow Down arrow
Scroll up through autocomplete suggestions Page up Page up Page up
Scroll down through autocomplete suggestions Page down Page down Page down

Global shortcuts

These shortcuts work in all tools that are hosted in the toolbox.

  Windows Mac OS X Linux
Increase font size Ctrl + + Cmd + + Ctrl + +
Decrease font size Ctrl + - Cmd + - Ctrl + -
Reset font size Ctrl + 0 Cmd + 0 Ctrl + 0

Attachments

File Size Date Attached by
detailspanel.png
138238 bytes 2010-10-21 18:23:38 Sheppy
web-console
466381 bytes 2013-07-12 16:54:12 wbamberg
web-console-message-annotated
25191 bytes 2013-07-15 15:05:09 wbamberg
web-console-input-output
18466 bytes 2013-07-15 15:37:17 wbamberg
web-console-message-request-annotated
21517 bytes 2013-07-15 20:09:06 wbamberg
web-console-commandline-highlighted
202479 bytes 2013-07-16 12:35:35 wbamberg
web-console-messages-highlighted
209201 bytes 2013-07-16 12:35:51 wbamberg
web-console-toolbar-highlighted
201515 bytes 2013-07-16 12:36:05 wbamberg
web-console-reflow-asynch
10573 bytes 2013-10-29 17:26:35 wbamberg
web-console-reflow-synch
13480 bytes 2013-10-29 17:29:31 wbamberg
web-console-split-inspector
361709 bytes 2013-12-13 15:38:33 wbamberg
web-console-split-debugger
179015 bytes 2013-12-13 15:42:59 wbamberg
js-error-annotated
24058 bytes 2014-02-10 20:30:49 wbamberg
console-api-message-annotated
19465 bytes 2014-02-10 20:39:03 wbamberg
sec-error-annotated
29017 bytes 2014-02-10 20:50:25 wbamberg
api-assert
11865 bytes 2014-02-11 15:24:20 wbamberg
api-error
10422 bytes 2014-02-11 15:24:33 wbamberg
api-info
10610 bytes 2014-02-11 15:24:40 wbamberg
api-log
10277 bytes 2014-02-11 15:24:47 wbamberg
api-time
10497 bytes 2014-02-11 15:24:54 wbamberg
api-timeend
10443 bytes 2014-02-11 15:25:02 wbamberg
api-warn
10469 bytes 2014-02-11 15:25:18 wbamberg
api-dir
28786 bytes 2014-02-11 15:32:39 wbamberg
api-trace
17863 bytes 2014-02-11 15:32:45 wbamberg
iframe-document
19392 bytes 2014-03-18 20:07:00 wbamberg
iframe-function
14032 bytes 2014-03-18 20:07:12 wbamberg
api-count
9471 bytes 2014-03-18 20:44:46 wbamberg
commandline-accessbuiltin
17914 bytes 2014-03-19 14:35:59 wbamberg
commandline-addingvariable1
17833 bytes 2014-03-19 14:36:22 wbamberg
commandline-autocomplete
31464 bytes 2014-03-19 14:36:43 wbamberg
commandline-executejs
11997 bytes 2014-03-19 14:36:53 wbamberg
commandline-highlightnode
82285 bytes 2014-03-19 14:37:05 wbamberg
commandline-inspectobject
51564 bytes 2014-03-19 14:37:22 wbamberg
commandline-arrayautocomplete
35811 bytes 2014-03-19 15:04:47 wbamberg