这是我参与「第四届青训营 」笔记创作活动的的第7天
前端Debug的特点
多平台、多环境、多工具、多技巧
前端Debug的方法
Chrome DevTools
动态地修改元素和样式
点击.cls开启动态修改元素的class，输入字符串可以给元素添加类名，取消/勾选类名可以动态地查看类名生效效果，点击具体的样式值，可以进行编辑，游览器内容区域实时预览，Computed下点击样式里的箭头可以跳转到styles面板中的css规则。
Console 打印日志
- console.log 普通打印
- console.warn 警告打印
- console.error 错误打印
- console.debug debug打印
- console.info 信息打印
- console.table 具象化展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要信息：%s字符串占位符，%o对象占位符,%c样式占位符,%d数字占位符
Score Tab
将score调试页面分为四部分:左、中、右上、右下
左：页面资源文件目录树
中: 代码预览区
右上：Debug工具栏，包括调试工具
右下：断点调试器
注意：在右下区域中有作用域（scope）和调用堆栈（Call Stack），作用域中包含闭包，调用堆栈可以查看当前JavaScript代码的调用栈
压缩后的代码如何调试
前端代码由于天生具有开源属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后只有一行，变量使用a、b等替换，使得整体变得不可读。（代码混淆）
通过source-map方法可以调试压缩后的js代码
source-map开启后会在代码报错时将错误映射到源码上。
注意：source-map文件会比源文件大，所以一般项目上线时不会直接一起部署，而是将source-map部署到监控平台上。
解决性能问题
步骤：
- 1.页面卡顿
- 2.查看FPS指标
- 3.寻找性能瓶颈
- 4.优化代码
移动端H5调试
真机调试
方式： 1.使用数据线与手机联机来调试 2.使用二维码扫码调试
VConsole
- 日志
- 网络
- 节点
- 存储
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
常用工具：
Charles:适合查看、控制网络请求，分析数据
Fiddler:与Charles类似，适合Windows平台
spy-debugger:远程调试手机页面，抓包
Whistle:基于Node实现的跨平台Web调试代理工具
Node.js调试
官方调试方法：Inspector Protocol + Chrome Devtool
- 执行命令 node --inspect=8888 index.js
- chrome游览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调试面板中使用断点调试
