前端调试知识 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天。看完了《前端必知的开发调试知识》，一个项目开发中难以避免会出现BUG，正所谓“欲先善其事，必先利其器”，能够合理的使用一些调试工具能让我们节省较多的时间。

前端DeBug特点

• 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用
• 多环境: 本地开发、线上环境
• 多工具: Chrome devTools等
• 多技巧: Console、sourceMap、代理等

Chrome DevTools

对于PC端来说，浏览器会有自带的调试工具，以谷歌浏览器为例，F12键(或者鼠标右键点击网页，点击检查)可以开启开发者调试工具，点击左上角的小箭头然后点击想要查看的元素，会调试区域定位到对应的。

console:开启调试工具之后可以修改元素的样式，例：当div高度或宽度不够时，需要调试，可在对应位置进行修改。 调试工具中的Console，可以在其中输入命令(console.log、console.table等)，将需要的信息反馈给我们。

1. console.log
2. console.warn
3. console.error
4. console.debug
5. console.info
6. console.table 可以以表格的形式展示数据
7. 占位符，例： %s：字符串占位符 可以突出重要信息

断点调试:不确定哪一步出错时，可以添加断点一步一步查看，但是需要一步一步查看

强制激活伪类：勾选后可以强制激活伪类状态

NetWork和Application

点击存储中的清除网站数据可以清除网页的本地存储数据

调试技巧

线上及时修改

1. 打开Sources面板的Overrides
2. 点击Select folders 选择一个本地的空文件夹（可新建）
3. 允许授权、修改代码
4. 点击DevTools三个小点-->More tools -->Changes，就可以看到所有修改

利用代理解决跨域问题

浏览器会有“同源策略”，会出现跨域的问题。但服务器之间无需同源，所以可以通过代理服务器接收浏览器的请求，代理服务器转发请求给真实服务器。

总结：以上的调试工具和方法基本上可以解决大部分的前端调试可能会出现的问题。