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.

有关 Web 控制台:

  1. 可以查看与当前网页相关的日志信息: 所有的网络请求,JavaScript, CSS,和安全相关的错误与警告信息,还包括页面上 JavaScript 代码运行时产生的错误、警告及相关信息.
  2. 可以激活你和网页之间的交互, 使你可以在当前网页上下文中执行一些 JavaScript 表达式.

Firefox 上的 Web 控制台是用于替换旧的错误控制台 (Error Console) 的:  旧错误控制台会显示所有浏览器上网页和插件上的错误、警告和一些其它信息,但他并不方便查看特定网页上的信息,而这个 Web 控制台上所显示的信息都是和指定的网页相关联的。

浏览器控制台 (Browser Console)是对旧的错误控制台的另一替代工具,它可以显示 浏览器代码和插件产生的错误、警告以及消息。

打开 Web 控制台

从 Firefox 菜单中的开发者子菜单中选择 "Web 控制台" (或者 你也可以从工具菜单中的 Web 开发者子菜单中选择). 也可以通过 Ctrl+Shift+K 的快捷键打开.

打开后, 这个 工具 会出现在你的浏览器的低部, 在开发者工具中, 这个只是叫做 "控制台":

这个属于 开发者工具 之一的控制台,其视口分为三个部分:

  • 工具栏: 在工具栏的上面, 有一些按钮, 象 "网络", "CSS", 和 "JS". 这个工具栏用于过滤显示的消息.
  • 命令行: 底部是一个命令行, 你可以使用输入JavaScript表达式.
  • 消息显示面板: 在这个工具栏和命令行的中间, 是一个信息显示的窗口, 用于显示 Web 控制台的信息.

消息显示面板

 Web Console 大部分被消息显示面板所使用:

消息面板显示下面这些种类的信息:

每个消息都显示一个单独的行:

Time 用于指示信息出现的时间.(Firefox 28 以前的版本中默认不显示这个信息,您可以通过 设置来显示或隐藏它)
Category

用于指示信息的类型:

  • : HTTP 请求
  • : CSS 警告/错误/日志
  • 橙: JavaScript 警告/错误
  • : security 警告/错误
  • 浅灰色: JavaScript 代码使用 console API 所产生的信息.
  • 灰黑: 与命令行解释器交互产生的 输入/输出 信息(命令行交互信息)
Type 除了 HTTP 请求和命令行交互信息外的所有信息, 这个图标指出信息的类型是错误 (X), 警告(!), 或者只是日志信息的输出 (i).
Message 消息本身.
Number of occurrences 如果同样的错误和警告出现了多次, 控制台只会显示一行, 这里会显示一个计数器用于指示这个错误出现了多少次.
Filename and line number 如果是来自于 JavaScript, CSS, 和 console API 的消息, 我们可以捕获到消息产生的位置,并会在这里提供文件名和行数的链接。

HTTP 请求

HTTP 请求记录的行会如下显示:

Time 消息记录的时间.
Category 黑色表示这个信息是个 HTTP 请求相关的信息.
Method 特定的HTTP请求的方法
URI 目标 URI
Summary 使用的 HTTP 版本, 状态码, 和花费的时间.

点击这个消息, 你将打开查看网络请求的窗口(如下图), 此窗口中包含该网络请求的请求和响应的主体信息:

向下滚动到响应的请求头(headers), 默认情况下,Web 控制台不会记录请求和响应的主体内容,所以你需要在这条信息上单击右键选择”记录请求和响应主体”(Log Request and Response Bodies),然后重新载入页面,你将会在窗口中看到这些信息。

每个请求和响应主体的内容最多只有前 1M 的数据会被显示出来, 如果数据量很大的请求和响应显示时会被裁切。

网络信息在默认情况下不显示。

XHR

从 Firefox 38 开始,Web 控制台会显示使用XMLHttpRequest对象发起的请求,你可以通过筛选只查看网络请求中由XMLHttpRequest对象发起的请求。

JavaScript 错误和警告

JavaScript 控制台信息显示类似下图:

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

CSS 错误,警告和重排(reflow)

CSS 控制台信息显示类似下图:

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

重排事件

在 CSS 类的信息中,Web 控制台还会记录重排事件。重排是指浏览器计算页面的全部或部分布局所做的处理。在一些浏览器认为会影响页面布局的事件发生时会导致重排。许多事件可以触发重排,包括:调整浏览器窗口大小,伪类(比如 :hover),以及使用 JavaScript 操作DOM。

因为重排的消耗较大而且直接影响用户界面,它们将会给响应式网站以及 web APP 造成较大的影响。Web 控制台可以通过记录重排事件来显示出这个重排消耗的时间,如果是由 JavaScript 触发的重排,这个时间是指同步重排(synchronous reflows)时消耗的时间。

重排事件被记录为“日志”信息,以此区别于CSS类的错误和警告信息。这些信息默认是不显示的,你可以通过工具条中的“CSS”按钮来启用显示。

每一条重排消息都会有“reflow”标记,并显示了执行重排所消耗的时间:

如果是由 JavaScript 触发的同步重排(synchronous reflow),它还会显示一个链接到触发该重排的具体代码的位置的链接:

点击这个链接,将会在调试器中打开相应的文件.

同步和异步重排

如果一个更改(例如改变浏览器窗口大小或者一些 JavaScript 改变了某个元素的样式)对当前布局无效,布局不是立即的重新计算,相反,重排是在浏览器确定最终要重排的样式时才发生的。 这样浏览器可以避免做一些不必要的工作。

然而,如果有 JavaScript 代码读取了这个更改后的样式,那么浏览器必须执行同步重排(synchronous reflow)来返回这个计算后的样式。例如下面的代码,当 window.getComputedStyle(thing).height 执行时会导致立即同步重排:

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

因此,我们应该避免去交替的修改和读取一个正在被操作元素的样式,因为每当你在读取前一次修改的样式时都会强制执行了同步重排.

安全警告和错误

安全警告和错误的控制台信息显示类似下图:

控制台可以显示安全信息,以此来帮助开发者发现在他们的网站中潜在或实际存在的漏洞。此外,许多的这类信息后面还会有一个“了解更多”的链接可以链接到相关页面,帮助开发者了解相关问题的背景信息以及提供一些解决建议。

安全信息的完整列表如下:

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. 详细内容请参考内容安全策略
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. 详细内容请参考内容安全策略
Password fields present on an insecure (https://) page. This is a security risk that allows user login credentials to be stolen. 包含登录表单的页面必须使用HTTPS,而不是HTTP。
Password fields present in a form with an insecure (https://) form action. This is a security risk that allows user login credentials to be stolen. 含有密码域的表单必须通过HTTPS提交,而不是HTTP。
Password fields present on an insecure (https://) iframe. This is a security risk that allows user login credentials to be stolen. 包含登录表单的iframes必须使用HTTPS,而不是HTTP。
The site specified an invalid Strict-Transport-Security header. 详细内容请参考 HSTS(HTTP Strict Transport Security)

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.

控制台 API 的消息


这个部分用于描述 Web 控制台 API 调用的输出. 有关控制台 API 的文档概述请看 documentation page.

错误信息

API 内容
error()

传一些参数给 error().

console.error("an error");
exception() 这是 error() 的别名.
assert()

在 Firefox 29 以上.

如果断言成功, 不做任何事,如果失败, 会给参数输出:

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

警告信息

API 内容
warn()

传一些参数给 warn().

console.warn("a warning");

Info 信息

API 内容
info()

传一些参数给 info().

console.info("some info");

Log 信息

API 内容
count()

 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()

传一些参数给 log().

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

堆栈踪迹:

console.trace();
dir()

列出对象的所有属性:

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

开始一个特定的时间检查.

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

打印出指定的时间检查所花费的时间.

console.timeEnd("t");

组消息

你可以使用 console.group() 来在根据不同的内容在控制台中创建不同缩进的输出 . 详细请看  Using groups in the console .

输入/输出 消息

当给命令通过 Web Console's command line 发送出去, 可以得到响应,  象如下的信息:

这的灰黑表明这是输入/输出信息. 这有一个三角的箭头用于指导你是输入还是输出.

过滤和查找

你可以在顶部工具上面来限制结果的显示.

你可经指定信息的类型, 或者指定字符的信息.

最后, 你可以使用这个工具清除日志.

命令行解析器

你可以使用 Web 控制台提供的命令输入, 来实时的解析你的 JavaScript 的表达式.

输入表达式

你在命令行中只要输入完表达式, 然后按 "回车". 你想输入多行, 只需要使用 "Shift+Enter" 代替 "Enter".

你的表达式会送入命令行, 并接下来下面显示执行的结果:

访问变量

你可以访问在页面上以定义过的变量, 可以是浏览器内置变量象 window 或者是访问 JavaScript 和 JQuery 之类的变量:

自动完成

这个命令行有自动完成的功能: 输入前几个字符后会弹出其它可能的输入:

在这可以使用 "Enter" 或者 "Tab" 来操作提示, 可以使用上/下键头来移动到不同的提示, 或者你不想要任何提示你
直接接着输入就好了.

这个控制台的提示所使用的空间是当前执行的堆栈结构. 所以这可以取得你本地对象上的函数.

从 Firefox 30 开始, 你可以取得数组元素的相关提示:

检查对象

如果结果是对象会以斜体来显示. 点击它, 你就能见到一个详细对象信息的面板:

要退出这个显示,按 "Escape".

在 Firefox 30 以前,  对象显示是使用方括号, 象: [object Function].

定义变量

你也可以控制变量, 然后访问它:

高亮检查节点

这个特性是在新的 Firefox 30 上.

如果你给鼠标放到控制台输出的任何 DOM 元素上, 它会在页面中高亮显示:

在上面的截图中你可以看到控制台上一个蓝色的 "目标" 图标: 单击它可以切换到选择的要检查的节点Inspector.

命令历史

这个命令行会记住你的命令: 你可以使用上/下键来选择历史的命令.

iframes

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.
$_
New in Firefox 39. 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()
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.
copy()
New in Firefox 38. Copy the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.
clearHistory()
New in Firefox 39. 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.
Please refer to the Console API for more information about logging from content.

分离控制台

Firefox 28 的新特性.

从 Firefox 28 开始, 你可以在浏览器的其它工具中使用 Web 控制台. 你只需要按   "Escape" 或者 "切换分离式控制台" 的按键. 这时工具栏会自动生成一个新的分离的, 在原来工具的下面.

通常, $0 所修改的内容是工作在当前选择的元素上的:

当你们使用分离的控制台来 debug 的时候, 这个控制台的作用域是在当前的堆栈帧. 所以,如果你的函数中有一个断点, 你的作用域就在这个函数所在的作用域. 你的函数的自动补全功能也会是一样:

Keyboard shortcuts

  Windows 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 OS X Linux
Scroll to start of console output (new in Firefox 34, and only if the command line is empty) Home Home Home
Scroll to end of console output (new in Firefox 34, and only if the command line is empty) End End End
Page up through console output Page up Page up Page up
Page 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 Ctrl + A Ctrl + A
Move to the end of the line End Ctrl + 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 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
Page up through autocomplete suggestions Page up Page up Page up
Page down through autocomplete suggestions Page down Page down Page down
Scroll to start of autocomplete suggestions (new in Firefox 34) Home Home Home
Scroll to end of autocomplete suggestions (new in Firefox 34) End End End

Global shortcuts

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

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

文档标签和贡献者

 此页面的贡献者: peak, goer, pixiu, bassam, huanming, tangxiaobaobao, iakuf, wbamberg
 最后编辑者: peak,