这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天
本课课程要点
- bug和debug
- 开发者工具使用
- 移动端H5调试
- Nodejs调试
- 其他技巧
课程内容笔记
前端bug的特点
- 多平台：浏览器、nodejs、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：chrom devtools
- 多技巧：console、代理
chrome devtools
这是最为常用的调试浏览器网页的工具
功能点有
- 动态修改元素和样式（css html）：
点击勾选、取消类名可以动态的查看类名的生效情况
点击具体的样式可以进行手工修改
强制激活伪类：选中具有伪类的元素，点击hover
- 控制台（js）
我们会非常经常使用控制台打印内容，但是很少知道可以自定义输出内容的“样式”，如图分别是log、warn、error、debug、info的不同样式信息，这样在调试时可以加以区分。
此外还可以console.table：具象化展示json和数组信息
console.dir：类似文件树展示对象属性
- Source资源
四个区域分别可以浏览资源、代码预览、debug、调试断点
- 网络
六大区域分别可以进行，功能控制、过滤文件、概览、请求列表展示、总请求展示、请求详情展示的功能
- application
这里可以调试与缓存、cookie相关的内容，具体包括：local storage\session storage\indexeddb\web sql\ cookie
- performance
主要是一些性能的展示
- lighthouse
常常用于一些前端项目技术指标的展示
主要包括：最大内容绘制（测试加载性能）、首次输入延迟（交互性测试）、累计布局偏移（测试视觉稳定性）
