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

本堂课主要讲解的重点内容

PC端调试移动端调试

对讲解的部分知识点进行介绍

一前端Debug特点

1 多平台

浏览器、Hybrid、NodeJs、小程序、桌面应用等

2 多环境

本地开发环境、线上环境

3 多工具

Chrome devTools、.Charles、Spy-Debugger、Whistle、vConsole

4 多技巧

Console、BreakPoint、sourceMap、代理等

二调试工具

1 浏览器F12开发者工具

可以通过开发者工具调试伪类图片.png

1.1 开发者工具中Console的妙用

console.log
console.warn
console.error
console.debug
console.info

console.table
具象化的展示JSON和数组数据

console.dir
通过类似文件树的方式展示对象的属性

占位符
给日志添加样式，可以突出重要的信息

%s:字符串占位符；%o:对象占位符；%c:样式占位符；%d:数字占位符

1.2 开发者工具中Sources的妙用

图片.png

进行断点调试

使用关键字debugger或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover变量可以查看变量的值
在调试器Watch右侧点击+ ，可以添加对变量的监控，查看该变量的值

Scope && Call Stack

图片.png

1.3 开发者工具中Performance的妙用

1.4 开发者工具中Network的妙用

开源的代码 => 如何不被人看穿脆弱（代码写得好烂55

出于安全考虑，上线前js通常会被压缩，显示代码仅有一行，且变量用'a','b'等等来替换，使之变得不可阅读。

那么，压缩后的代码如何调试呢

mappings字段存储了源文件和Source Map的映射(Source Map可以映射源码)

英文，表示源码及压缩代码的位置关联
逗号，分隔一行代码中的内容。
分号，代表换行。

当上线时，同样是基于安全考虑，是不会将Source Map上传的（build打包的时候还是会带有的

个人总结

笔记内容目前主要是pc端的，移动端会在下一篇进行补充。
了解了一些前端开发调试的方法，很有帮助，以往自己摸索的不可避免地稍有缺漏，经过了一次系统的学习后，感觉很有帮助。

不过实话说，果然，减少bug产生的最好方式就是不写代码（doge

前端开发调试 | 青训营笔记