The Web Console:
- Logs information associated with a web page: network requests, JavaScript, CSS, security errors and warnings as well as error, warning and informational messages explicitly logged by JavaScript code running in the page context
- Enables you to interact with a web page by executing JavaScript expressions in the context of the page
{{EmbedYouTube("C6Cyrpkb25k")}}
- Opening the Web Console
- What you need to get started.
- The command line interpreter
- An overview of the main pieces of a WebExtension.
- Split console
- An overview of the main pieces of a WebExtension.
- Console messages
- An example walkthrough of a simple WebExtension.
- Rich output
- How to prepare a WebExtension for installation, and install it.
- Keyboard shortcuts
- An overview of the main pieces of a WebExtension.
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 ShiftEnter 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.
You get autocomplete suggestions for array elements, as well:
Defining variables
You can define your own variables, and then access them:
Command history
The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.
From Firefox 39 onwards, this history is persisted across sessions. To clear the history, use the clearHistory()
helper function.
Working with iframes
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
{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}
Rich output for objects
When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:
- provides extra information for certain types
- enables detailed examination of the object's properties
- provides richer information for DOM elements, and enables you to select them in the Inspector
Type-specific rich output
The Web Console provides rich output for many object types, including the following:
Object |
|
Array |
|
Date |
|
Promise |
New in Firefox 36 |
RegExp |
|
Window |
|
Document |
|
Element |
Examining object properties
When an object is logged to the console 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 Esc..
Highlighting and inspecting DOM nodes
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.
The split console
{{EmbedYouTube("G2hyxhPHyXo")}}
You can use the console alongside other tools. While you're in another tool in the Toolbox, just press Esc 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
{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}
Global shortcuts
{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}