控制台消息¶

大部分 Web 控制台被消息显示窗格占据

Screenshot of the web console, highlighting the messages area

每条消息都显示为单独的一行

Screenshot of a single console message, with its parts annotated

时间	记录消息的时间。默认情况下不显示：您可以选择在控制台设置菜单（控制台工具栏中的齿轮图标）中选择“显示时间戳”以查看时间戳。
图标	并非所有控制台消息都包含图标。可以使用以下图标信息消息警告错误已阻止；用于网络消息此外，一个展开三角形表示有更多信息可用；单击它可以显示或折叠该信息。
消息	消息本身。
出现次数	如果生成警告或错误的行执行了多次，则仅记录一次，并且此计数器显示它遇到的次数。
文件名和行号	对于 JavaScript、CSS 和控制台 API 消息，可以将消息追溯到特定代码行。然后，控制台提供指向生成消息的文件名和行号的链接。

默认情况下，每次导航到新页面或重新加载当前页面时，控制台都会清除。要覆盖此行为，请在控制台设置菜单（齿轮图标）中启用“持久化日志”。

下面列出的上下文菜单选项适用于所有消息类别。其他上下文菜单选项在它们适用的消息类别的子部分中进行了描述。

**复制消息** 将选定的消息复制到剪贴板。
**全选** 选择消息显示窗格中可用的所有消息。
导出可见消息到
- **剪贴板** 将显示窗格中可用的所有消息复制到剪贴板。
- **文件** 打开文件对话框，以便您可以保存显示窗格中所有消息的导出。

消息类别¶

网络¶

注意

默认情况下不显示网络日志消息。使用过滤功能来显示它们。

网络请求记录了一行，如下所示

Screenshot of a network response message, with its parts annotated

时间	记录消息的时间。
方法	特定的 HTTP 请求方法。如果请求作为XMLHttpRequest发出，则有一个额外的“XHR”标签指示这一点。如果还有更多信息可用，则展开三角形允许您在嵌入式面板中显示它，该面板与网络监视器请求详细信息相同。
URI	目标 URI。
摘要	HTTP 版本、响应代码和完成所需的时间。单击响应代码将带您到该代码的参考页面。

网络消息的上下文菜单除了全局可用的项目外，还包含一些额外的项目

Screenshot showing the context menu for network response messages

复制链接位置: 按预期工作，将 URL 复制到剪贴板
在网络面板中打开: 切换到网络选项卡，选择请求并显示详细信息
重新发送请求: 再次发送网络请求。
在新标签页中打开 URL: 在新浏览器标签页中打开 URL。如果资源是图像，则图像将在新标签页中打开。如果资源是样式表，您将看到 CSS 规则等。

JS¶

JavaScript 错误包含一个“了解更多”链接，该链接将带您到JavaScript 错误参考，其中包含有关解决问题的更多建议。

源映射¶

Web 控制台了解源映射。这意味着如果您的 JavaScript 源代码被压缩，您可以为它们提供源映射。然后，您的源代码生成的任何消息或错误都将显示在 Web 控制台中，并带有指向原始源代码（而不是压缩版本）的链接。

异步堆栈帧¶

堆栈跟踪分别显示异步函数和同步函数的堆栈帧。当您运行包含异步函数的代码时，其跟踪（console.trace 或抛出的错误）将显示带有Async:前缀。

Console log showing a trace containing async code

CSS¶

注意

出于性能原因，默认情况下不显示 CSS 警告和重排消息（请参阅错误 1452143）。使用过滤功能来显示它们。

某些 CSS 消息在消息左侧包含展开三角形。单击它以查看有关错误的更多信息，以及哪些 DOM 节点受错误影响。

安全性¶

Web 控制台中显示的安全消息可帮助开发人员查找其网站中潜在的或实际的漏洞。此外，许多这些消息有助于教育开发人员，因为它们以“了解更多”链接结尾，该链接将带您到包含背景信息和有关缓解问题的建议的页面。

安全消息的完整列表如下

消息	详细信息
阻止加载混合活动内容	页面包含混合活动内容：即，主页面通过 HTTPS 提供，但要求浏览器通过 HTTP 加载“活动内容”（例如脚本）。浏览器阻止了此活动内容。有关更多详细信息，请参阅混合内容。
阻止加载混合显示内容	页面包含混合显示内容：即，主页面通过 HTTPS 提供，但要求浏览器通过 HTTP 加载“显示内容”（例如图像）。浏览器阻止了此显示内容。有关更多详细信息，请参阅混合内容。
在安全页面上加载混合（不安全）活动内容	页面包含混合活动内容：即，主页面通过 HTTPS 提供，但要求浏览器通过 HTTP 加载“活动内容”（例如脚本）。浏览器加载了此活动内容。有关更多详细信息，请参阅混合内容。
在安全页面上加载混合（不安全）显示内容	页面包含混合显示内容：即，主页面通过 HTTPS 提供，但要求浏览器通过 HTTP 加载“显示内容”（例如图像）。浏览器加载了此显示内容。混合内容了解更多详细信息。
此站点同时指定了 X-Content-Security-Policy/Report-Only 标头和 Content-Security-Policy/Report-Only 标头。将忽略 X-Content-Security-Policy/Report-Only 标头。	有关更多详细信息，请参阅内容安全策略。
X-Content-Security-Policy 和 X-Content-Security-Report-Only 标头将在未来弃用。请改用具有符合 CSP 规范语法的 Content-Security-Policy 和 Content-Security-Report-Only 标头。	有关更多详细信息，请参阅内容安全策略。
不安全（http://）页面上存在密码字段。这是一种安全风险，可能导致用户登录凭据被盗。	包含登录表单的页面必须通过 HTTPS 提供，而不是 HTTP。
具有不安全（http://）表单操作的表单中存在密码字段。这是一种安全风险，可能导致用户登录凭据被盗。	包含密码字段的表单必须通过 HTTPS 提交，而不是 HTTP。
不安全（http://）iframe 上存在密码字段。这是一种安全风险，可能导致用户登录凭据被盗。	包含登录表单的 iframe 必须通过 HTTPS 提供，而不是 HTTP。
该站点指定了无效的 Strict-Transport-Security 标头。	有关更多详细信息，请参阅HTTP 严格传输安全。
此站点使用 SHA-1 证书；建议您使用签名算法使用比 SHA-1 更强大的哈希函数的证书。	该站点使用的证书的签名使用了 SHA-1 哈希算法。 SHA-1 仍然广泛用于证书，但它开始显现出其年龄。鼓励网站和证书颁发机构在未来切换到更强大的哈希算法。有关更多详细信息，请参阅弱签名算法文章。请注意，SHA-1 证书可能不是您自己站点的证书，而是用于签署您站点证书的证书颁发机构的证书。

错误 863874 是将相关安全消息记录到 Web 控制台的元错误。如果您对此处讨论的功能有更多有用的想法，或者有兴趣做出贡献，请查看元错误及其依赖项。

日志记录¶

注意

从共享工作线程、服务工作线程、加载项和**Chrome 工作线程**记录的消息默认情况下不会显示。使用过滤功能来显示它们。

日志记录类别包括使用控制台 API记录的消息。

Web 控制台支持以下控制台 API消息

控制台为所有错误消息打印堆栈跟踪，如下所示

function foo() {
  console.error("it explodes");
}

function bar() {
  foo();
}

function doStuff() {
 bar();
}

doStuff();

服务器¶

注意

服务器端日志消息在 Firefox 43 中引入，但在 Firefox 56 中删除。您可以安装Chrome Logger 扩展来（重新）启用该功能。

使用Chrome Logger 扩展，Web 控制台可以显示从服务器发送的消息。这使您可以使用 Web 控制台调试服务器端代码。

它使用Chrome Logger协议。简而言之，其工作原理如下

您的服务器端代码 - Python、PHP、Node.js 等 - 包含一个提供控制台 API 的库。
您的服务器端代码使用此 API 记录消息。
服务器端库从消息创建 JSON 对象并对其进行编码以进行传输。
消息作为名为X-ChromeLogger-Data的响应头发送到客户端。
Web 控制台解码这些头并显示它们。

要查找适合您的服务器代码的库，请参阅Chrome Logger 文档。

解释器输入/输出¶

使用Web 控制台的 JavaScript 解释器发送到浏览器的命令以及相应的响应都会记录在控制台消息中。

对于包含对象或变量的响应，可以使用以下上下文菜单选项

在检查器中显示: 在检查器窗格中显示选定的 DOM 节点。
存储为全局变量: 创建一个全局变量（名称类似于temp0、temp1等），其值为选定的对象。变量的名称显示为解释器的输入，其值显示为响应。
复制对象: 将选定的对象复制到剪贴板。

过滤和搜索¶

按类别过滤¶

您可以使用顶部的工具栏来限制显示的结果。

Screenshot showing the web console, with the toolbar highlighted

要仅查看特定类别的消息，请单击标有该类别（错误、CSS等）的按钮。

对于错误和警告，当您关闭类别的显示时，按钮文本旁边会出现一个数字，指示该类型有多少条可用消息。例如，“警告 (25)”。

响应代码在 400-499（客户端错误）或 500-599（服务器错误）范围内的网络请求被视为错误。它们的显示由错误按钮控制，而不是请求按钮。

按文本过滤¶

要仅查看包含特定字符串的消息，请在标有“过滤输出”的文本框中输入。例如，如果您在文本框中输入了字符串 img，您将获得如下所示的列表

../../../_images/console_clear_filter.png

当您输入要根据其过滤输出的字符串时，文本框的右侧会出现一个小“x”图标。单击“x”图标以清除过滤器并再次显示整个列表。

您可以通过在文本搜索前面加上-字符来否定它。例如，-img仅显示不包含字符串img的项目。

使用正则表达式过滤¶

您还可以使用有效的正则表达式来过滤控制台输出。例如，以下视频显示了根据两个简单的正则表达式进行过滤时的结果：/(cool|rad)/和/(cool)/。

您可以通过在正则表达式搜索前面加上-字符来否定它。例如，-/(cool|rad)/仅显示不匹配表达式/(cool|rad)/的项目。

清除日志¶

最后，您可以使用左侧的垃圾桶图标清除控制台的内容。当您清除控制台时，控制台缓存也会被清除。这可以防止已记录的错误在您重新打开控制台时再次出现。