Chrome DevTools 第一篇：简介 & Console

Chrome DevTools

Chrome 开发者工具是一套 Web 开发者工具，直接内置于 Google Chrome 浏览器中。 开发者工具可以帮助您即时修改页面和快速诊断问题，最终帮助您更快地构建更好的网站。

一、开启 DevTools

• 右上角菜单 > 更多工具 > 开发者工具

• 页面元素 > 右键 > 检查元素

• 快捷键

  推荐 Ctrl + Shift + C 单手操作

  系统	元素	控制台	上一个面板
  Windows 或 Linux	Ctrl + Shift + C	Ctrl + Shift + J	F12 或 Ctrl + Shift + I
  Mac	Ctrl + Shift + C	Ctrl + Shift + J	Fn + F12 或 Ctrl + Shift + I

二、功能说明

DevTools 具有不同的面板，分别对应不同的功能

• 查看和更改 DOM
• 查看和更改 CSS
• 调试 JavaScript
• 在控制台中查看消息并运行 JavaScript
• 优化网站速度
• 检查网络活动

三、快捷键

1. 切换 DevTools 位置布局 （靠右 / 靠下）

   ctrl + shift + d

2. 调起 command

   ctrl + shift + p 调起 command 菜单

四、面板介绍

（一）控制台面板 console

console 面板的主要功能为两个：

1. 查看记录或错误消息
2. 运行JavaScript

---

1. console 中的 $

a. document.querySelector

$0 : 当前选中元素的引用

$1 : 上次引用的元素

$2 : 上上次引用的元素 （直到 $4 ）

b. 结果引用

$_ : 上次执行结果的引用

c. $i 引用 npm 插件

配合 chrome 插件 console-importer 来在 console 中引入 npm 进行调试

$i('lodash')

---

2. 异步

Console 面板中 默认是异步环境，可以理解为是被 async 包裹的函数内。可以直接调用 await 调试异步方法。

const res = await request('https://xxx.xx.xxx');

---

3. 函数/事件 监听

1. monitor

   监听函数调用

   

2. monitorEvents

   监听事件调用

   

---

4. Console API

下面介绍一些常用的，感兴趣可以去官网了解下所有的API

控制台API参考文档

a. console.log / warn / error

• log 有一个注意点，就是它打印的对象，是以其引用保存的， 这就导致我们打印的对象总是最终修改后的结果。 可以使用 JSON.stringify 进行一个镜像记录。

• enhanced object literal 增强对象字面意义，特别是同时打印多个的情况下更显方便

      // 通常我们打印一个对象，字符串一般这么用的会比较多
      console.log('name', name);
      // 使用 enhanced object literal 的方式
      console.log({ name });

  

• warn、error 分别是不同级别的消息内容。我们可以在控制台进行过滤和区分。

b. console.table

用来打印一个对象或者数组，使其可以以一个表格的样式展示出来。结合 enhanced object literal 有不错的效果

console.table({ name });

c. console.assert

当 expression 的求值结果为 false 时，将错误写入控制台。

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

d. console.time([label]) 、 console.timeEnd([label])

启动一个新计时器。调用 console.timeEnd([label]) 以停止计时器并将已用时间输出到 控制台。

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

e. console.count()

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

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

五、通用方法

1. copy

全局的 copy 方法可以在 console 里复制任何内容，同时也可以配合变量更方便的操作。

2. Store as global

选中元素 右键 存储为全局变量

3. 保存堆栈信息

当我们控制台报错需要和其他人协作沟通时，除了截图还可以保存错误栈信息，减少沟通成本。

4. 保留日志

在页面有重定向或者跳转的时候，默认不会保留上个页面的日志信息，当我们有需要查看的时候可以勾选保留日志选项

5. 条件断点

利用条件断点，每次需执行判断表达式的特点，在条件判断处添加 console 命令进行调试。

下列操作需要进入command shift + Ctrl + p

6. 截屏

进入 command ，输入 screen 选择 Capture full size screenshot 获取整个网页的完整截图，包括视口外的部分。

7. 切换主题

进入 command ，输入 theme 可选切换 明 / 暗 主题

8. 代码块

路径：source 面板 -> snippets 可以保存代码块进行调用。

在 command 中调用

参考文档

1. developer.chrome.google.cn/docs/devtoo...
2. gitee.com/hongjilin/h...