前端开发调试

前言：

“调试工具是提高效率重要的利器，继续往前端的方向走的话，工欲善其事必先利其器，可以先学如何去调试定位问题和排查性能问题”

上个月在参加前端训练营，导师和我说了上面一段话，调试非常重要，自己开发的时候也只是会console.log……emmm

新的一场前端训练营又开始了，课程中安排了《前端必须知道的开发调试知识》，借此系统学习一遍开发调试并简单记录笔记😆

1. 前端Debug的特点

• 多平台：浏览器、Hybrid、NodeJs、小程序、桌面应用……
• 多环境：本地开发环境、线上环境
• 多工具：Chrome DevTools、Charles、Spy-Debugger、Whistle、VConsole……
• 多技巧：Console、BreakPoint、sourceMap、代理……

2. Chrome DevTools

2-1 Elements Tab

• .cls 动态修改元素的class，输入字符串动态增加类名
• 勾选/取消类名
• 点击具体的样式值，进行编辑，实时预览
• Computed下点击样式里的剪男头可以跳转到styles面板中的css规则
• 强制激活伪类
  • 选中具有伪类的元素，点击 :hov
  • DOM树右键菜单，选择 Force State

2-2. Console Tab

• console.log
• console.warn
• console.error
• console.debug
• console.table：具象化的展示JSON和数组数据
• console.dir：主要用于查看dom元素
• 占位符：给日志添加样式，可以突出重要的信息
  • %s：字符串占位符
  • %o：对象占位符
  • %c：样式占位符
  • %d：数字占位符

2-3. Sources Tab

调试行为：

• Continue / pause 继续/暂停
• Step Over 单步执行时，遇到子函数时不会进行子函数内执行，而是执行完整个子函数
• Step Into 单步执行时，遇到子函数会进入内部并且继续单步执行
• Step Out 单步执行进入子函数内部时， 可以执行完子函数余下部分，并且返回上一层函数调用处
• Restart 重新执行
• Stop 关闭

压缩后的代码难以调试，使用webpack打包生成 Source Map

• 用于映射源码
• mappings 字段存储了源文件和 Source Map的映射
  • 英文，表示源码及压缩代码的位置关联
  • 逗号，分割一行代码中的内容
  • 分好，代表换行

2-4. Performance Tab

2-5. Network Tab

• 模拟网速限制
• 选择查看对应请求

2-6. Application Tab

展示与本地存储相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookies

3. 移动端 H5 调试

真机调试 | 代理调试 | 常用工具

3-1 真机调试

IOS：

1. 使用 lightning 数据线将 iPhone 与 Mac 相连
2. iPhone 开启 Web 检查器（设置 -> Safari -> 高级 -> 开启 Web 检查器）
3. iPhone 使用 Safari 浏览器打开要调试的页面
4. Mac 打开 Safari 浏览器调试（菜单栏 -> 开发 -> iPhone 设备名 -> 选择调试页面）
5. 在弹出的 Safari Developer Tools 中调试

没有 iPhone 设备可以在 Mac APP Store 安装 Xcode 使用其内置的 IOS模拟器

Android：

1. 使用 USB数据线将手机与电脑相连
2. 手机进入开发者模式，勾选 USB调试，并允许调试

3. 电脑打开 Chrome 浏览器，在地址栏输入：Chrome://inspect/#devices 并勾选 Discover USB devices 选项

4. 手机允许远程调试，并访问调试页面

5. 电脑点击 inspect 按钮
6. 进入调试界面

使用手机扫码，处于同一个网络下即可

3-2 使用代理工具调试

原理：

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑
• 手机上的请求都经过代理服务器

常用工具

• Charles：适合查看、控制网路请求，分析数据
• Fiddler：与Charles类似，适合windows平台
• spy-debugger：远程调试手机页面，抓包
• Whistle：基于Node实现的跨平台Web调试代理工具

4. 常用开发调试技巧

4-1 线上即时修改 Override

通过控制台调试修改了样式，使用此功能记录修改的样式，保存

1. 打开 Sources 面板下的 Overrides
2. 点击 Select folders for Overrides，选择一个本地的空文件夹目录
3. 允许授权
4. 在page中修改代码，修改完成后command + s 保存
5. 打开 DevTools，点击右上角的三个小点 -> More tools -> Changes，就能看到所有修改了

4-2 利用代理解决开发阶段的跨域问题

4-3 启用本地 source map

线上不存在 Source Map 时可以使用 Map Local 网络映射功能来访问本地的 Source Map文件