关于devtools:Chrome-Devtools调试小技巧

对于程序员而言，熟练掌握 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。

除了前端页面之外，咱们还能够利用 chrome Devtools 对咱们的 node 服务进行问题的定位剖析 node 运行状态，首先咱们能够借助相似 v8-profiler-next

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

'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 profile
v8Profiler.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 应用服务异样时，去进行排查和定位剖析了。

Chrome Devtools 为 WEB 利用以及 Node.js 开发者提供了功能丰富的开发调试工具，本文叙述了局部工具的应用场景和办法。当然，工具只是作为开发的辅助，想要高效率地开发和解决 BUG，还须要在开发实际过程中一直积攒并总结经验，能力更加高效的去发现和定位问题。

举荐浏览【技术加油站】系列 ：

人工智能超大规模预训练模型浅谈

揭秘百度智能测试在测试主动生成畛域的摸索

小程序自动化测试框架原理分析

关于devtools:Chrome-Devtools调试小技巧

01 款式调试

02 性能调试

03Node.js 调试

04 总结