这是我参与「第五届青训营」笔记创作活动的第10天。
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
PC端（Chrom DevTools）
Elements
-
点击.cls开启动态修改元素的class
-
输入字符串可以动态添加类名
-
勾选/取消类名可以动态的查看类名生效效果
-
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
-
Computed下点击样式里的箭头可以跳转到sty面板下的css规则
强制激活伪类
- 选中具有伪类的元素，点击:hover
- DOM树右键菜单，选择Force State
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table具象化的展示JSON和数组数据
- console.dir通过类似文件数的方式展示对象的属性
Source
- 使用关键字debugger或点击代码预览区域的行号设置断点
- 执行到断点处代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试期Watch右侧点击
+可以添加对变量的监控，查看该变量的值 - 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前JS代码的调用栈
Network
查看网络情况
Application
Application面板展示与本地储存有关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance
查看当前页面性能
Lighthouse
查看当前页面Web指标
移动端
真机调试
IOS
- 使用Lightning数据线将iPhone和Mac连接
- iPhone开启Web检查器
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试
- 在弹出的Safari Developer Tools调试
Android
- 使用USB数据线将手机与电脑连接
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices并勾选Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
VConsole
- 日志(Logs)
- 网络(Network)
- 节点(Element)
- 存储(Storage)
- 手动执行JS命令行
- 自定义插件
代理工具
原理：
- 电脑作为代理服务器
- 手机通过HTTP请求连接到电脑
- 手机上的请求都经过代理服务器
Charles：
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号输入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts！软件给Mac电脑配置Hosts
- 手机访问开发环境页面
常用代理工具：
- Charles：适合查看控制网络请求
- Fiddler：与Charles类似，适用于Windws系统
- spy-debugger：远程调试手机页面，抓包
- Whistle：基于Node实现的跨平台Web调试代理工具
