这是我参与「第五届青训营」伴学笔记创作活动的第22天，学习的是关于Web 调试技术的相关知识。

PC 端调试

Bug与Debug

Bug的产生

Bug无处不在，不可避免

DeBug的特点

多平台：浏览器、小程序等
多环境：本地开发环境、线上环境等
多工具：Chrome devTools、Spy-Debugger等
多技巧：Console、BreakPoint等

Chrome devTools

浏览器→单击右键→检查

1、Elements面板

显示和修改元素的基本结构与样式

修改路径：

hov与.cls按钮, 分别可以为元素设置伪类, 添加新类/应用/取消应用类

2、Console控制台

展示日志

console.log(): 打印一条普通（灰白色）日志
console.warn(): 打印一条警告的黄色日志
console.error(): 打印一条错误的红色日志
console.debug(): 蓝色输出
console.info(): 蓝色输出
console.table(arr): 具象化的展示JSON和数组数据
console.dir(obj): 用文件树的方式展示对象属性
占位符：为日志添加样式

%s: 字符串占位符

%o: 对象占位符

%c: CSS占位符

%d: 数字占位符

3、Sources面板

展示项目源代码

左侧区域：页面资源文件目录树
中间区域：代码预览区域
右上区域：DeBug工具栏
- 暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动
右下区域：断点调试器
- Watch: 变量监视
- Breakpoints: 管理断点
- Scope: 查看包含闭包的作用域列表
- Call stack: 查看当前JS代码的调用栈
- XHR/fetch breakpoints: 可以选择在有请求发生的时候设置断点
- DOM breakpoint: 在Element中设置, 达到条件后断开

压缩后代码的调试

由于前端代码天生具有“开源”属性,在上线之前一般会将代码进行压缩,防止自己的代码被别人阅读,压缩后的代码只有一行。

Source Map

将压缩后的代码与源码进行映射；

source Map文件的匹配模式: 在压缩后的文件末尾有//# Source MappingUrl = demo.js.map

4、Network

与请求相关

区域1：控制面板
区域2：过滤面板
区域3：概览区域
区域4：Request Table面板
区域5：总结面板
区域6：请求详情面板

5、Application

与展示存储相关

6、Performance面板

与网络性能相关

区域1:控制面板
区域2:概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时刻
- NET:各个央求花费的时刻
区域3:线程面板
- Frames:帧线程
- Main:主线程,担任实施JavaScript,解析HTML/CSS,结束制作
- Raster:Raster线程,担任结束某个layer或者某些块的制作
区域4:统计面板

7、Lighthouse

核心web指标

LCP: (Largest Contentful Paint / 最大内容绘制)
FID：(First Input Delay/首次输入延迟)
CLS：(Cumulative Layout Shift/累积布局偏移)

移动端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: 适合查看、控制网络请求，分析数据
Fiddler: 与Charles类似.适合windows平台
spy-debugger: 远程调试手机页面抓包
Whistle: 基于Node实现的跨平台Web调试代理工具

常用开发调试技巧

线上及时修改 Overrides

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

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

启用本地sourse map

使用代理工具Mock数据

小黄鸭调试大法

Web 调试技术 | 青训营笔记