Web调试技术 | 青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天，学习了掘金视频课《前端入门——工具篇》第一节课程 “前端开发调试之 PC 端调试” ，第二节课程 “前端开发调试之移动端调试” ，以下为本次的学习笔记：
前端开发调试之 PC 端调试
Bug与Debug
多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等
多环境
- 本地开发环境、线上环境
多工具
- Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole..
多技巧
- Console、.BreakPoint、sourceMap、代理等
调试方法
Element
点击 .cls 开启动态修改元素的 class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
Computed 下点击样式里的箭头可以跳转到styles面板中的 css 规则
可以用以下两种方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选择 Force State
Console
控制台，可以输入内容
打印代码里的日志
console.log打印普通日志
console.warn警告，颜色黄
console.error错误，颜色红
console.debug颜色蓝
console.debug
console.info打印对应的样式
console.table 具体化的展示 JSON 和 数组数据
console.dir 类似文件树的方式展示对象的属性
占位符 给日志添加样式，可以突出重要的信息 %s: 字符串占位符；%o: 对象占位符；%c：样式占位符；%d：数字占位符
Sorce Tab
Break Point 与 Watch
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
Scope 与 Call Stack
- 展开 Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前 javaScript 代码的调用栈
压缩后的代码如何调试
出于安全考虑，上线之前js会被压缩，压缩后只有一行，变量使用'a','b'替换
-
source Map
-
mappings 字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
-
NetWork
显示各种响应
Application
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- Indexed DB
- Web SQL
- Cookie
Performance
通过录制按键使用，查看耗时等数据
Lighthouse
性能分析
前端开发调试之移动端调试
移动端 H5 调试
-
真机调试
-
VConsole
- 日志（Logs）
- 网络（Network）
- 节点（Element）
- 存储（Storage）
- 手动执行JS 命令行
- 自定义插件
-
使用代理工具调试
-
原理：
- 电脑作为代理服务器
- 手机通过 HTTP 代理连接到电脑
- 手机上的请求都经过代理服务器
-
-
常用代理工具
- Charles：适合查看、控制网络请求，分析数据
- Fiddler：与 Charles 类似，适合 windows 平台
- spy-debugger：远程调试手机页面，抓包
- Whistle：基于 Node 实现的跨平台 Web 调试代理工具
Nodejs调试
- Inspector Protocol + Chrome Devtool
- Inspector Protocol + VS Code
常用开发调试技巧
- 线上即时修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地 source map
- 使用代理工具 Mock 数据
