移动端调试
约 803 字大约 3 分钟
移动端调试微信调试
2026-04-15
概述
移动端调试涉及 H5 页面、微信小程序、React Native 等多种场景。
微信 H5 调试
微信开发者工具
# 1. 下载微信开发者工具
# https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
# 2. 安装后打开，选择 "公众号网页调试"
# 3. 使用 Fiddler 进行抓包
# 设置手机代理到电脑 IP 和 8888 端口
# 4. 微信内置浏览器访问页面进行调试vConsole
在微信 H5 页面中嵌入 vConsole：
<!-- HTML 中引入 -->
<script src="https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js"></script>
<script>
new VConsole();
</script>// 或 npm 安装
import VConsole from 'vconsole';
const vConsole = new VConsole({
defaultPlugins: ['system', 'network', 'element', 'storage'],
maxLogNumber: 1000,
});
// 使用完毕后销毁
// vConsole.destroy();eruda
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>小程序调试
开发者工具调试
┌─────────────────────────────────────┐
│ 编辑器 调试器 项目 帮助 │
├─────────────────────────────────────┤
│ │
│ [模拟器] [源码] [调试面板] │
│ │
├─────────────────────────────────────┤
│ Console / Sources / Network │
└─────────────────────────────────────┘真机调试
# 1. 小程序开发者工具点击 "真机调试"
# 2. 确保手机和电脑在同一网络
# 3. 手机扫描二维码
# 4. 开始调试小程序 API 调试
// 模拟 API 响应
wx.setStorageSync('userInfo', {
name: 'Test User',
token: 'mock_token_123'
});
// 模拟登录态
wx.login = jest.fn(() => ({
code: 'mock_code',
errMsg: 'login:ok'
}));React Native 调试
方法一：Chrome 开发者工具
# 1. 手机开启调试模式
# 2. JS 打包时启用调试
npx react-native start --reset-cache
# 3. 手机上点击 "Debug with Chrome"
# 4. Chrome 打开 http://localhost:8081/debugger-ui方法二：React Native Debugger
# 安装
brew install react-native-debugger
# 或
npm install -g react-native-debugger
# 使用
# 1. 运行 React Native Debugger
# 2. 设置手机调试到 localhost:8081
# 3. 打开调试面板，可同时查看 Redux 状态Flipper 调试
# 1. 安装 Flipper
brew install flipper
# 2. React Native 项目配置
# iOS: pod install
# Android: 已内置
# 3. 启动 Flipper 并选择设备手机设备调试技巧
iOS Safari 调试
# 1. macOS 上 Safari 开启开发菜单
# Safari → 偏好设置 → 高级 → 勾选"在菜单栏中显示开发菜单"
# 2. iPhone: 设置 → Safari → 高级 → Web 检查器 开启
# 3. USB 连接后，Safari 开发菜单看到设备Android 设备调试
# 1. 开发者选项中开启 USB 调试
# 2. Chrome 地址栏输入 chrome://inspect
# 3. 点击设备列表中的页面进行调试
# 4. 使用 Elements 面板检查 DOM
# 5. 使用 Console 执行 JS 代码常见问题排查
| 问题 | 解决方案 |
|---|---|
| 页面空白 | 检查网络请求、控制台错误 |
| 样式异常 | 使用远程调试检查元素样式 |
| 点击无反应 | 检查事件绑定、阻止默认行为 |
| 滚动卡顿 | 检查长列表优化、滚动事件 |
| 内存泄漏 | 使用 Performance 监控 |
性能调试
Lighthouse 移动端测试
# 1. Chrome DevTools → Lighthouse
# 2. 选择移动端设备
# 3. 点击 "Analyze page load"React DevTools Profiler
// 在入口文件开启 Profiler
import { reportProfile } from 'react-devtools';
if (window.parent === window) {
// 生产环境收集
const data = JSON.stringify(reportProfile);
fetch('/api/profile', { method: 'POST', body: data });
}