这是我参与「第五届青训营」伴学笔记创作活动的第10天
知识要点
- PC端前端开发调试
- 移动端前端开发调试
Bug和Debug
Bug无处不在，但是可以通过各种工具来进行一个Debug
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
利用Chrome DevTools来进行Debug
- 动态修改元素和样式
- 通过console查看日志
- 不同类型的值在console输出的颜色不一样
- 各种输出方式都有，也可以通过console.table()来具象化显示JSON和表格数据
- console.dir(element)这个可以通过文件树的方式显示出element这个元素的属性
- 用source Tab来查看代码
- 通过断点等各种方法来对代码进行一个调试
- Scope和Call Stack
- 压缩后的代码如何调试 通过代码左下角的“优质打印”来对压缩后的代码进行复原
- 通过NetWork来查看网络请求
- 在网页载入的时候请求的数据及其内容
- 可以模拟弱网环境
- 和后端进行联调的时候，查看哪个接口出现问题
- 通过Performance面板来查看数据
- 通过lighthouse来查看Web性能指标
移动端调试
- 真机调试
- 直接使用手机与电脑连接，然后用手机开启浏览器进行调试
- Vconsole
- 使用代理工具进行调试
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机的请求都经过代理服务器
- NodeJS调试
前端常用的开发调试技巧
- 线上即时修改Overrides
- 利用代理服务器解决开发阶段的跨域问题
- 使用代理工具mock数据
个人感悟
其实在学习前端相关知识的时候，已经大致的了解过各种debug的手段，但是今天刘申老师给我们带来的课让我们对这些东西更加的了解。
