前端开发调试之 PC 端调试

课程链接：掘金课程 - 前端开发调试之 PC 端调试

‍

课程介绍：在程序员的世界中，BUG 一词相信同学们再熟悉不过了，本节课将围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。为了方便大家更好地知悉不同场景下 debug 方法，讲师将分为 PC 端与移动端展开解读，本节主要聚焦于 PC 端调试。

‍

课程重点：

Elements

Console

Source

Performance

Network

‍

01. Bug 与 Debug

BUG 的产生

第一个 BUG：机房里的“飞虫”（BUG 的含义）

‍

前端 Debug 的特点

多平台：

浏览器、Hybrid、NodeJs、小程序、桌面应用等
多环境：

本地开发环境、线上环境
多工具：

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
多技巧：

Console、BreakPoint、sourceMap、代理等

‍

02. Chrome DevTools

Chrome 浏览器自带的调试工具

按 F12 或右键点击“检查” 即可打开 DevTools

点击调试框左上角的一个箭头按钮，可以选中某一个元素（页面中或者 HTML 文档中）。

左框显示 HTML，右框显示某个元素的样式

‍

02-1 动态修改元素和样式（Element）

动态添加 / 修改样式（ .cls 中）
- 点击一个数值，按方向键或者滑动滚轮可以修改值的大小
- 点击一个颜色，可以用取色器选择颜色
勾选某个样式是否生效
动态调节伪类
- 选中具有某个伪类的元素，点击样式框中的 :hov
- 右键某个元素 - 点击 :Force state - 选中某个伪类
搜索想要调试的样式（点击样式框中的 Computed，在 filter 里面输入关键词）
对一个元素截屏（Capture node screeshot）

‍

02-2 Console

控制台，可以打印日志

‍

常用的日志技巧

console.log
- 可以传入多个参数（打印多个量，甚至添加样式）
- ```
// 比如
console.log('%s %o,%c%s', 'hello', {name: 'tom', age: 18}, 'font-size: 24px; color: red', 'Welcome to bytedance!');
```
- 不同类型的值颜色不同（比如灰色是字符串，蓝色是数字）
console.warn （抛出警告，对应黄色的 warning）
console.error （抛出错误，对应红色的 error）
console.debug （将一条信息抛出，日志级别为 debug）
console.info （输出一条通知信息）

‍

少用但实用

console.table （使用表格具象化展示数组或者JSON）
console.dir （用类似目录树的样式展示一个 DOM 元素）
console.time （传入一个定时器的名字，然后跟踪该定时器）

‍

02-3 Sources

左侧 Page 中展示源代码

右侧可以进行断点调试

调试工具栏

使用断点调试（在需要打断点处添加 debugger; 或者在源文件展示中点击行号添加端点）

然后点击各种按钮可以进行调试：

暂停
单步跳过
进入函数
跳出函数
单步执行
激活（关闭）所有断点
代码执行异常处自动

‍

调试区域

在源代码展示区域，鼠标移动到某个变量上，可以实时显示该变量的当前值
在调试的过程中可以在 Watch 中看到各个变量的当前值
Breakpoints 可以显示所有的断点
Scope 表示作用域
Call Stack 表示调用栈
还有各种类型的断点

‍

压缩后的代码如何调试

出于安全考虑，上线之前 JS 代码会被压缩 / 混淆，最后只有一行，且将变量进行名字的替换，整体不可阅读。

使用 SourceMap 可以调试，将压缩混淆之后的代码进行一个映射，从而定位到错误的位置。

压缩之后的代码会有一行注释，表示通过某个文件进行映射。

//# sourceMappingURL=bundle.js.map

‍

Source Map 文件含有源码，因此其大小肯定大于源码，那么文件会很大，那么怎么办？

既然 Source Map 可以映射源码，那压缩后的代码带上 Source Map 不就不安全了吗？

部署上线不带 sourmap，而错误监控程序的仓库会上传。

‍

开启 / 关闭 source map：

// 在 webpack 配置文件中
module.exports = {
  // ...
  devtool: "source-map",
}

打包之后 dist 中就会有 source map 的产物。

还有更多配置详见官网。

‍

02-4 Network

查看各种请求，以及其返回的结果

‍

根据瀑布图（waterfall）可以看出接口的串行/并行
在菜单栏可以设置模拟不同的网络环境：
- 3G
- 4G
- 无网络
排查是前端问题还是后端问题：
- 找到对应的接口，然后根据这个接口的结果（Preview）来判断
- 还可以看请求头（Headers）来判断是否为前端的错误

‍

02-5 Application

对应浏览器存储，比如：

localStorage
sessionStorage
cookie

在 Storage 项中还可以快速清除该站点的所有缓存

‍

02-6 Performance

和网页性能相关

‍

从上到下依次是：

控制面板
概览面板

FPS：每秒帧数
CPU：处理各个任务花费的时间
NET：各个请求花费的时间

线程面板

Frames：帧线程
Main：主线程（执行 JS，解析 HTML/CSS，完成绘制）
Raster：Raster线程，负责完成某个 layer 或者某些块（tile）的绘制

统计面板

‍

解决性能问题的步骤：

页面卡顿
查看 FPS 指标
寻找性能瓶颈
优化代码

‍

02-7 Lighthouse

进行性能分析，然后展示各种指标

‍

前端开发调试之 PC 端调试 | 青训营