- 这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天
课程介绍
- 在程序员的世界中，BUG 一词相信同学们再熟悉不过了，本节课将围绕前端开发中所遇见的 BUG 出发，讲解作为一名合格的前端开发人员，你应该掌握哪些开发调试知识。为了方便大家更好地知悉不同场景下 debug 方法，讲师将分为 PC 端与移动端展开解读，本节主要聚焦于 PC 端调试。
- 在讲解完 PC 端调试后，本节课将进一步带来移动端调试，通过对理论拆解，逐步剖析在移动端调试中真机与代理调试的过程步骤，并在课程最后为大家带来有关常用工具的推荐
课程重点
- Elements
- Console
- Source
- Performance
- Network
- 真机调试
- 代理调试
- 常用工具
Bug与Debug
前端Debug的特点
- 多平台
- 浏览器、Hybrid、NodeJS、小程序、桌面应用等
- 多环境
- 本地开发环境、线上环境
- 多工具
- Chrome devTools、Charles....
- 多技巧
- Console、BreakPoint...
Chrome DevTools
- 动态修改元素和样式
- Console
- Sorce Tab
- Break Point与Watch
- Scope与Call Stack
- Source Map
- NetWork
- Application
- Performance
- Lighthouse
移动端H5调试
真机调试
IOS
- 使用Lightning数据线将iPhone与Mac相连
- iPhone开启Web检查器
- iPhone使用Safari浏览器打卡要调试的页面
- Mac打开Safari浏览器调试
- 在弹出的Safari Developer Tools中调试
Android
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome浏览器，在地址栏输入：chrome://inspect/#devices 并勾选Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
VConsole
使用代理工具调试
原理：
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器 以Charles为例：
- 安装Charles
- 查看电脑IP和端口
- 将IP、端口号填入手机HTTP代理
- Charles允许授权
- 使用SwitchHosts!软件给Mac电脑配Hosts
- 手机访问开发环境页面
常用代理工具
NodejS调试
Inspector Protocol+Chrome Devtool
Inspector Protocol+VS Code
- VS Code点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量、堆栈
常用开发调试技巧
- 线上即时修改Overrides
- 利用代理解决开发阶段的跨域问题
- 启用本地source map
- 使用代理工具Mock数据
- 小黄鸭调试大法
引用参考
字节青训营第十节课Web调试技术
