mozilla

Revision 495255 of Web Console

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

Revision Content

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:

  • HTTP requests
  • Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the console API)
  • 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

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

Warnings and errors are logged with a line looking something like this:

  • Time: the time the message was recorded
  • Category: this indicates what sort of message this is:
    • Blue: CSS warning/error
    • Orange: JavaScript warning/error
    • Red: security warning/error
    • Light Gray: message explicitly logged from JavaScript code using the console API
  • 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

Security messages

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
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.
String Logged String Meaning
BlockMixedActiveContent 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.
BlockMixedDisplayContent 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.
LoadingMixedActiveContent
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.
LoadingMixedDisplayContent
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.
BothCSPHeadersPresent 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.
OldCSPHeaderDeprecated 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.
InsecureFormActionPasswordsPresent
Introduced in Firefox 26
Password fields present in a form with an insecure form action (a form that would be submitted using HTTP rather than HTTPS). This is a security risk that allows user login credentials to be stolen.
InsecurePasswordsPresentOnIframe
Introduced in Firefox 26
Password fields present on an insecure iframe (an iframe served over HTTP rather than HTTPS). This is a security risk that allows user login credentials to be stolen.
InsecurePasswordsPresentOnPage
Introduced in Firefox 26
Password fields present on an insecure page (a page served over HTTP rather than HTTPS). This is a security risk that allows user login credentials to be stolen.
InvalidSTSHeaders The site specified an invalid Strict-Transport-Security header.

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

Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.

The Web Console also logs reflow events. 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 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:

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.

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.

Basic operation

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.

Inspecting objects

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".

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.

Keyboard shortcuts

Shortcut Description
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.

Helper commands

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

See also

{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}

Revision Source

<p>The Web Console:</p>
<ol>
 <li>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</li>
 <li>enables you to interact with a web page by executing JavaScript expressions in the context of the page</li>
</ol>
<p>It's part of the replacement for the old <a href="/en/Error_Console" title="en/Error Console">Error Console</a> 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.</p>
<p>The other half of the replacement for the Error console is the <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a>, which shows errors, warnings, and messages from the browser's code and from add-ons.</p>
<p><iframe align="middle" allowfullscreen="" frameborder="0" height="360" scrolling="no" src="https://www.youtube.com/embed/C6Cyrpkb25k/?feature=player_detailpage" width="640"></iframe></p>
<h2 id="Opening_the_Web_Console">Opening the Web Console</h2>
<p>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&nbsp;X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut.</p>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>Underneath the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Window's own toolbar</a>, the Web Console's interface is split into three sections:</p>
<ul>
 <li><a href="#filtering-and-searching" title="#filtering-and-searching">Toolbar</a>: 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</li>
 <li><a href="#command-line" title="#command-line">Command Line</a>: along the bottom is a command line that you can use to enter JavaScript expressions</li>
 <li><a href="#message-display-pane" title="#message-display-pane">Message Display Pane</a>: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages</li>
</ul>
<h2 id="Message_Display_Pane"><a name="message-display-pane">Message Display Pane</a></h2>
<p>Most of the Web Console is occupied by the message display pane:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>The message display pane displays the following sorts of messages:</p>
<ul>
 <li>HTTP requests</li>
 <li>Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li>
 <li>Input/output messages: commands send to the browser via the Web Console's command line, and the result of executing them.</li>
</ul>
<p>Each message is displayed as a single row in the pane.</p>
<h3 id="HTTP_requests">HTTP requests</h3>
<p>HTTP requests are logged with a line that looks like this:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<ul>
 <li><strong>Time</strong>: the time the message was recorded</li>
 <li><strong>Category</strong>: this indicates that the message is an HTTP request</li>
 <li><strong>Method</strong>: the specific HTTP request method</li>
 <li><strong>URI</strong>: the target URI</li>
 <li><strong>Summary</strong>: the HTTP version, status code, and time taken to complete</li>
</ul>
<p>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".</p>
<p>If you click on the message, you'll see a window like this, containing more details about the request and response:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="width: 430px; height: 502px; display: block; margin-left: auto; margin-right: auto;" />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.</p>
<p>Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.</p>
<h3 id="Warnings_and_errors">Warnings and errors</h3>
<p>Warnings and errors are logged with a line looking something like this:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<ul>
 <li><strong>Time</strong>: the time the message was recorded</li>
 <li><strong>Category</strong>: this indicates what sort of message this is:
  <ul style="margin-left: 40px;">
   <li><span style="color:#0099ff;"><strong>Blue</strong></span>: CSS warning/error</li>
   <li><strong><span style="color:#ff8c00;">Orange</span></strong>: JavaScript warning/error</li>
   <li><span style="color:#ff0000;"><strong>Red</strong></span>: security warning/error</li>
   <li><span style="color:#a9a9a9;"><strong>Light Gray</strong></span>: message explicitly logged from JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API</li>
  </ul>
 </li>
 <li><strong>Type</strong>: an icon indicating whether it is an error(☓) or a warning(⚠).</li>
 <li><strong>Message</strong>: the message itself</li>
 <li><strong>Number of occurrences</strong>: 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.</li>
 <li><strong>Filename and line number</strong>: a link to the filename and line number that generated the message</li>
</ul>
<h4 id="Security_messages">Security messages</h4>
<p>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.</p>
<p>The complete list of security messages is as follows:</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <th scope="col">Message</th>
   <th scope="col">Details</th>
  </tr>

<tr>
 <td>
  Blocked loading mixed active content</td>
 <td>
  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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
</tr>
<tr>
  <td>Blocked loading mixed display content</td>
  <td>
  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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
</tr>
<tr>
  <td>Loading mixed (insecure) active content on a secure page    <div class="geckoVersionNote">
     Introduced in Firefox 26</div></td>

<td>
  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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
</tr>
<tr>
 <td>
  Loading mixed (insecure) display content on a secure page    <div class="geckoVersionNote">
     Introduced in Firefox 26</div></td>
 <td>
  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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
</tr>
<tr>

 <td>
  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.</td>
 <td>
  See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
</tr>
<tr>

 <td>
  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.</td>
 <td>
  See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
</tr>
<tr>

 <td>
  Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.    <div class="geckoVersionNote">
     Introduced in Firefox 26</div></td>
 <td>Pages containing login forms must be served over HTTPS, not HTTP.</td>
</tr>
<tr>
 <td>
  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.    <div class="geckoVersionNote">
     Introduced in Firefox 26</div></td>
 <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td>
</tr>

<tr>
 <td>
  Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.    <div class="geckoVersionNote">
     Introduced in Firefox 26</div></td>
 <td>iframes containing login forms must be served over HTTPS, not HTTP.</td>
</tr>

<tr>
 <td>
  The site specified an invalid Strict-Transport-Security header.</td>
 <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td>
</tr>

</table>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <th scope="col">String Logged</th>
   <th scope="col">String Meaning</th>
  </tr>
  <tr>
   <td>BlockMixedActiveContent</td>
   <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
  </tr>
  <tr>
   <td>BlockMixedDisplayContent</td>
   <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
  </tr>
  <tr>
   <td>LoadingMixedActiveContent
    <div class="geckoVersionNote">
     Introduced in Firefox 26</div>
   </td>
   <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
  </tr>
  <tr>
   <td>LoadingMixedDisplayContent
    <div class="geckoVersionNote">
     Introduced in Firefox 26</div>
   </td>
   <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td>
  </tr>
  <tr>
   <td>BothCSPHeadersPresent</td>
   <td>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 <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
  </tr>
  <tr>
   <td>OldCSPHeaderDeprecated</td>
   <td>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 <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td>
  </tr>
  <tr>
   <td>InsecureFormActionPasswordsPresent
    <div class="geckoVersionNote">
     Introduced in Firefox 26</div>
   </td>
   <td>Password fields present in a form with an insecure form action (a form that would be submitted using HTTP rather than HTTPS). This is a security risk that allows user login credentials to be stolen.</td>
  </tr>
  <tr>
   <td>InsecurePasswordsPresentOnIframe
    <div class="geckoVersionNote">
     Introduced in Firefox 26</div>
   </td>
   <td>Password fields present on an insecure iframe (an iframe served over HTTP rather than HTTPS). This is a security risk that allows user login credentials to be stolen.</td>
  </tr>
  <tr>
   <td>InsecurePasswordsPresentOnPage
    <div class="geckoVersionNote">
     Introduced in Firefox 26</div>
   </td>
   <td>Password fields present on an insecure page (a page served over HTTP rather than HTTPS). This is a security risk that allows user login credentials to be stolen.</td>
  </tr>
  <tr>
   <td>InvalidSTSHeaders</td>
   <td>The site specified an invalid <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">Strict-Transport-Security</a> header.</td>
  </tr>
 </tbody>
</table>
<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> 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.</p>
<h3 id="Reflow_events">Reflow events</h3>
<div class="geckoVersionNote">
 <p>Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.</p>
</div>
<p>The Web Console also logs reflow events. 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 <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p>
<p>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 <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p>
<p>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 <a href="#filtering-and-searching">toolbar</a> and selecting "Log".</p>
<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="width: 554px; height: 53px; display: block; margin-left: auto; margin-right: auto;" />If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="width: 554px; height: 51px; display: block; margin-left: auto; margin-right: auto;" />Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p>
<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4>
<p>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.</p>
<p>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 <code>window.getComputedStyle(thing).height</code>:</p>
<pre class="brush: js">
var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;</pre>
<p>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.</p>
<h3 id="Input.2Foutput_messages">Input/output messages</h3>
<p>Commands sent to the browser using the <a href="#command-line" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="width: 554px; height: 68px; display: block; margin-left: auto; margin-right: auto;" />The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p>
<h3 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h3>
<p>You can use the toolbar along the top to constrain the results displayed.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;" />You can display only specific types of messages or only message containing specific strings.</p>
<p>Finally, you can use this toolbar to clear the log.</p>
<dl>
</dl>
<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="Basic_operation">Basic operation</h3>
<h4 id="Entering_expressions">Entering expressions</h4>
<p>To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".</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/5615/web-console-commandline-simple.png" style="width: 632px; height: 92px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Accessing_variables">Accessing variables</h4>
<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/5609/web-console-commandline-href.png" style="width: 632px; height: 89px; display: block; margin-left: auto; margin-right: auto;" /><img alt="" src="https://mdn.mozillademos.org/files/5611/web-console-commandline-jquery.png" style="width: 632px; height: 92px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Autocomplete">Autocomplete</h4>
<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/5607/web-console-commandline-autocomplete.png" style="width: 632px; height: 125px; display: block; margin-left: auto; margin-right: auto;" />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.</p>
<h4 id="Inspecting_objects">Inspecting objects</h4>
<p>If the result object is an object it appears in square brackets and is underlined, like this: <code><u>[object Function]</u></code>. 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/5613/web-console-commandline-object-details.png" style="display: block; margin-left: auto; margin-right: auto;" />To dismiss this panel press "Escape".</p>
<h4 id="Defining_variables">Defining variables</h4>
<p>You can define your own variables, and then access them:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5605/web-console-commandline-addvariable.png" style="width: 632px; height: 125px; display: block; margin-left: auto; margin-right: auto;" /><img alt="" src="https://mdn.mozillademos.org/files/5603/web-console-commandline-addfunction.png" style="width: 632px; height: 168px; display: block; margin-left: auto; margin-right: auto;" /></p>
<h4 id="Command_history">Command history</h4>
<p>The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.</p>
<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3>
<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <td class="header">Shortcut</td>
   <td class="header">Description</td>
  </tr>
  <tr>
   <td>↑</td>
   <td>Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.</td>
  </tr>
  <tr>
   <td>↓</td>
   <td>Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.</td>
  </tr>
  <tr>
   <td>Ctrl-A</td>
   <td>Moves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)</td>
  </tr>
  <tr>
   <td>Ctrl-E</td>
   <td>Moves the cursor to the end of the line.</td>
  </tr>
  <tr>
   <td>Return</td>
   <td>Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.</td>
  </tr>
  <tr>
   <td>Shift-Return</td>
   <td>Expands the height of the text input box for the command line by a line.</td>
  </tr>
  <tr>
   <td>Escape</td>
   <td>Cancels the autocompletion popup.</td>
  </tr>
  <tr>
   <td>Tab</td>
   <td>Generates an autocomplete suggestion and accepts the first one.</td>
  </tr>
 </tbody>
</table>
<h3 id="Helper_commands">Helper commands</h3>
<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>
<dl>
</dl>
<h2 id="See_also">See also</h2>
<ul>
 <li><a href="/en/Tools/Web_Console/Helpers" title="en/Using the Web Console/Helpers">Web Console Helpers</a></li>
 <li>{{ domxref("console") }}</li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}</p>
Revert to this revision