🐛 移动端调试技巧
移动端调试比 PC 端复杂，以下是常用调试方案。
调试方案对比
| 方案 | 适用场景 | 操作方式 |
|---|---|---|
| Chrome DevTools 模拟 | 开发阶段快速调试 | F12 → 切换设备模式（Toggle Device Toolbar） |
| USB 真机调试 | Android Chrome 调试 | USB 连接 → chrome://inspect |
| Safari 远程调试 | iOS Safari 调试 | Mac Safari → 开发 → iPhone |
| vConsole | 内嵌调试面板（推荐） | 引入 vConsole JS，页面内显示控制台 |
| Charles / Fiddler | 抓包 / HTTPS 代理 | 设置代理，查看请求和响应 |
| eruda | 移动端调试面板 | 类似 vConsole，轻量级 |
vConsole 快速集成
<!-- ===== 引入 vConsole 移动端调试 ===== -->
<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// 仅在开发/测试环境启用
if (location.hostname === 'localhost' || location.search.includes('debug=1')) {
new VConsole();
}
</script>真机调试技巧
📱 常用真机调试方法
- 局域网访问：
npx serve -l 3000后手机访问http://你的IP:3000 - ngrok 内网穿透：
ngrok http 3000获取公网 URL - 数据线 + Chrome：Android 手机 USB 连接，chrome://inspect 调试
- alert 快速定位：最简单粗暴的调试方式
alert(JSON.stringify(data)) - 注入调试信息：在页面底部固定显示关键状态变量