Chrome Devtools调试小技巧
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。
03
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);node环境运行这一段代码后会生成个profiler文件，我们就可以将这个文件导入chrome devtools去进行分析：
进入到JavaScript Profiler之后，点击load即可将profiler文件导入，就可以进行分析拉。
这里默认的视图是 Heavy 视图，在这个视图下，Devtools 会按照对你的应用的影响程度从高到低，将这些函数列举出来，点击展开能够看到这些列举出来的函数的全路径，方便你去代码中对应的位置进行排查。这里解释两个比较重要的指标，以便让大家能更有针对性地进行排查：
Self Time: 此函数本身代码段执行地时间（不包含任何调用）
Total Time: 此函数包含了其调用地其它函数总共的执行时间
除此之外，Devtools还给我们提供了火焰图来进行更多维度的展示，点击左上角可以切换为Chart进行展示：
火焰图按照我们的 CPU 采样时间轴进行展示，那么在这里我们更容易看到我们的 Node.js 应用在采样期间 JS 代码的执行行为，其中比较重要的两个指标：
Aggregated self time: 在 CPU 采样期间聚合后的此函数本身代码段的执行总时间（不包含其他调用）
Aggregated total time: 在 CPU 采样期间聚合后的此函数包含了其调用地其它函数总共的执行总时间
综上，借助于 Chrome devtools 和能够导出当前 Node.js 应用 Javascript 代码运行状态的模块，我们就可以在nodejs应用服务异常时，去进行排查和定位分析了。
04
总结
Chrome Devtools为WEB应用以及Node.js开发者提供了功能丰富的开发调试工具，本文叙述了部分工具的使用场景和方法。当然，工具只是作为开发的辅助，想要高效率地开发和解决BUG，还需要在开发实践过程中不断积累并总结经验，才能更加高效的去发现和定位问题。
---------- END ----------