这是我来参加[第五届青训营]笔记创作活动的第十天。
今天跟着刘申老师学习了Web的PC端和移动端调试技术。
Bug的产生：
前端Debug的特点
1、多平台：浏览器、Hybrid、Node.js、小程序、桌面应用等。
2、多环境：本地开发环境、线上环境。
3、多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole等。
4、多技巧：Console、BreakPoint、sourceMap、代理等等。 Chrome DevTools：可以动态修改元素和样式，选择样式生效与否，预览修改等等；
1.Console：1、不同类型输出的不一样的颜色；2、console.table：数据化表格展开；3、console.dir:可以文件树打印出各种属性。
2.Sorce：三个区域，区域一：页面资源文件目录树；区域二：展示代码；区域三：断点调试。
加断点：dabugger。可把鼠标移动到某一个值的位置，在断电调试的时候，区域三可以看到值和所有断点。
3.Scope：作用域、闭包；Call Stack：调用栈
4.Network：
5.Application:展示与本地存储相关的信息
移动端H5调试：
1.IOS需要mac系统、安卓win、mac系统都可以；
2.VConsole日志、网络、节点等
Node.js调试
1.InspectorProtocol+ChromeDevtool
2.InspectorProtocol+VSCode
常用的开发调试技巧：线上修改Overrides、利用代理解决开发阶段的跨域问题、启用本地的Source Map、使用代理工具Mock数据等等。
总结：通过今天的学习，了解到前端开发常用的调试工具和技巧，在以后的开发过程中启到重要的作用，受益匪浅、
