Chrome DevTools

第一篇

Console【控制台】

控制台概览

本页面介绍了 Chrome DevTools Console 如何让开发网页变得更容易。 控制台有两个主要用途：查看记录的消息和运行 JavaScript。

查看记录的消息

Web 开发人员经常将消息记录到控制台，以确保他们的 JavaScript 按预期工作。 要记录消息，请在 JavaScript 中插入一个类似于 console.log('Hello, Console!') 的表达式。 当浏览器执行您的 JavaScript 并看到这样的表达式时，它知道它应该将消息记录到控制台。

运行 JavaScript

控制台也是一个 REPL。 您可以在控制台中运行 JavaScript 以与您正在检查的页面进行交互。

控制台中的日志消息

此交互式教程向您展示如何在 Chrome DevTools 控制台中记录和过滤消息。

设置【demo】和 DevTools

本教程旨在让您可以打开演示并自己尝试所有工作流程。 当您实际跟随时，您以后更有可能记住工作流程。

1，打开demo。

2，按 Control+Shift+J 或 Command+Option+J (Mac) 打开 DevTools。 默认情况下，DevTools 在右侧打开。

查看从 JavaScript 记录的消息

您在控制台中看到的大多数消息来自编写页面 JavaScript 的 Web 开发人员。 本节的目标是向您介绍您可能会在控制台中看到的不同消息类型，并解释如何从您自己的 JavaScript 中自行记录每种消息类型。

1，在【demo】页面点击【Log Info】按钮。

2，控制台中单击 【log.js:2】。 Sources 面板打开并突出显示导致消息被记录到控制台的代码行。 当页面的 JavaScript 调用 【console.log('Hello, Console!')】 时记录该消息。 

 3，使用以下任一工作流导航回控制台：

    A，单击控制台选项卡。
    B，按 Control+[ 或 Command+[ (Mac)，直到【Console】面板获得焦点。
    C，打开命令菜单，输入 Console，选择 Show Console Panel 命令，然后按 Enter。

4，单击【demo】中的【Log Warning】按钮。 像这样格式化的消息是警告。

5， 点击警告消息前的箭头，用来显示导致警告消息的跟踪。

6，单击【demo】中的【Log Error】按钮。 像这样格式化的消息是错误。

7，单击【demo】中的【Log Table 】按钮。 显示表格化的消息。

8，单击【demo】中的【Log Group】按钮。显示组格式化的消息。

9，单击【demo】中的【Log Custom】按钮。 带有红色边框和蓝色背景的消息会记录到控制台。

这里的主要思想是，当您想从 JavaScript 将消息记录到控制台时，您可以使用其中一种控制台方法。 每种方法都以不同的方式格式化消息。

还有比本节中演示的方法更多的方法。 在本教程结束时，您将学习如何探索其余方法。

查看浏览器记录的消息

浏览器也将消息记录到控制台。 这通常发生在页面出现问题时。

1，单击【demo】中的【Cause 404】按钮。浏览器会记录 404 网络错误，因为页面的 JavaScript 试图获取不存在的文件。

2，单击【demo】中的【Cause Error】按钮。 浏览器会记录未捕获的 TypeError，因为 JavaScript 正在尝试更新不存在的 DOM 节点。

3，单击 【Log Levels】 下拉菜单，如果已禁用，则启用 【Verbose】 选项。 您将在下一节中了解有关过滤的更多信息。 您需要这样做以确保您记录的下一条消息可见。

注意：如果默认级别下拉菜单被禁用，您可能需要关闭控制台侧栏。 按下面的消息源过滤以获取有关控制台侧边栏的更多信息。 

4，单击【demo】中的【Cause Violation】按钮。 页面在几秒钟内无响应，然后浏览器将消息 [Violation] 'click' handler take 3000ms 记录到控制台。 确切的持续时间可能会有所不同。 

过滤消息

在某些页面上，您会看到控制台充斥着消息。 DevTools 提供了许多不同的方法来过滤掉与手头任务无关的消息。
1，过滤普通【log】。

每个控制台方法都分配了一个严重性级别：详细【Verbose】、信息【Info】、警告【Warning】或错误【Error】。 例如，console.log() 是信息【Info】级别的消息，而 console.error() 是错误【Error】级别的消息。

单击【Log Levels】下拉列表并禁用错误【Error】。 当级别旁边不再有复选标记时，级别将被禁用。 错误级别消息消失。

 

 2，按文本过滤。

如果您只想查看包含确切字符串的消息，请在过滤器文本框中键入该字符串。