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，按文本过滤。

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

3，按正则表达式过滤。

如果要显示包含文本模式而非特定字符串的所有消息，请使用正则表达式。

参考：正则表达式语法     检证正则表达式

4，按消息来源过滤。

如果您只想查看来自某个 URL 的消息，请使用侧边栏。

5，按用户消息过滤。

将控制台与任何其他面板一起使用

如果您正在编辑样式，但需要快速检查控制台日志中的某些内容，该怎么办？ 使用抽屉。

1，单击【Elements】选项卡。

 2，按【ESC】。 抽屉的控制台选项卡打开。 它具有您在本教程中一直使用的控制台面板的所有功能。

在控制台中运行 JavaScript

此交互式教程向您展示如何在 Chrome DevTools 控制台中运行 JavaScript。

概述

控制台是一个 REPL，代表读取、评估、打印和循环。 它读取您输入的 JavaScript，评估您的代码，打印出您的表达式的结果，然后循环回到第一步。

设置开发者工具

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

1，按 Command+Option+J (Mac) 或 Control+Shift+J（Windows、Linux、Chrome OS）打开控制台。

查看和更改页面的 JavaScript 或 DOM

在构建或调试页面时，在控制台中运行语句以更改页面的外观或运行方式通常很有用。

1，注意下面按钮中的文字。

2，输入 【document.getElementById('hello').textContent = 'Hello, Console!'】 在控制台中，然后按 【Enter】 计算表达式。 注意按钮内的文本是如何变化的。 

运行与页面无关的任意 JavaScript

有时，您只想要一个代码游乐场，您可以在其中测试一些代码，或者尝试您不熟悉的新 JavaScript 功能。 控制台是进行此类实验的理想场所。

1，在控制台中键入 【5 + 15】 并按 Enter 以计算表达式。 控制台打印出代码下面的表达式的结果。

2，在控制台中键入以下代码。 尝试逐个字符地输入它，而不是复制粘贴它。

function add(a, b=20) {
  return a + b;
}

3，现在，调用您刚刚定义的函数。

附录 

1，您可以输入 【$()】，而不是键入 【document.querySelector()】 来选择元素。 此语法受 jQuery 启发，但实际上并非 jQuery。 它只是 【document.querySelector()】 的别名。

2，【debug(function)】 在该函数的第一行有效地设置了一个断点。

3，【keys(object)】 返回一个包含指定对象键的数组。

控制台功能参考

此页面是与 Chrome DevTools 控制台相关的功能参考。

打开控制台

您可以将控制台作为面板或抽屉中的选项卡打开。

1，打开控制台面板。

    A，按 Control+Shift+J 或 Command+Option+J (Mac)。

    B，要从命令菜单打开控制台面板，请开始输入【Console】，然后运行旁边带有【Panel】标志的【Show Console】命令。

2，打开抽屉中的控制台选项卡。

    按 【Escape】 或单击 【Customize And Control DevTools】 然后选择 【Show Console Drawer】。

    【Drawer】 在您的 DevTools 窗口底部弹出，并打开 Console 选项卡。 

    要从命令菜单打开控制台选项卡，请开始键入控制台，然后运行旁边带有抽屉标志的显示控制台命令。 

3，打开控制台设置。

    点击【Console Settings】。

 4，打开控制台侧边栏。

单击 【Show Console Sidebar】 以显示侧边栏，这对过滤很有用。

查看消息

此部分包含更改消息在控制台中的显示方式的功能。
1，禁用消息分组

    打开控制台设置并禁用组类似于禁用控制台的默认消息分组行为。

2，记录 XHR 和 Fetch 请求

    打开控制台设置并启用 【Log XMLHttpRequests】 以在发生时将所有 XMLHttpRequest 和 Fetch 请求记录到控制台。

3，跨页面加载保持消息

    默认情况下，每当您加载新页面时，控制台都会清除。 要跨页面加载保留消息，请打开控制台设置，然后启用保留日志复选框。

4，隐藏网络消息 

    默认情况下，浏览器将网络消息记录到控制台。 隐藏网络消息：打开控制台设置。启用隐藏网络复选框。

过滤消息

有很多方法可以过滤掉控制台中的消息。

1，过滤浏览器消息

    打开控制台边栏并单击用户消息以仅显示来自页面 JavaScript 的消息。

2，按日志级别过滤

    DevTools 为每个 【console.*】 方法分配一个严重性级别。 有 4 个级别：详细、信息、警告和错误。 例如，console.log() 在 Info 组中，而 console.error() 在 Error 组中。 控制台 API 参考描述了每种适用方法的严重性级别。 浏览器记录到控制台的每条消息也有一个严重性级别。 您可以隐藏您不感兴趣的任何级别的消息。

    A，您还可以通过打开控制台边栏，然后单击错误、警告、信息或详细信息来按日志级别进行过滤。

    B，单击日志级别下拉列表以启用或禁用详细、信息、警告或错误消息。

3，按 URL 过滤消息

键入 url: 后跟一个 URL 以仅查看来自该 URL 的消息。 输入 url 后：DevTools 会显示所有相关的 URL。

例如，

    A，如果 【https://example.com/a.js】 和 【https://example.com/b.js】 正在记录消息，则 【url:https://example.com】 使您能够专注于来自这两个的消息 脚本。 

    B，输入 【-url】: 以隐藏来自该 URL 的消息。 这称为否定 URL 过滤器。

您还可以通过打开控制台边栏，展开用户消息部分，然后单击包含要关注的消息的脚本的 URL 来显示来自单个 URL 的消息。

4，过滤掉来自不同上下文的消息

    假设您的网页上有一则广告。 该广告嵌入在 <iframe> 中，并在您的控制台中生成大量消息。 由于此广告位于不同的 JavaScript 上下文中，因此隐藏其消息的一种方法是打开控制台设置并启用仅选定上下文复选框。

5，过滤掉与正则表达式模式不匹配的消息 

    在过滤器文本框中键入正则表达式，例如 /[gm][ta][mi]/ 以过滤掉与该模式不匹配的任何模式。 DevTools 检查是否在消息文本或导致记录消息的脚本中找到该模式。

运行 JavaScript

本节包含与在控制台中运行 JavaScript 相关的功能。

1，重新运行历史表达式

    按向上箭头键可循环浏览您之前在控制台中运行的 JavaScript 表达式的历史记录。 按 Enter 再次运行该表达式。
2，使用 Live Expressions 实时观察表达式的值

    如果您发现自己在控制台中重复输入相同的 JavaScript 表达式，您可能会发现创建实时表达式更容易。 使用 【Live Expressions】，您只需输入一次表达式，然后将其固定到控制台的顶部。 表达式的值近乎实时地更新。
3，禁用 Eager 评估

    当您在控制台中键入 JavaScript 表达式时，【Eager Evaluation】 会显示该表达式返回值的预览。 打开控制台设置并禁用 【Eager Evaluation】 复选框以关闭返回值预览。

4，从历史中禁用自动完成 

    当您输入表达式时，控制台的自动完成弹出窗口会显示您之前运行的表达式。 这些表达式前面带有 > 字符。 打开控制台设置并禁用从历史记录自动完成复选框以停止显示历史记录中的表达式。

5，选择 JavaScript 上下文

默认情况下，JavaScript 上下文下拉列表设置为顶部，代表主文档的浏览上下文。

假设您的网页上有一个嵌入 <iframe> 的广告。 您希望运行 JavaScript 以调整广告的 DOM。 为此，您首先需要从 JavaScript 上下文下拉列表中选择广告的浏览上下文。

清空控制台内容

您可以使用以下任何工作流程来清除控制台：

    A，单击清除控制台来清除控制台。

    B，右键单击消息，然后选择清除控制台。

    C，在控制台中键入 clear()，然后按 Enter。

    D，从您网页的 JavaScript 调用 console.clear()。
    E，当控制台处于焦点时按 Control+L。

控制台 API 参考

使用控制台 API 从 JavaScript 将消息写入控制台。

console.assert(expression, object)

当表达式的计算结果为 false 时，将错误写入控制台。

const x = 5;
const y = 3;
const reason = 'x is expected to be less than y';
console.assert(x < y, {x, y, reason});

console.clear() 

清空控制台。

console.clear();

console.count([label]) console.countReset([label])

写入 count() 在同一行和相同标签被调用的次数。 调用 console.countReset([label]) 重置计数。

console.count();
console.count('coffee');
console.count();
console.count();

console.debug(object [, object, ...]) 

除了不同的日志级别外，与 【console.log(object [, object, ...])】 相同。

console.debug('debug');

 

console.dir(object)

打印指定对象的 JSON 表示。 

console.dir(document.head);

console.dirxml(node)

打印节点后代的 XML 表示。

console.dirxml(document);

console.error(object [, object, ...])

将对象打印到控制台，将其格式化为错误，并包含堆栈跟踪。

console.error("I'm sorry, Dave. I'm afraid I can't do that.");

console.group(label) 

可视化地将消息组合在一起，直到调用 console.groupEnd(label)。

const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);

console.groupCollapsed(label)

与 console.group(label) 相同，除了组在登录到控制台时最初折叠。

const label = 'Adolescent Irradiated Espionage Tortoises';
console.group(label);
console.info('Leo');
console.info('Mike');
console.info('Don');
console.info('Raph');
console.groupEnd(label);

console.groupEnd(label)

停止对消息进行视觉分组。

console.info(object [, object, ...])

与 console.log(object [, object, ...]) 相同。

console.info('info');

console.log(object [, object, ...])

向控制台打印一条消息。

console.log('log');

console.table(array)

将对象数组记录为表。

console.table([
  {
    first: 'René',
    last: 'Magritte',
  },
  {
    first: 'Chaim',
    last: 'Soutine',
    birthday: '18930113',
  },
  {
    first: 'Henri',
    last: 'Matisse',
  }
]);

console.time([label])

启动一个新的计时器。 调用 console.timeEnd([label]) 停止计时器并将经过的时间打印到控制台。

console.time();
for (var i = 0; i < 100000; i++) {
  let square = i ** 2;
}
console.timeEnd();

console.timeEnd([label])

停止计时器。

console.trace()

将堆栈跟踪打印到控制台。

const first = () => { second(); };
const second = () => { third(); };
const third = () => { fourth(); };
const fourth = () => { console.trace(); };
first();

 console.warn(object [, object, ...])

向控制台打印警告。

console.warn('warn');

控制台实用程序 API 参考

控制台实用程序 API 包含一组用于执行常见任务的便捷函数：选择和检查 DOM 元素、以可读格式显示数据、停止和启动分析器以及监视 DOM 事件。
警告：这些函数仅在您从 Chrome DevTools 控制台调用它们时才起作用。 如果您尝试在脚本中调用它们，它们将不起作用。 

$_

$_

返回最近计算的表达式的值。

$0 - $4

$0、$1、$2、$3 和 $4 命令用作对在 Elements 面板中检查的最后五个 DOM 元素或在 Profiles 面板中选择的最后五个 JavaScript 堆对象的历史参考。 $0 返回最近选择的元素或 JavaScript 对象，$1 返回第二个最近选择的元素，依此类推。

$(selector, [startNode])

$(selector) 返回对具有指定 CSS 选择器的第一个 DOM 元素的引用。 当使用一个参数调用时，此函数是 document.querySelector() 函数的别名。

此函数还支持第二个参数 startNode，它指定要从中搜索元素的“元素”或节点。 该参数的默认值为文档【document】。 

注意：如果您正在使用使用 $ 的库（例如 jQuery），则此功能将被覆盖，并且 $ 将对应于该库的实现。

$$(selector, [startNode])

$$(selector) 返回与给定 CSS 选择器匹配的元素数组。 此命令等效于调用 document.querySelectorAll()。

此函数还支持第二个参数 startNode，它指定要从中搜索元素的元素或节点。 该参数的默认值为文档【document】。

注意：在控制台中按 Shift + Enter 可在不执行脚本的情况下开始新行。

$x(path, [startNode])

$x(path) 返回与给定 XPath 表达式匹配的 DOM 元素数组。

clear()

清空控制台。

copy(object)

copy(object) 将指定对象的字符串表示复制到剪贴板。

debug(function)

当指定的函数被调用时，调试器被调用并在 Sources 面板上的函数内部中断，允许单步执行代码并调试它。

使用 undebug(fn) 停止中断函数，或使用 UI 禁用所有断点。

dir(object)

dir(object) 显示所有指定对象属性的对象样式列表。 此方法是 Console API 的 console.dir() 方法的别名。

dirxml(object)

dirxml(object) 打印指定对象的 XML 表示，如元素选项卡中所示。 此方法等效于 console.dirxml() 方法。

inspect(object/function)

inspect(object/function) 打开并在适当的面板中选择指定的元素或对象：DOM 元素的 Elements 面板或 JavaScript 堆对象的 Profiles 面板。

getEventListeners(object)

【getEventListeners(object)】 返回在指定对象上注册的事件侦听器。 返回值是一个对象，其中包含每个注册事件类型（例如，单击或按键）的数组。 每个数组的成员都是描述为每种类型注册的侦听器的对象。

如果在指定对象上注册了多个侦听器，则数组包含每个侦听器的成员。

keys(object)

keys(object) 返回一个包含属于指定对象的属性名称的数组。 要获取相同属性的关联值，请使用 values()。

var player1 = { "name": "Ted", "level": 42 }

monitor(function) 

调用指定的函数时，会在控制台中记录一条消息，指示函数名称以及调用时传递给该函数的参数。

    function sum(x, y) {
        return x + y;
    }
    monitor(sum);

使用 【unmonitor(function)】 停止监视。 

monitorEvents(object[, events])

当指定的事件之一发生在指定的对象上时，事件对象将记录到控制台。 您可以指定要监视的单个事件、事件数组或映射到预定义事件集合的通用事件“类型”之一。

以下监控窗口对象上的所有调整大小事件。

monitorEvents(window, "resize");

您还可以指定一种可用的事件“类型”，即映射到预定义事件集的字符串。 下表列出了可用的事件类型及其关联的事件映射：

事件类型 & 对应的映射事件

mouse	"mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel"
key	"keydown", "keyup", "keypress", "textInput"
touch	"touchstart", "touchmove", "touchend", "touchcancel"
control	"resize", "scroll", "zoom", "focus", "blur", "select", "change", "submit", "reset"

 profile([name]) and profileEnd([name])

profile() 使用可选名称启动 JavaScript CPU 分析会话。 profileEnd() 完成配置文件并在“配置文件”面板中显示结果。 （另请参阅加速 JavaScript 执行。）

queryObjects(Constructor)

从控制台调用 queryObjects(Constructor) 以返回使用指定构造函数创建的对象数组。 例如：

    1，【queryObjects(Promise)】。 返回所有承诺。
    2，【queryObjects(HTMLElement)】。 返回所有 HTML 元素。
    3，【queryObjects(foo)】，其中 foo 是函数名。 返回所有通过 new foo() 实例化的对象。

【queryObjects()】 的范围是控制台中当前选择的执行上下文。

table(data[, columns])

通过传入带有可选列标题的数据对象，以表格格式记录对象数据。

    var names = {
        0: { firstName: "John", lastName: "Smith" },
        1: { firstName: "Jane", lastName: "Doe" }
    };
    table(names);

undebug(function)

【undebug(function)】 停止对指定函数的调试，以便在调用该函数时不再调用调试器。

unmonitor(function)

【unmonior(function)】 停止对指定函数的监视。 这与 【monitor(fn)】 一起使用。 

unmonitorEvents(object[, events])

【unmonitorEvents(object[, events])】 停止监视指定对象和事件的事件。

您还可以有选择地停止监视对象上的特定事件。 例如，以下代码开始监视当前选定元素上的所有鼠标事件，然后停止监视“mousemove”事件（可能是为了减少控制台输出中的噪音）：

    monitorEvents($0, "mouse");
    unmonitorEvents($0, "mousemove");

values(object)

values(object) 返回一个数组，其中包含属于指定对象的所有属性的值。

使用 Live Expressions 实时观察 JavaScript 值

如果您发现自己在控制台中重复输入相同的 JavaScript 表达式，您可能会发现创建实时表达式更容易。 使用 Live Expressions，您只需输入一次表达式，然后将其固定到控制台的顶部。 表达式的值近乎实时地更新。

创建实时表达式

1，单击创建实时表达式 【Create Live Expression】。 出现实时表达式文本框。

2，键入 Control+Enter 或 Command+Enter (Mac) 以保存表达式，或单击 Live Expression 文本框外部。