这是我参与「第四届青训营 」笔记创作活动的第3天
前端必须知道的开发调试知识|青训营笔记
1、为什么要调试
解决bug通常要对代码进行调试，这样才能比较容易的找出关键性问题。掌握一个好的调试技巧是一个开发人员必备的基本技能。
2、前端Bug的特点
- 多平台
浏览器、小程序、桌面应用...
- 多环境
本地开发环境、线上环境...
- 多工具
chrome devTools、vConsole...
- 多技巧
Console、BreakPoint、sourceMap、代理...
3、Chrome DevTools
3.1动态修改元素和样式
F12打开控制台，点击元素Tab，右侧可以对元素进行在线编辑。
3.2Console 在代码中需要调式的地方输入console进行日志打印。
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table
具象化的展示JSON和数组数据
- console.dir
通过类似文件树的方式展示对象的属性
3.3Sorce Tab
3.4Network
3.5Application
3.6Performance
使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。
在火焰图上看到的圈起来的三条虚线，分别是:
蓝线代表 DOMContentLoaded 事件。 绿线代表首次绘制的时间。
3.7Lighthouse
4、移动端调试
1、连接本地进行调试
此时可通过代码中console、charles代理、断点进行代码的调试
2、没有连本地代码
可将移动端的网络加入代理（手机或pad的无线），输入电脑端的ip。此时可利用电脑端的网络代理charles进行查看接口请求情况，进行问题排查。
