这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天。
今日学习内容：前端的PC端调试技术与移动端调试技术
一、Bug与Debug
前端Debug的特点：
- 多平台：浏览器、Hybrid、NodeJS、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：Chrome Devtools、Charles、Spy-Debugger、Whistle、vConsole等
- 多技巧：Console、BreakPoint、sourceMap、代理等
二、Chrome Devtools
1. Elements
动态修改元素和样式：
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 Styles 面板中的CSS 规则
激活伪类方法：
- 选中具有伪类的元素，点击:hov
- DOM树右键菜单，选择Force State
2. Console
具象化展示JSON数据：
console.time()&&console.timeEnd()：启动一个计时器来跟踪某一个操作的占用时长。每一个计时器必须拥有唯一的名字，页面中最多能同时运行 10,000 个计时器。当以此计时器名字为参数调用
console.timeEnd()时，浏览器将以毫秒为单位，输出对应计时器所经过的时间。
3. Source
BreakPoint与Watch：
- 使用关键字
Debugger或代码预览区域的行号可以设置断点 - 执行到断点处时代码暂停执行
- 展开
BreakPoint列表可以查看断点列表，勾选/取消可以激活/禁用对应断点 - 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击 + 可以添加对变量的监控，查看该变量的值
压缩后的代码调试：
出于安全考虑，上线之前的JavaScript代码通常会被压缩 --> sourceMap
4. Network
5. Performance
6. Light House
三、移动端H5调试
1. 真机调试
ios：
没有iphone设备可以在mac app store安装xcode使用其内置的ios模拟器
Android：
也可以直接通过手机扫码查看
2. VConsole
在页面中注入组件
3. 使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都通过代理服务器
四、NodeJS调试
- 执行命令
node -inspect=8888 index.js - chrome浏览器访问服务
- 点击绿色node图标打开node调试面板
- 在node调试面板中使用断点调试
五、前端常用开发调试技巧
1. 线上即时修改
2. 利用代理解决跨域
3. 启用本地 source map
线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的Source Map文件
