跳到主要内容

更好地使用 Chrome DevTools

学习掘金小册： 你不知道的 Chrome 调试技巧

通用​

对数据进行复制和保存​

copy(a)这样就可以复制到剪贴板上啦,可以 copy 任何可以拿到的资源。不知道这种方式的时候，复制一个对象的方法可太蠢了= =

debug()​

想调试一个方法可以使用 debug(add),当再次调用该方法，比如：add(1,2)，就可以进入调试面板。

monitor 监听方法调用​

monitor(add),监听一个方法的执行：是否被调用，入参是什么

monitorEvents(object[, events]) 监听事件调用​

monitorEvents(window, "resize");

快捷键​

  • Ctrl + 1/2/3 切换不同 devtools 面板
  • Ctrl + [/] 切换不同 devtools 面板
  • F1 打开设置
  • Ctrl + Shift + P 输入命令
  • Ctrl + P 寻找文件
  • Esc 在任何一个面板都可以打开一个 Drawer ,调出一个 Console 抽屉

一些命令​

首先要通过 Ctrl +Shift + P 打开命令行窗口

  • screenShot 截图
    1. Capture area screenshot: 选择一个矩形区域并截图
    2. Capture full size screenshot: 整个网页截图
    3. Capture node screenshot: 单独截图某个节点区域，需要先去 Elements 面板选中节点再执行指令。
    4. Capture screenshot: 截图当前网页可视区域
  • Drawer 可以直接按 Esc 打开，也可通过命令行窗口使用
    • Animations
    • Changes
    • Console : diff ，检查在控制台修改过的东西有 diff : 红绿对比差异化显示可以撤销修改
    • Coverage : 检查代码，有多少被使用，多少没被使用跟踪当前加载的 JS 和 CSS 文件的 哪些行正在被执行 ，并显示 未使用字节的百分比 。它用 绿色 的线条标记 运行 和用 红色 的线条标记 未运行
    • Network conditions :模拟网络状态，也可以模拟特定用户代理
    • Performance monitor
    • Quick source :快速查看源码，或设置断点
    • Remote devices
    • Rendering
    • Request blocking
    • Search
    • Sensors : 传感器，模拟特定的位置
    • What’s new

snippets​

预设代码块，类似 vscode snippets

  1. Snippets 允许你存放 JavaScript 代码到 DevTools 中，方便你复用这些 JavaScript 代码块：
  2. sources 面板 snippets 中 new snippet。可以直接右键 run 运行也可以用[Ctrl] + [enter]
  3. 在 command menu(Ctrl + P) 用！+ 代码块名 查找预设代码块

Elements 面板​

hide element​

一般是通过点击一个元素，右键选择 hide element.

你可以直接选择元素，并按 H 键，即可隐藏对应元素，再次按下即可取消隐藏

拖动、放置元素​

可以直接拖动元素，移动元素的位置！嘿嘿，好用，好方便！

同级节点上移或下移​

选中节点，然后[Ctrl] + [⬆] / [Ctrl] + [⬇]

撤销操作​

我们可以拖动，放置，编辑，复制(当然，以及使用 [Ctrl] + [v] 来粘贴)， 所以我们可以在元素面板里把 HTML 结构搞得一团糟。

[Ctrl] + [z]: 撤销我们的任何改动。 [Ctrl] + [Shift] + [Z]: 撤销所有修改

对元素的阴影编辑​

可以编辑一个元素的 css ,对于 box-shadow/text-shadow 可以调节时查看效果。

对元素的颜色进行编辑​

颜色选择器，功能相当丰富。

对元素的动画进行编辑​

Timing function editor 定时函数编辑器/Cubic bezier(贝塞尔) 编辑器

监听对 DOM 元素的修改​

点击"..." 符号或者右击你想添加监听的元素

  • 选择 subtree modifications :监听任何它内部的节点被 移除 或者 添加的事件
  • 选择 attribute modifications :监听任何当前选中的节点被 添加，移除 或者 被修改值的事件
  • 选择 node removal :监听被选中的元素被 移除 的事件

页面重新加载时会记住断点。当你设置了一个或多个断点的时候，可能都忘了它们所标记的位置了。怎么找它们呢？

在 Elements 视图中有视觉提示，Sources 中也有专用列表。

有时你添加了断点的元素被隐藏在一些折叠起来的父级元素中，不要担心 - 他们会在 Element 中用高亮展示出来。

Console 面板​

console 中的$​

  • $0 - $4 $0 :拿到当前选中的元素，$1 拿到上一个选择的元素。

从$0 -$4 是最近选中的几个元素，可以方便地选中某些元素，直接进行 dom 操作。

  • $ 和 $$

$ 相当于document.querySelector

$$ 类似于 document.querySelectorAll ，但是返回的是节点数组，而不是 NodeList 类数组对象

$ 和 $$ 还支持第二个参数 startNode 即查询起点由 document 改为 startNode $("div",$("div"))

  • $_ 对上次执行的结果的引用

console.log​

打印的对象是对对象的引用。

  • 增强 console.log 的体验：可以用大括号把对象包起来

    console.log({dad,kids})

  • 自定义 console.log 的样式给打印文本加上 %c 那么 console.log 的第二个参数就变成了 CSS 规则。

  • 在回调函数中检查传递的参数，可以直接传递 console.log 方法

    getLocation(console.log) ，不要 getLocation((v)=>console.log(v))

console 中的异步​

console 面板中可以直接使用 promise,且直接使用 await,不会打印出 pending 状态

response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
json = await response.json();

console.dir​

一般打印一个 DOM 元素，打印的是 DOM 节点。如果想查看这个节点关联的真实 JS 对象，查看属性等，可以使用 console.dir()

console.table​

可以以表格的形式打印一个数组或对象。

它不仅会根据数组中包含的对象的所有属性，去计算出表中的列名，而且这些列都是可以 缩放 甚至 还可以排序!

如果你觉得展示的列太多了，使用第二个参数，传入你想要展示的列的名字。

比如处理上面异步请求的结果：

前面提到的console.log({dad,kids}),增强对象字面量(enhanced object literal),也可以直接换成 console.table

计时相关​

console 面板的每一行输出可以添加时间戳，可以 F1 在设置里开启，也可以使用命令 show timestamps

脚本中的特殊的节点之间执行的时间跨度，可以使用如下一对计时方法：

  • console.time() — 开启一个计时器

  • console.timeEnd() — 结束计时并且将结果在 console 中打印出来

如果你想一次记录多件事，可以往这些函数中传入不同的标签值。(例如: console.time('loading') ， console.timeEnd('loading') )

实时表达式​

Live expression 功能，可以定义任何 JS 表达式，会不断进行更新。并且可以同时写多个实时表达式，对不同的值进行实施的监听。

Network 面板​

调用信息​

Network 面板中的 initiator 这一列显明了是哪个脚本的哪一行触发了请求。它显示了在调用堆栈中触发请求的最后一步。 悬浮或点击一个具体的请求可以查看完整的调用堆栈信息。

筛选请求​

Network 面板中的过滤器输入框接受字符串或正则表达式，对应显示匹配的请求。 但是你也可以使用它来过滤很多属性。

反过滤：过滤请求前面加上-号，如-method:OPTIONS，就可以过滤 OPTIONS 请求了。

自定义显示的列​

在 Network 面板，你可以自定义这个表格都显示哪些列，在表头上或者任何一个请求上右键即可。大概有如下一些：

禁用请求​

想看看当某些脚本、样式文件缺少或者其他资源加载失败时，网页的样子吗？在 Network 面板对某条请求右击选择 Block Request URL。一个新的 禁用请求 面板会被呼出，在这里可以管理被禁用的请求。

重新发送一个请求​

对于 Network 面板上的任何一个请求，不需要刷新页面，右键选择"Replay XHR"即可重新刷新。

Source 面板​

基本是用来 debug ,添加断点

条件断点 Conditional breakpoints​

仅当满足某个表达式才进入断点，很适合在循环代码中按条件进行断点调试

操作：

  1. 右击行号，选择 Add conditional breakpoint...(添加条件断点) 或者在你所添加的断点处，edit breakpoint
  2. 填入表达式，返回结果为 falsy 时不会暂停.(会通过执行表达式获得 true/false 来决定是否暂停)

?> 填入的表达式也可以使用 console.log，而不必在源码中写 console.log ，方便调试

请求断点 XHR/fetch breakpoints​

对已经发送的请求进行断点调试,可以添加部分 URL 作为触发器或监听任何请求:

Source 里的 WorkSpace​

可以直接把文件夹拖动到 source 里面，直接在里面进行编辑。保存编辑后，可以直接同步编辑到本地的文件夹。

workSpace 相关：在 DevTools 直接编辑，并同步变化到本地： https://juejin.cn/book/6844733783166418958/section/6844733783225139214

一些实际场景​

  • 调试某些情况下的浮窗(https://juejin.cn/post/6867099026995560455#heading-3) 鼠标移动到某个区域时出现一个浮窗，移开时浮窗消失。
    1. 可以通过提前切出 Command 面板，焦点处于输入框中，此时鼠标移动到相应区域显示浮窗。另一方面， Command 面板输入 Disable JavaScript 并回车禁用 js
    2. settimeout debugger
    3. 父元素断点调试：Elements 面板 -> 父元素右键 Break on -> subtree modifications

Reference​