这是我参与「第四届青训营 」笔记创作活动的的第8天,是关于《前端必须知道的开发调试知识》的学习。
BUG
世界上第一个BUG还是1947年9月份在哈佛实验室的故障,起因是一只小虫子。
前端Debug的特点
- 多平台
- 多环境
- 多工具
- 多技巧
Chrome DevTools
控制台的妙用
console.xxx的用法
打印不同数据格式的颜色不同
代码的压缩
NEtWork
Application
Performance
Lighthouse
移动端调试
IOS
- 使用Lightning数据线将iPhone 与Mac相连
- iPhone开启Web检查器
- iPhone使用Safari 浏览器打开要调试的页面
- Mac打开Safari浏览器调试(菜单栏>开发iPhone设备名->选择调试页面)
- 在弹出的Safari Developer Tools中调试
Android
- 使用USE数据线将手机与电脑相连
- 手机进入开发者,勾选USB调试,并允许调试
- 电脑打开Chrome浏览器,在地址栏输入 chrome://inspect/#devices 并勾选Discov USB devices选项
- 手机允许远程调试,并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面