有关 Web 控制台:
- 可以查看与当前网页相关的日志信息: 所有的网络请求,JavaScript, CSS,和安全相关的错误与警告信息,还包括页面上 JavaScript 代码运行时产生的错误、警告及相关信息.
- 可以激活你和网页之间的交互, 使你可以在当前网页上下文中执行一些 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 发送到浏览器, 并在上面执行它和输出结果.
每个消息都显示一个单独的行:
Time | 用于指示信息出现的时间.(Firefox 28 以前的版本中默认不显示这个信息,您可以通过 设置来显示或隐藏它) |
Category |
用于指示信息的类型: |
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() |
传一些参数给 console.error("an error"); |
exception() |
这是 error() 的别名. |
assert() |
在 Firefox 29 以上. 如果断言成功, 不做任何事,如果失败, 会给参数输出: console.assert(false, "My assertion always fails"); |
警告信息
API | 内容 |
---|---|
warn() |
传一些参数给 console.warn("a warning"); |
Info 信息
API | 内容 |
---|---|
info() |
传一些参数给 console.info("some info"); |
Log 信息
API | 内容 |
---|---|
count() |
Firefox 30 以上的新消息. The label supplied, if any, and the number of times this occurrence of console.count(user.value); |
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 |