Chrome Devtools调试小技巧

百度Geek说

于 2022-05-12 14:44:51 发布

阅读量417

点赞数

本文链接：https://blog.csdn.net/lihui49/article/details/124731001

版权

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

01样式调试

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3QUAgZzD-1652337861018)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d511d0a0cf84b9a86a0f03db9037985~tplv-k3u1fbpfcp-zoom-1.image)]

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

02功能调试

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yF5f2AbI-1652337861025)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/919961fd79d8400697df4a13da32bbc2~tplv-k3u1fbpfcp-zoom-1.image)]

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qjwKK7L1-1652337861027)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/834c8d1dc4044c7aaa09453fa8bcdbdf~tplv-k3u1fbpfcp-zoom-1.image)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ci8drbzD-1652337861028)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7fa451d6038b4bbdb051619f851d7813~tplv-k3u1fbpfcp-zoom-1.image)]

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 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去进行分析：