Bug与Debug
前端Debug的特点
- 多平台 浏览器、Hybrid、Node.js、小程序、桌面应用等
- 多环境 本地开发环境、线上环境
- 多工具 Chrome devTools、Charles、Spy-Debuggger、Whistle、vConsole...
- 多技巧 console、BreakPoint、sourceMap、代理等
Chrome DevTools
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则 可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选择Force State
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table 具像化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息 %s:字符串占位符；%o:对象占位符；%c:样式占位符；%d:数字
Source
Network
Appplication
Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance
移动端调试
真机调试
ioS
- 使用Lightning数据线将iPhone与Mac相连
- iPhone开启Web检查器（设置->Safari->高级->开启Web检查器)
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试（菜单栏->开发->iPhone设备名->选择调试页面)
- 在弹出的Safari Developer Tools中调试
Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入chrome://inspect/#devices并勾选Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
VConsole
代理工具
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
以Charles为例：
- 安装Charles
- 查看电脑P和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!.软件给Mac电脑配Hosts
- 手机访问开发环境页面
常用代理工具
- Charles：适合查看、控制网络请求，分析数据
- Fiddler：与Charles类似，适合windows平台
- spy-debugger：远程调试手机页面
- Whistle： 基于Node实现的跨平台web调试代理工具
Node.js 调试
Inspector Protocol + Chrome DevTools
常用开发调试技巧
线上即时修改Overrides
- 打开Sources面板下的的Overrides
- 点击Select folders forOverrides。选择一个本地的空文件夹目录。
- 允许授权
- 在page中修改代码，修改完成后command+s保存
- 打开devTools,点击右上角的三个小点->More tools->Changes,就能看到所有修改了
利用代理解决开发阶段的跨域问题
启用本地Source Map
线上不存在Source Map时可以使用Map Local网络映射功能来访问本地的SourceMap文件。
使用代理工具Mock数据
总结
本节课分享了前端开发中PC端和移动端等的调试方法，重点讲述了Chrome DevTools等各栏功能和开发调试技巧
