✨Chrome DevTools 使用指☞北 - 控制台 🔔打开控制台 🌈 打开“控制台”面板 🐾 快捷键打开：按

打开控制台 🌈

打开“控制台”面板 🐾

快捷键打开：按 Ctrl + Shift + J 或 Command + Option + J (Mac)
命令菜单打开：首先输入 Console，然后点击 Show Console 选项

在抽屉式导航栏中打开控制台 🐾

按 Esc 键或点击 自定义并控制开发者工具（:），然后选择 显示控制台抽屉式导航栏（Show console drawer）。
抽屉式导航栏会在开发者工具窗口底部弹出，同时控制台 标签页会打开。

打开控制台设置 🐾

点击 控制台 右上角的 控制台设置。

打开控制台边栏 🐾

点击 Show Console Sidebar 图标即可显示边栏，这对于过滤非常有用

查看消息 🌈

查看来自断点的消息 🐾

在来源（source）中 新建代码段

function bar() {
    var num1 = 42
    var num2 = 43
    var sun = num1 + num2
}


function foo() {
    bar()
}

foo()

添加日志点
输入 'num1 is ', num1
保存内容（ctrl + s），按下（ctrl + enter）执行内容，会输出日志内容

查看堆栈轨迹 🐾

在堆栈轨迹中查看错误原因 🎈

控制台可以向您显示堆栈轨迹中的错误原因链（如果有）。

function foo() {
throw new Error('original');
}

function bar() {
    try {
        foo();
    } catch (e) {
        throw new Error('rethrower', { cause: e});
    }
}

function caller() {
    try {
        bar();
    } catch (e) {
        throw new Error('rethrower2', { cause: e});
    }
}

caller()

可以看出是在 17 行 15 列的 caller 函数出现的错误，caller 函数又是由 21 行 1 列调用的。您可以通过调用 console.trace() 随时记录堆栈轨迹

记录 XHR 和提取请求 🐾

打开控制台，启用 日志 XMLHttpRequests，以便在请求发生时将所有 XMLHttpRequest 和 Fetch 请求记录到控制台
在控制台会显示请求信息

在网页加载过程中保留消息 🐾

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

隐藏网络消息 🐾

默认情况下，浏览器会将网络消息记录到 控制台 中。例如，以下示例中的最上面的消息表示 404
如需隐藏网络消息，请执行以下操作：
1. 打开控制台设置。
2. 选中 隐藏网络 复选框。

显示或隐藏 CORS 错误 🐾

如果网络请求因跨域资源共享 (CORS) 而失败，控制台 可能会显示 CORS 错误。
如需显示或隐藏 CORS 错误，请执行以下操作：
1. 打开控制台设置。
2. 勾选或清除在控制台中显示 CORS 错误复选框。
如果控制台设置为显示 CORS 错误，而您遇到这些错误，可以点击错误旁边的以下按钮：
- ，用于在网络面板中打开与 CORS 相关的 TypeError 请求。
- ，在问题标签页上获取潜在解决方案

过滤消息 🌈

示例地址：devtools.glitch.me/console/log…

按消息来源过滤 🐾

点击 Show Console Sidebar 图标。
点击 12 Messages 旁边的展开图标。边栏显示了导致系统记录消息的网址列表。例如，log.js 导致了 11 条消息。

按用户消息过滤 🐾

“用户消息” 通常是指由网页中的 JavaScript 代码通过 console.log()、console.warn()、console.error()、console.info()、console.debug () 等方法输出的信息

按日志级别过滤 🐾

console.* 方法有四个级别：
- Verbose
- Info
- Warning
- Error
点击 日志级别 下拉菜单以启用或停用 Verbose、Info、Warning 或 Error 消息
您还可以按日志级别过滤，方法是打开控制台边栏，然后点击错误、警告、信息或详细

按网址过滤消息 🐾

输入 url: 后跟相应网址，即可仅查看来自该网址的消息。输入 url: 后，开发者工具会显示所有相关网址
您也可以使用域名例如，如果 https://example.com/a.js 和 https://example.com/b.js 正在记录消息，则 url:https://example.com 可让您专注于来自这两个脚本的消息
如需隐藏来自指定网址的所有消息，请输入 -url:，后跟相应网址，例如 https://b.wal.co。这是一个排除的网址过滤器
您还可以显示来自单个网址的消息，方法是打开控制台边栏，展开 用户消息 部分，然后点击包含您要关注的消息的脚本网址

滤除来自不同上下文的消息 🐾

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

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

在过滤器文本框中输入正则表达式（例如 /[foo]\s[bar]/），以过滤掉与该模式不匹配的任何消息。不支持空格，请改用 \s。开发者工具会检查消息文本或导致消息被记录的脚本中是否发现该模式。

例如，以下命令会过滤掉与 /[gm][ta][mi]/ 不匹配的所有消息。

在日志中搜索文字 🌈

要搜索日志消息中的文本，请执行以下操作：

按 Command+F (Mac) 或 Ctrl+F（Windows、Linux）即可打开内置搜索栏。
在栏中输入您的查询。在此示例中，查询为 legacy。您可以根据需要选择执行以下操作：
- 点击 匹配大小写即可让查询区分大小写。
- 点击 使用正则表达式，即可使用正则表达式表达式进行搜索。
按 Enter 键。要跳转到上一个或下一个搜索结果，请按向上或向下按钮。

运行 JavaScript 🌈

更改网页的 DOM 🐾

控制台也是一个 REPL。您可以在控制台中运行 JavaScript 以与页面交互来更改 DOM

运行与网页无关的 Javascript 🐾

在控制台运行下面的代码：

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

add(25);

结果：

查看从 JavaScript 记录的消息 🐾

在控制台的 Hello, Console! 消息旁边，点击 log.js:2。Sources 面板随即会打开，并突出显示导致消息记录到控制台的代码行。

字符串复制选项 🐾

默认情况下，控制台会将字符串输出为有效的 JavaScript 字面量。右键点击输出项，然后从三个复制选项中进行选择：

复制字符串内容。转义适当的特殊字符，并根据内容使用单引号、双引号或反引号将字符串括起来。
复制为 JavaScript 字面量。将确切的原始字符串复制到剪贴板，包括新行和其他特殊字符。
作为 JSON 字面量复制。将字符串的格式设置为有效的 JSON。

复制选项。

重新运行历史记录中的表达式 🐾

按 向上箭头 键可循环浏览您之前在控制台中运行的 JavaScript 表达式的历史记录。按 Enter 键再次运行该表达式

使用实时表达式实时监视表达式的值 🐾

实时表达式允许开发者在控制台顶部固定一个或多个JavaScript 表达式，以便实时跟踪它们的值。这对于监测变量或表达式的变化特别有用，尤其是当你发现自己需要反复输入同一个表达式来查看其值时
点击 “创建实时表达式” 按钮，然后在出现的文本框中输入你想要监视的表达式
可以输入document.activeElement来实时跟踪当前文档中获得焦点的元素。输入完毕后，按Enter键或点击文本框外部即可保存表达式
当获得焦点的元素发生变化，这个表达式的值也会变化
如果你想要移除一个已经创建的实时表达式，只需点击该表达式旁边的“关闭”按钮即可
可以一次创建多个表达式

停用 Eager 评估 🐾

当你在控制台键入表达式的时候, 控制台现在可以在你的指针下面即刻显示这个表达式的预览结果。如果关闭，输入表达式按下 Enter 键之后才会返回表达式结果
开启 Eager Evaluation(即刻求值)：
1. 打开 控制台
2. 打开 控制台设置
3. 打开 Eager evaluation 复选框

通过评估触发用户激活 🐾

这个选项的主要作用是，当它被启用时，在控制台中执行的代码评估会被视为用户的操作来处理
如果你在页面中有一些事件监听器，比如鼠标点击事件、键盘事件等，通常这些事件是由用户的实际操作触发的。但当启用这个选项后，在控制台中执行的代码如果触发了某些动作，也会像用户触发了这些事件一样。比如你在控制台中执行一段代码来模拟点击一个按钮，页面会像用户真的点击了那个按钮一样，触发相应的点击事件处理程序
在页面上选中你想要的按钮元素
右键选择 复制 JS 路径
将复制内容粘贴到控制台，然后调用 click 事件
会发现控制台代码出发了按钮点击的操作

停用历史记录自动补全功能 🐾

可以在控制台设置界面开启和关闭
当您输入表达式时，控制台的自动补全弹出式窗口会显示您之前运行的表达式。这些表达式前带有 > 字符。在以下示例中，开发者工具之前评估了 document.querySelector('a') 和 document.querySelector('img')

选择 JavaScript 上下文 🐾

通常在一个复杂的网页应用中，可能存在多个 JavaScript 上下文。比如：
1. 页面自身的上下文：这是最常见的情况，当网页加载时，页面中的 JavaScript 代码在这个上下文中运行。它包括页面中定义的全局变量、函数等。
2. 框架上下文：如果网页使用了一些前端框架（如 React、Angular 等），这些框架可能会创建自己的上下文。在这个上下文中，会有框架特定的变量和函数。
3. iframe 上下文：如果页面中包含 <iframe> 元素，每个 <iframe> 可以有自己独立的 JavaScript 上下文。

假设你有一个网页，其中包含一个主页面和一个 <iframe>

主页面的 HTML 代码如下：

<!DOCTYPE html>
<html>

<body>
  <h1>主页面</h1>
  <p>这是主页面的内容。</p>
  <iframe src="iframe.html" width="300" height="200"></iframe>
</body>

</html>

主页面的 JavaScript 代码（假设在一个外部文件 main.js 中被引入）：

const mainVariable = "这是主页面的变量";
console.log(mainVariable);

<iframe> 的 HTML 代码（iframe.html）：

<!DOCTYPE html>
<html>

<body>
  <h1>iframe 页面</h1>
  <p>这是 iframe 中的内容。</p>
</body>

</html>

<iframe> 的 JavaScript 代码（假设在一个外部文件 iframe.js 中被引入）：

const iframeVariable = "这是 iframe 的变量";
console.log(iframeVariable);

当你在浏览器中打开这个页面并打开 Chrome DevTools 的控制台时：
1. 默认情况下，控制台处于主页面的上下文。你可以在控制台中输入 mainVariable，它会返回 “这是主页面的变量”。
2. 如果你想查看 <iframe> 的上下文，可以在控制台的下拉菜单中选择对应的 <iframe>。这时，如果你在控制台中输入 iframeVariable，它会返回 “这是 iframe 的变量”。
这样就通过选择不同的上下文，在控制台中访问了不同页面中的变量