这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天。

本篇笔记是对今天青训营的录播课前端开发调试课程的归纳总结及个人感悟。

一，Bug与Debug

1，Bug的产生及如何看待Bug？

• Bug or Feature
• No Code No Bug
• Bug是写代码中很正常的现象，不必过分焦虑。

2，前端Debug的特点

• 多平台（浏览器/Nodejs/小程序等等）
• 多环境（本地开发环境/线上环境）
• 多工具（Chrome devTools/Charles等等）
• 多技巧（console/breakpoint等等）

二，Chrome DevTools

动态修改元素和样式

• console.log / warn / error / debug / info
• Sorce Tab（Break point/watch/scope/call stack/source map）
• NetWork
• Application
• Performance
• Lighthouse

三，移动端H5调试

真机调试

VConsole

使用代理工具调试

原理：

• 电脑作为代理服务器
• 手机通过http代理连接到电脑
• 手机上的请求都经过代理服务器

一些常用代理工具

四，Nodejs调试

Inspector Protocol + Chrome Devtool

五，常用开发调试技巧

线上及时修改 Overrides

利用代理解决开发阶段的跨域问题：浏览器-代理服务器-真实服务器

启用本地 source map

使用代理工具Mock数据