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

前端开发调试之 PC 端调试

1.前端Debug的特点

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

2.Chrome DevTools

2.1 动态修改元素和样式

点击.cls开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到style面板中的css规则

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

选中具有伪类的元素，点击 :hov 勾选:hover
DOM树右键菜单，选择Force State，选中:hover

2.2 Console

console.log
console.warn
console.error
console.debug
console.info
console.table具象化的展示JSON和数组数据
console.dir通过类似文件树的方式展示对象的属性
占位符(给日志添加样式，可以突出重要的信息%s: 字符串占位符; %o：对象占位符; %c：样式占位符; %d：数字占位符;)

2.3 Source Tab

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

区域2：代码预览区域

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

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

区域4：断点调试器

2.3.1 Break Point 与 Watch

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

2.3.2 Scope与Call Stack

展开Scope可以查看作用域列表(包含闭包)

闭包可以参考：developer.mozilla.org/en-US/docs/…
展开Call Stack 可以查看当前javaScript代码的调用栈

关于调用栈可以参考：developer.mozilla.org/en-US/docs/…

2.3.3 Source Map

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

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

映射见：www.murzwin.com/base64vlq.h…

source Map 标准：docs.google.com/document/d/…

2.4 NetWork

区域1：控制面板

区域2：过滤面板

区域3：概览区域

区域4：Request Table面板

区域5：总结面板

区域6：请求详情面板

2.5 Application

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

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

点击左侧Application下的Stroage面板中的Clear Site Data可以清除网页的本地存储数据

2.6 Performance(与网页性能相关)

区域1：控制面板

区域2：概览面板

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

区域3：线程面板

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

区域4：统计面板

2.6.1 Performance运用示例

googlechrome.github.io/devtools-sa…

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

2.7 Lighthouse(查看性能)

Larqest Contentful Paint(LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。

First Input Delay(FID)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短

Cumulative Layout Shift(CLS)：累积布局偏移，测量视觉稳定性，为了提供良好的用户体验，页面的CLS应保持在0.1或更少

前端开发调试之移动端调试

1.真机调试

iOS

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

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

Android

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

直接使用手机扫码查看

2.VConsole

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

3.使用代理工具调试

原理：

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

以Charles为例：

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

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

4.常用的代理工具

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

NodeJS调试

1.Inspector Protocol + Chrome Devtool

执行命令node --inspect=8888 index.js

chrome浏览器访问服务

点击绿色node图标打开node调试面板(在chrome://inspect/#devices中配置network target)

在node调试面板中使用断点调试

2.Inspector Protocol + VS Code

Vs Code 点击运行

添加配置

启动调试

添加断点

查看变量、堆栈

总结

根据情况选择响应的方法来调试不同的内容，选择合适的

前端开发调试 | 青训营笔记