这是我参与「第五届青训营」伴学笔记创作活动的第 4 天

前端开发调试

Bug 与 Debug

Bug 的产生

Bug 来源于 1945 年美国海军电脑专家格蕾丝·赫柏在排除计算机故障的过程中发现的虫子。这个虫子被粘到“事件记录本”中，并注明为“第一个发现的虫子实例”。

前端 Bug 的特点

多平台：浏览器、Hybrid、Node.js、小程序、桌面应用等
多环境：本地开发环境、线上环境
多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
多技巧：Console、BreakPoint、sourceMap、代理等

Chrome DevTools

动态修改元素和样式

打开控制台，可以在 elements tab 下动态修改元素的 class，点击 .cls 输入样式名可以添加样式
输入字符串可以动态地给元素添加类名
勾选/取消类名可以动态地查看类名生效效果
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则，即可查看生效的样式代码
在某个 DOM 元素（例如 body）中的右键，选中 Capture node screenshot 即可对该节点内容进行截屏

Tips：可以用以下 2 种方式强制激活伪类

选中具有伪类的元素，点击：hov

DOM 树右键菜单，选中 Force State 选项下的各种状态

Console

可以选择等级，对日志进行分类查看：

console.log
console.warn
console.error
console.debug
console.info

通过表格具象化展示 JSON 和数组数据：

console.table

const goods = [
    {
        name: 'apple',
        count: 100,
        price: 10
    },
    {
        name: 'banana'
        count:110,
        price: 4
    },
    {
        name: 'orange',
        count: 30,
        price: 7
    }
]
console.table(goods)

通过类似文件树的方式展示对象的属性：

console.dir

可以通过占位符，给日志添加样式，可以突出重要的信息。

%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数组占位符

console.log('%s %o,%c%s', 'hello', {name: 'cooyper', age: 18}, 'font-size: 24px; color: red', 'Welcome to bytedance!');

根据输出数据的类型不同，console.log() 输出的文字颜色会不同，该特点可为 bug 排除服务

Sources Tab

区域 1：页面资源文件目录树

区域 2：代码预览区域

区域 3：Debug 工具栏，从左到右依次为：

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

区域 4：断点调试器

Break Point 与 Watch

在代码中使用关键字 debugger 或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
Watch 可以自定义监测某些变量的值
展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标 hover 变量可以查看变量的值
在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值

Scope 与 Call Stack

展开 Scope 可以查看作用域列表（包含闭包）
展开 Call Stack 可以查看当前 JavaScript 代码的调用栈

调试压缩混淆后的代码

前端代码天生具有“开源”属性，处于安全考虑，上线之前 JavaScript 代码通常会被压缩混淆，压缩后的代码只有一行，遍历使用 'a'、'b' 等替换，整体变得不可阅读。需要查看调试可使用 source map，对打包后的源码进行映射。

Source Map

mappings 字段存储了源文件和 Source Map 的映射

英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容
分号，代表换行

Source Map 通常用于监控，通常网站上线出于减小体积和安全问题的考虑，不会保留 Source Map。Source Map 生成的 map 通常上传至监控平台便于后期调试排除故障。

NetWork

区域 1：控制面板

区域 2：过滤面板

区域 3：概览面板

区域 4：Request Table 面板

区域 5：总结面板

区域 6：请求详情面板

Application

Application 面板展示与本地存储相关的信息

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

Performance

区域 1：控制面板

区域 2：概览面板

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

区域 3：线程面板

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

区域 4：统计面板

点击控制面板左上角的圆点录制按钮，开始录制网页运行过程，停止录制后即可查看网页各项性能分析。

优化流程：

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

Lighthouse

核心 Web 指标：

Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的 2.5 秒内发生。
First Input Delay（FID）：首次输入延迟测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。

移动端 H5 调试

真机调试

iOS

使用 Lightning 数据线将 iPhone 与 Mac 相连
iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
iPhone 使用 Safari 浏览器打开要调试的页面
Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
在弹出的 Safari Developer Tools 中调试

没有 iPhone 设备可以在 Mac AppStore 安装 Xcode 使用其内置的iOS 模拟器

Android

使用 USB 数据线将手机与电脑相连
手机进入开发者模式，勾选 USB 调试，并允许调试
电脑打开 Chrome 浏览器，在地址栏输入：chrome://inspect/#devices 并勾选 Discover USB devices 选项
手机允许远程调试，并访问调试页面
电脑点击 inspect 按钮
进入调试界面

使用手机扫码查看体验更佳

VConsole

日志（Logs）：console.log | info | error |..
网络（Network）：XMLHttpRequest，Fetch，sendBeacon
节点（Element）：HTML 节点树
存储（Storage）：Cookies，LocalStorage，SessionStorage
手动执行 JS 命令行
自定义插件

使用代理工具调试

原理：

电脑作为代理服务器
手机通过 HTTP 代理连接到电脑
手机上的请求都经过代理服务器

以 Charles 为例：

安装 Charles
查看电脑 IP 和端口
将 IP、端口号填入手机 HTTP 代理
Charles 允许授权
使用 SwitchHosts！软件给 Mac 电脑配 Hosts
手机访问开发环境页面

默认情况下，Charles 无法抓取到 HTTPS 的请求，需要安装证书。

常用代理工具

Charles：适合查看、控制网络请求，分析数据
Fiddler：与 Charles 类似，适合 Windows 平台
spy-debugger：远程调试手机页面，抓包
Whistle：基于 Node 实现的跨平台 Web 调试代理工具

Node.js 调试

Inspector Protocol + Chrome Devtool

执行命令 node --inspect=8888 index.js
chrome 浏览器访问服务
点击绿色 node 图标打开 node 调试面板（在 chrome://inspect/#devices 中配置 network target）
在 node 调试面板中使用断点调试

Inspector Protocol + VS Code

VS Code 直接点击运行

添加配置
启动调试
添加断点
查看变量、堆栈

常用开发调试技巧

线上及时修改 Overrides

打开 Sources 面板下的 Overrides
点击 Select folders for Overrides。选择一个本地的空文件目录
允许授权
在 page 中修改代码，修改完成后 Ctrl + s / command + s 保存
打开 devTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了

利用代理解决开发阶段的跨域问题

代理解决跨域.png

启用本地 source map

线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map 文件。

使用代理工具 Mock 数据

使用 Charles 工具可以进行 mock 代理，适用于后端接口尚未完成，前端先调试的情况：

右键选中要 mock 数据的接口，选择 save response，保存文件到本地。
本地打开保存的文件，编辑需要 mock 的数据并保存。
右键选中第一步的接口，选择 Map Local，Local Path 选择第二步的文件。

小黄鸭调试大法

传说中程序大师随身携带一只小黄鸭，在调试代码的时候会在桌上放上这只小黄鸭，然后详细地向鸭子解释每行代码，然后很快就将问题定位修复了。——《程序员修炼之道》

Web 调试技术 | 青训营笔记