Chrome Devtools调试小技巧

原创 cheer4chai 百度Geek说

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

样式调试

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

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

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

功能调试

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

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

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

Node.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);