Web 控制台

有关 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 大部分被消息显示面板所使用:

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

• HTTP 请求
• JavaScript 警告和错误
• CSS 警告, 错误, 和 reflow events
• Security 警告和错误
• console API calls
• Input/output 信息: 命令通过 Web Console 发送到浏览器, 并在上面执行它和输出结果.

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

HTTP 请求

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

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

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

XHR

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

JavaScript 错误和警告

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

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;

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

安全警告和错误

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

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

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

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

定义变量

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

高亮检查节点

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

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

命令历史

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

iframes

如果一个页面包括嵌入式的iframes，你可以使用cd()命令将控制台的作用域改为指定的iframe, 然后你就可以执行该iframe中定义的方法了。 使用cd()来选择iframe的方法有三种：

你可以将iframe的DOM元素作为参数：

var frame = document.getElementById("frame1");
cd(frame);

你可以用CSS选择器来匹配该iframe：

cd("#frame1");

你可以使用iframe对应的全局窗口变量：

var frame = document.getElementById("frame1");
cd(frame.contentWindow);

通过调用不含参数的cd()命令将上下文环境返回到最外层的窗口：

cd();

例如，假定我们有如下潜入了iframe的文档：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
  </body>
</html>

iframe定义了新方法：

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

你可以用如下方法把上下文转至内嵌iframe中：

cd("#frame1");

现在你会看到全局窗口文档变成了内嵌的iframe：

并且你可以调用此iframe定义的方法：

帮助命令

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 an array of DOM nodes that match. This is like for document.querySelectorAll(), but returns an array instead of a NodeList.

$0

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

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. This helper accepts multiple different ways of identifying the frame to switch to. You can supply any of the following:

• a selector string that will be passed to document.querySelector to locate the iframe element
• the iframe element itself
• the content window inside the iframe

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

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

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

键盘快捷键

命令行解析器

这些快捷键适用于焦点在命令行解析器时使用：

自动补全弹窗

这些快捷键适用于自动补全弹窗出现时使用：

全局快捷键

这些快捷键在所有工具箱的工具中都能使用。