这是我参加[第五届青训营]伴学笔记创作活动的第9天
本堂课程重要知识
- 了解PC端前端调试
- 了解移动端前端调试
PC端调试
debug的特点
Chrome DevTools
在页面上右键 ---> 检查工具打开DevTool，或者直接F12键打开。
Elements（元素）
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed（计算样式）下点击样式里的箭头可以跳转到styles面板中的CSS规则
强制激活伪类 (用于观察DOM悬浮等效果)
- 选中具有伪类的元素， 点击右侧:hov;
- DOM树右键菜单，选择Force State（强行执行状态）.
其他功能：截取节点屏幕截图、滚动到视野范围等其他有趣功能
Console（控制台）
结果如下：
console.time()
字符串是灰色，整数是蓝色
Source（源代码）
此处如何调试代码：
- 在2区域需要调试或暂停的代码前输入debugger;
- 点击需要调试代码的行号或右侧区域4的breakpoints界面，出现圆点即可
- 将鼠标移到关联最终结果的变量上
- 在右侧区域4的watch界面中搜索需要查看的变量值
其他可能会用到的界面
如何调试压缩后的代码
压缩和混淆代码的原因：安全性与代码质量（过于简陋）
通过webpack、uglifyJS、terser等工具使用sorceMap
开启/关闭方式：比如在webpack配置文件中module添加devtool:'source-map'，然后在npm run build时
Performance（性能）
当我们对网站性能要求比较高的时候，可以在performance面板中查看每一帧、每一毫秒中执行了什么，汇总信息查看加载某一个模块花费的时间
- fps 每秒帧数
- cpu 处理各个任务花费的时间
- net 各个请求花费时间
- frames 帧线程
- main 主线程 负责执行JavaScript 解析HTML/CSS 完成绘制
- Raster raster线程 负责完成某个layer或者某些块（tile）的绘制
- 统计面板 官网提供测试网站
页面卡顿->查看FPS指标->寻找性能瓶颈->优化代码
查看FPS指标：
- 查看Frame的情况
- 设置面板中找到rendering，然后勾选Frame rendering states，低于60容易丢帧
性能瓶颈：通过main界面中的红色部分查看问题，然后找到对应的代码行
Lighthouse
Network（网络）
与网络请求相关的都在这块，包括模拟网速，查看请求的各种资源，接口运行时间（串行和并行） 最底部是总加载资源数和各种节点加载速度
Application（应用）
Application面板展示与本地存储相关的信息：
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
application面板中点击Stroage面板中下拉可见clear site data 可以清除网页的本地存储数据
移动端
真机调试
iOS和Android
VConsole
需要下载组件
使用代理工具调试
常用代理工具：
- Charle（别名小花瓶，适合查看、控制网络请求、分析数据）
- Fiddler（与Charles类似，适合windows平台）
- spy-debugger（远程调试手机页面，抓包）
- whistle（基于node实现的跨平台web调试代理工具）
