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

课程重点

• Elements
• Console
• Source
• Performance
• Network
• 真机调试
• 代理调试
• 常用工具

Bug与Debug

前端Debug的特点

• 多平台

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

• 多环境

  • 本地开发环境、线上环境

• 多工具

  • Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole等

• 多技巧

  • Console、BreakPoint、sourceMap、代理等

Chrome DevTools

• 动态修改元素和样式
• Console
• Sorce Tab
• Break Point与Watch
• Scope与Call Stack
• Source Map
• NetWork
• Application
• Performance
• Lighthouse

移动端H5调试

真机调试

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

• 日志（logs）：console.log|info|error....
• 网络（network）：XMLHTTPRequest，Fetch,sendBeacon
• 节点（element）：HTML节点树
• 存储（storage）：cookies，localstorage，sessionstorage
• 手动执行JS命令行
• 自定义插件

使用代理工具调试

原理：

• 电脑作为代理服务器
• 手机通过HTTP代理连接到电脑
• 手机上的请求都经过代理服务器
• 以Charles为例：
  • 安装Charles
  • 查看电脑IP和端口
  • 将IP、端口号填入手机HTTP代理
  • Charles允许授权
  • 使用SwitchHosts!软件给Mac电脑配Hosts
  • 手机访问开发环境页面

常用代理工具

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

总结

本节课围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，应该掌握的开发调试知识。为了更好地知悉不同场景下 debug 方法，本课还分为 PC 端与移动端展开解读，本节主要聚焦于 PC 端调试。在讲解完 PC 端调试后，又进一步带来移动端调试，通过对理论拆解，逐步剖析在移动端调试中真机与代理调试的过程步骤，并在还带来有关常用工具的推荐，获益匪浅。