前端青训营-工具篇-前端调试-02 | “朝闻道”知识分享大赛

[小年华°Moon]

这是我参加朝闻道知识分享大赛的第106篇文章。

移动端H5调试

真机调试

iOS（没有iPhone 设备可以在Mac App Store 安装Xcode 使用内置的 iOS 模拟器）

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

Android（直接使用手机扫码查看，体验更佳）

1. 使用USB数据线将手机与电脑相连
2. 手机进入开发者模式，勾选USB调试，并允许调试
3. 电脑打开Chrome浏览器，在地址栏输入：chrome:/inspect/#devices 并勾选 Discover USB devices 选项
4. 手机允许远程调试，并访问调试页面
5. 电脑点击inspect 按钮
6. 进入调试界面

VConsole

可以在页面内注入这个组件来查看页面的console控制台

• 日志(Logs)：console.log | info | error | ...
• 网络(Network)：XMLHttpRequest, Fetch, sendBeacon
• 节点(Element)：HTML节点树
• 存储(Storage)：Cookies, LocalStorage, SessionStorage
• 手动执行JS命令行
• 自定义插件

使用代理工具调试

原理

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

以 Charles 为例：（默认情况下，Charles无法抓取到HTTPS的请求，需要安装证书。）

1. 安装 Charles
2. 查看电脑IP和端口
3. 将 IP、端口号填入手机 HTTP 代理
4. Charles 允许授权
5. 使用 SwitchHosts! 软件给 Mac 电脑配 Hosts
6. 手机访问开发环境页面

常用代理工具

NodeJS调试

Inspector Protocol + Chrome Devtool

Inspector Protocol + VS Code

1. 添加配置
2. 启动调试
3. 添加断点
4. 查看变量、堆栈