Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 926927 of Web Console

  • Revision slug: Tools/Web_Console
  • Revision title: Web Console
  • Revision id: 926927
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment

Revision Content

The Web Console:

  1. 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
  2. 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:

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") }}

Revision Source

<p>The Web Console:</p>

<ol>
 <li>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</li>
 <li>Enables you to interact with a web page by executing JavaScript expressions in the context of the page</li>
</ol>

<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Web_Console/Opening_the_Web_Console">Opening the Web Console</a></dt>
 <dd>What you need to get started.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">The command line interpreter</a></dt>
 <dd>An overview of the main pieces of a WebExtension.</dd>
 <dt>Split console</dt>
 <dd>An overview of the main pieces of a WebExtension.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Web_Console/Console_messages">Console messages</a></dt>
 <dd>An example walkthrough of a simple WebExtension.</dd>
 <dt>Rich output</dt>
 <dd>How to prepare a WebExtension for installation, and install it.</dd>
 <dt>Keyboard shortcuts</dt>
 <dd>An overview of the main pieces of a WebExtension.</dd>
</dl>
</div>
</div>

<p>&nbsp;</p>

<p>&nbsp;</p>

<dl>
</dl>

<p>&nbsp;</p>

<h2 id="The_command_line_interpreter"><a name="command-line">The command line interpreter</a></h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display:block; margin-left:auto; margin-right:auto" /></p>

<h3 id="Entering_expressions">Entering expressions</h3>

<p>To enter expressions just type into the command line and press <kbd>Enter</kbd>. To enter multiline expressions, use <kbd>Shift</kbd><kbd>Enter</kbd> instead of <kbd>Enter</kbd>.</p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display:block; margin-left:auto; margin-right:auto" /></p>

<h3 id="Accessing_variables">Accessing variables</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display:block; margin-left:auto; margin-right:auto" /><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display:block; margin-left:auto; margin-right:auto" /></p>

<h3 id="Autocomplete">Autocomplete</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display:block; margin-left:auto; margin-right:auto" />Type <kbd>Enter</kbd> or <kbd>Tab</kbd> 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.</p>

<p>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.</p>

<p>You get autocomplete suggestions for array elements, as well:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display:block; margin-left:auto; margin-right:auto" /></p>

<h3 id="Defining_variables">Defining variables</h3>

<p>You can define your own variables, and then access them:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display:block; margin-left:auto; margin-right:auto" /><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display:block; margin-left:auto; margin-right:auto" /></p>

<h3 id="Command_history">Command history</h3>

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

<p>From Firefox 39 onwards, this history is persisted across sessions. To clear the history, use the <code>clearHistory()</code> <a href="/en-US/docs/Tools/Web_Console#Helper_commands">helper function</a>.</p>

<h3 id="Working_with_iframes">Working with iframes</h3>

<p>If a page contains embedded <a href="/en-US/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> 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 <code>cd()</code>:</p>

<p>You can pass the iframe DOM element:</p>

<pre class="brush: js">
var frame = document.getElementById("frame1");
cd(frame);</pre>

<p>You can pass a CSS selector that matches the iframe:</p>

<pre class="brush: js">
cd("#frame1");</pre>

<p>You can pass the iframe's global window object:</p>

<pre class="brush: js">
var frame = document.getElementById("frame1");
cd(frame.contentWindow);
</pre>

<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p>

<pre class="brush: js">
cd();</pre>

<p>For example, suppose we have a document that embeds an iframe:</p>

<pre class="brush: html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>The iframe defines a new function:</p>

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

<p>You can switch context to the iframe like this:</p>

<pre class="brush: js">
cd("#frame1");</pre>

<p>Now you'll see that the global window's document is the iframe:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display:block; height:75px; margin-left:auto; margin-right:auto; width:632px" />And you can call the function defined in the iframe:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display:block; height:77px; margin-left:auto; margin-right:auto; width:632px" /></p>

<h3 id="Helper_commands">Helper commands</h3>

<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>

<h2 id="Rich_output_for_objects">Rich output for objects</h2>

<p>When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Web_Console#Type-specific_rich_output">provides extra information for certain types</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console#Examining_object_properties">enables detailed examination of the object's properties</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">provides richer information for DOM elements, and enables you to select them in the Inspector</a></li>
</ul>

<h3 id="Type-specific_rich_output">Type-specific rich output</h3>

<p>The Web Console provides rich output for many object types, including the following:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>Object</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display:block; height:39px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
  <tr>
   <td><code>Array</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display:block; height:38px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
  <tr>
   <td><code>Date</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display:block; height:39px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
  <tr>
   <td><code>Promise</code></td>
   <td>
    <div class="geckoVersionNote">
    <p>New in Firefox 36</p>
    </div>

    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display:block; height:76px; margin-left:auto; margin-right:auto; width:600px" /></p>
   </td>
  </tr>
  <tr>
   <td><code>RegExp</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display:block; height:39px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
  <tr>
   <td><code>Window</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display:block; height:38px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
  <tr>
   <td><code>Document</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display:block; height:39px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
  <tr>
   <td><code>Element</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display:block; height:39px; margin-left:auto; margin-right:auto; width:600px" /></td>
  </tr>
 </tbody>
</table>

<h3 id="Examining_object_properties">Examining object properties</h3>

<p>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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display:block; margin-left:auto; margin-right:auto" />To dismiss this panel press <kbd>Esc</kbd>..</p>

<h3 id="Highlighting_and_inspecting_DOM_nodes">Highlighting and inspecting DOM nodes</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display:block; margin-left:auto; margin-right:auto" />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 <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Inspector</a> with that node selected.</p>

<h2 id="The_split_console">The split console</h2>

<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>

<p>You can use the console alongside other tools. While you're in another tool in the Toolbox, just press <kbd>Esc</kbd> or press the "Toggle split console" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p>

<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display:block; margin-left:auto; margin-right:auto" />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:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display:block; margin-left:auto; margin-right:auto" /></p>

<h2 id="Keyboard_shortcuts">Keyboard shortcuts</h2>

<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}</p>

<h3 id="Global_shortcuts">Global shortcuts</h3>

<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
Revert to this revision