Chrome Devtools 调试小技巧

2022 年 5 月 12 日
本文字数：1890 字
阅读完需：约 6 分钟

对于程序员而言，熟练掌握 debug 工具和方法无疑是工作中很重要的一部分，而对前端开发工程师来说 Chrome Devtools 是最为常见的调试工具，本文主要介绍一些使用 Chrome Devtools 的调试技巧，希望能够帮助开发者们提高 Debug 水平。

01 样式调试

1. 快速新增/修改 class：选中 dom 中，点击右侧的 .cls 激活后，可以通过选择框对现有的 class 进行删减以及通过输入框新增 class。

2. 查看计算后的样式：在开发中有一些样式可能是需要通过计算才能得到实际的值的，比如 rem，百分比的数值等，而且可能还存在优先级不同导致互相覆盖的情况。这时候如果我们想看到它在页面中的实际数值时，可以在选中 dom 后通过 computed 去看到这个元素的实际尺寸，以及点开尺寸后看到它生效的样式。

3. 颜色选择/取色器：在调试 css 时候，可能需要去调试一些颜色相关的数值，chrome 提供的颜色选择器可以更为方便的去选择颜色，同时也提供了取色器能够在页面中选取需要的颜色。

02 功能调试

1. 环境配置：在开发过程中我们可以需要在一些特定的环境下去定位和复现问题，chrome 提供了一系列的配置，比如：设备型号（UA）、屏幕宽高、网络环境等等。

2. 优化 source/network 展示：当我们需要查看该页面的原始文件时，在 source 中可能会比较难以找到，此时我们可以修改下他的显示方式，如下图将 Group by folder 去掉，他就会改为平铺的进行展示，从而能够更加方便的找到你想要的文件。同样在 network 栏里面，我们也可以修改他的排列顺序，比如点击 Name 就会让它根据 name 的首字母进行排序。

3. 复制数据、复制请求：当涉及到一些数据和请求的问题时，我们可以需要把对应的数据和请求复制下来，再进一步根据这个数据和请求去进行定位，chrome 提供了比较方便的复制方法，比如在控制台输入 copy 即可把数据复制到剪切板，而对于请求，我们在 network 中对这个请求点击右键，就可以方便的将其复制为 fetch 或者 cURL。

03Node.js 调试

除了前端页面之外，我们还可以利用 chrome Devtools 对我们的 node 服务进行问题的定位分析 node 运行状态，首先我们可以借助类似 v8-profiler-next

（https://github.com/hyj1991/v8-profiler-next），去生成一段时间的代码运行状态，示例代码如下：

'use strict';const fs = require('fs');const v8Profiler = require('v8-profiler-next');const title = 'good-name';
// set generateType 1 to generate new format for cpuprofile// to be compatible with cpuprofile parsing in vscode.v8Profiler.setGenerateType(1);
// ex. 5 mins cpu profilev8Profiler.startProfiling(title, true);setTimeout(() => {  const profile = v8Profiler.stopProfiling(title);  profile.export(function (error, result) {    fs.writeFileSync(`${title}.cpuprofile`, result);    profile.delete();  });}, 5 * 60 * 1000);