La Consola Web:
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.
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.
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
- 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
Most of the Web Console is occupied by the message display pane:
The message display pane displays the following sorts of messages:
- HTTP requests
- Input/output messages: commands send to the browser via the Web Console's command line, and the result of executing them.
Each message is displayed as a single row in the pane.
HTTP requests are logged with a line that looks like this:
- Time: the time the message was recorded
- Category: this 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
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".
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.
Warnings and errors are logged with a line looking something like this:
- 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: this indicates what sort of message this is:
- Blue: CSS warning/error
- Red: security warning/error
- Type: an icon indicating whether it is an error(☓) or a warning(⚠).
- 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: a link to the filename and line number that generated the message
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:
|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
Introduced in Firefox 26
|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
Introduced in Firefox 26
|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.
Introduced in Firefox 26
|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.
Introduced in Firefox 26
|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.
Introduced in Firefox 26
|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.
Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.
Reflow events are logged under the CSS category, 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:
Click the link to open the file in the Debugger.
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.
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.
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.
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:
You can access variables defined in the page, both built-in variables like
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.
New in Firefox 28
Starting from Firefox 28, 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.
If the result object is an object it appears in square brackets and is underlined, like this:
[object Function]. Click on it, and you'll see a new panel appear containing details of the object:
To dismiss this panel press "Escape".
You can define your own variables, and then access them:
The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.
|↑||Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.|
|↓||Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.|
|Ctrl-A||Moves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)|
|Ctrl-E||Moves the cursor to the end of the line.|
|Return||Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.|
|Shift-Return||Expands the height of the text input box for the command line by a line.|
|Escape||Cancels the autocompletion popup.|
|Tab||Generates an autocomplete suggestion and accepts the first one.|
Looks up a CSS selector string
selector, returning the first node descended from
elementthat matches. If unspecified,
document. Equivalent to
document.querySelector()or calls the $ function in the page, if it exists.
See the QuerySelector code snippet.
- Looks up a CSS selector string
selector, returning an array of DOM nodes descended from
elementthat match. If unspecified,
document. This is like for
document.querySelectorAll(), but returns an array instead of a
- The currently-inspected element in the page.
- Stores the result of the last expression executed in the console's command line. For example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4.
$x(xpath, element, resultType)
- Evaluates the XPath
xpathexpression in the context of
elementand returns an array of matching nodes. If unspecified,
document. The resultType parameter specifies the type of result to return; it can be an XPathResult constant, or a corresponding string:
"nodes"; if not provided,
- (Starting in Firefox 80) Followed by an unquoted string, blocks requests where the URL contains that string. In the Network Monitor, the string now appears and is selected in the Request Blocking sidebar. Unblock with
- Clears the console output area.
- Just like a normal command line, the console command line remembers the commands you've typed. Use this function to clear the console's command history.
- Copies the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its
outerHTMLis copied. Otherwise,
JSON.stringifywill be called on the argument, and the result will be copied to the clipboard.
help()Deprecated since Gecko 62
- Displays help text. Actually, in a delightful example of recursion, it brings you to this page.
- Given an object, generates rich output for that object. Once you select the object in the output area, you can use the arrow keys to navigate the object.
- Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for
pprint() Obsolete since Gecko 74
- Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
- Creates a screenshot of the current page with the supplied filename. If you don't supply a filename, the image file will be named with the following format:
Screen Shot yyy-mm-dd at hh.mm.ss.png
The command has the following optional parameters:
Command Type Description
boolean When present, this parameter will cause the screenshot to be copied to the clipboard.
number The number of seconds to delay before taking the screenshot.
number The device pixel ratio to use when taking the screenshot.
boolean When present, the screenshot will be saved to a file, even if other options (e.g.
--clipboard) are included.
string The name to use in saving the file. The file should have a ".png" extension.
boolean If included, the full webpage will be saved. With this parameter, even the parts of the webpage which are outside the current bounds of the window will be included in the screenshot. When used, "-fullpage" will be appended to the file name.
string The CSS query selector for a single element on the page. When supplied, only this element will be included in the screenshot.
- (Starting in Firefox 80) Followed by an unquoted string, removes blocking for URLs containing that string. In the Network Monitor, the string is removed from the Request Blocking sidebar. No error is given if the string was not previously blocked.
- Given an object, returns a list of the values on that object; serves as a companion to
Please refer to the Console API for more information about logging from content.
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.
$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: