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

一、本堂课重点内容：

web开发之PC端调试
web开发之移动端调试

二、详细知识点介绍：

引言

Bug

不想写bug的唯一办法是不写代码

只要写代码就躲不开Bug

所以学会Debug很重要

前端Debug特点

多平台
多环境
多工具
多技巧

Chrome DevTools

打开网页 -> 右键 -> 检查即可打开

动态修改元素样式

Elements -> Stytles

可以实时编辑样式和类名，方便调试

伪类的设置：右键选择元素的状态（强制激活伪类状态）

console

控制台、展示日志

方便输出bug信息 or 运行点信息等

有不同的日志等级方便查找

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

特殊：

console.table 具象化展示JSON和数组数据

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

console.time()

Sources

可以展示项目源代码

有Debug工具栏（有类似编译器的单步执行、断点调试等功能）

在源代码中加入debugger;即可在此处断点

还有Scope和Call Stack

Scope可查看作用域列表（闭包）

Call Stack可展开查看当前JS代码调用栈

由于开源属性，出于安全/隐私考虑，代码一般会被压缩，整体变得不可阅读

如何调试压缩后的代码：

结合source map做映射（webpack）

但为了安全，一般map文件只在监控平台上传，线上版本无map文件

network界面

查看请求/获取等信息、请求时间

可以模拟不同网络质量的环境

Application

和存储相关的

Performance

控制面板、概览面板、线程面板、统计面板等

主要是为了方便优化性能的

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

Lighthouse

查看核心web指标

LCP：最大内容绘制，测试加载性能。（<2.5s）

FID：首次输入延迟，测试交互性(<100ms)

CLS：累积布局偏移，测试视觉稳定性(<0.1)

会有一些性能优化提示及建议

移动端调试

真机调试

iOS

数据线连接iphone和Mac
iPhone开启Web检查器
iPhone使用Safari浏览器打开调试页面
Mac打开Safari浏览器调试
在弹出的Safari Developer Tools中调试

安卓

数据线连接手机与PC
手机进入开发者模式，勾选USB调试并允许调试
电脑打开Chrome浏览器，
进入 chrome://inspect/#devices并勾选Discover USB devices选项
手机允许远程调试并访问调试页面
电脑inspect

or直接用手机扫码查看

VConsole

类似于PC端调试

代理工具调试

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

如Charles

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

常用

Charles（别名小花瓶）：付费

适合查看、控制网络请求、分析数据

Fiddler：

与Charles类似，适用Windows平台

spy-debugger：

远程调试手机页面、抓包

Whistle：

基于Node实现的跨平台Web调试代理工具

Node.js调试

直接使用官方工具

Inspector Protocol +VS Code

常用开发调试技巧

线上即时修改：

Overrides，可保存修改的临时状态，在Dev Tools能看见改变处

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

启动一个node服务器实现转发等

软件实现代理转发

启用本地source map：

适用于已部署上线的调试，没有线上source map

使用Map Local网络映射功能访问本地的map文件

使用代理工具Mock数据：

联调数据时可先前端自己造数据

选中要mock数据的接口，保存响应，打开文件编辑mock的数据并保存，然后选择Map Local/Local Path时选上一步的文件

终极方法:小黄鸭调试大法：

给小黄鸭一步一步讲解代码

没有小黄鸭可用朋友/同学/同事代替

（哈哈）

三、课后个人总结：

今天的课程主要介绍了前端的web调试技术，众所周知，编程相关就离不开bug，debug能力是程序员必备技能。本节课主要讲述了web调试的各种工具以及方法，大体上思路与普通的调试差不多，差别在于web调试有很多接口与调试环境、调试指标等，所以这项技术我们必须打好基础，才能更好的去学习前端知识。

如有错误，欢迎指出。谢谢。

[web调试技术 | 青训营笔记]