移动端调试

lishihuan大约 5 分钟

移动端调试

当前记录移动端如何开启vConsole和在电视端开发如果无法使用vConsole解决的方案

1. 开启vConsole

  • 引入包

    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js "></script>

  • 初始化

    var vConsole = new VConsole();
console.log('vConsole 初始化成功');

2. eruda使用【比vConsole更好用】

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

或者

if (process.env.NODE_ENV !== 'production') {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/eruda';
  script.onload = () => {
    window.eruda && window.eruda.init();
  };
  document.body.appendChild(script);
}

3. 如何开启adb

如果安装了Android SDK则 在 platform-tools 目录下 有adb.exe 在该目录下cmd执行命令，或者配置环境变量

本机：D:\software\sdk\platform-tools

  • 开启设备的开发者模式，并且开启USB调试 【各家都不一样，可以百度】

    • 开发者选项中 开启"USB调试"和"网络调试"

  • 查询设备的IP地址

  • adb connect 192.168.0.112

   # 连接电视（替换为您的电视 IP）
   adb connect 192.168.1.100:5555
   
   # 查看是否连接成功
   adb devices
   
   # 实时查看日志
   adb logcat
   
   # 只查看崩溃日志
   adb logcat *:E
   
   # 查看特定应用的日志（替换为您的应用包名）
   adb logcat | findstr "H5C6811ED"
   
   # 将日志保存到文件
   adb logcat > crash_log.txt
   
   
   # 清除现有日志
   adb logcat -c
   
   
   # 查看已安装的应用列表
   adb shell pm list packages
   
   # 查看应用详细信息
   adb shell dumpsys package H5C6811ED
   
   
   
    # 强制停止应用
   adb shell am force-stop H5C6811ED
   
   # 启动应用
   adb shell am start -n H5C6811ED/.MainActivity
   
    # 查看崩溃报告
    adb shell dumpsys dropbox
    
    
     # 只显示错误和警告
   adb logcat *:E *:W
   
   # 按标签过滤
   adb logcat -s System.err AndroidRuntime
   
   
   # 监控崩溃
   adb logcat | findstr "AndroidRuntime"
   
    # 查看内存使用情况
   adb shell dumpsys meminfo H5C6811ED
   
   
    # 查看网络连接状态
   adb shell netstat
   
   # 先清除日志：
   adb logcat -c
   
   #启动实时监控：
    adb logcat *:E | findstr "AndroidRuntime"
    
    
    adb shell

注： 这时是可以浏览器调试 【DevTools 调试】

4. 通过页面输出的方式

<script src="../../../js/debug-helper.js"></script>

// 调试信息显示函数
function showDebugInfo(message) {
	console.log(message);
	mui.toast(message);
}

// 需要输出的地方，加下面的语句
showDebugInfo('检查脚本加载状态...');
  • 创建 debug-helper.js

当前工具类，包含一个推送，但是实际好像没有正真用上，暂不深入了解

// debug-helper.js
(function () {
  const config = {
    enableUpload: false, // ✅ true = 上传日志到日志服务器
    uploadUrl: 'http://192.168.0.103:3000/log', // ⬅ 修改为你本机 IP 和端口
  };

  function initDebugHelper() {
    const logBox = document.createElement('div');
    Object.assign(logBox.style, {
      position: 'fixed',
      top: '0',
      left: '0',
      width: '100%',
      // maxHeight: '300px',
      overflowY: 'auto',
      backgroundColor: 'rgba(0,0,0,0.85)',
      color: '#0f0',
      fontSize: '12px',
      zIndex: '99999',
      padding: '5px',
      whiteSpace: 'pre-wrap'
    });
    document.body.appendChild(logBox);

    const appendLog = (msg, type = 'log') => {
      const prefix = `[${new Date().toISOString()}][${type.toUpperCase()}]`;
      const finalMsg = `${prefix} ${msg}\n`;
      logBox.textContent += finalMsg;

      if (config.enableUpload) {
        fetch(config.uploadUrl, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ time: Date.now(), type, msg })
        }).catch(() => {});
      }
    };

    ['log', 'error', 'warn'].forEach(type => {
      const original = console[type];
      console[type] = function (...args) {
        original.apply(console, args);
        try {
          const msg = args.map(a => (typeof a === 'object' ? JSON.stringify(a) : a)).join(' ');
          appendLog(msg, type);
        } catch (e) {
          appendLog('log error: ' + e.message, 'error');
        }
      };
    });

    // Hook fetch
    const rawFetch = window.fetch;
    window.fetch = function (...args) {
      appendLog(`[fetch] ${args[0]}`, 'fetch');
      return rawFetch.apply(this, args).then(res => {
        appendLog(`[fetch response] ${res.status}`, 'fetch');
        return res;
      });
    };

    // Hook XMLHttpRequest
    const originalXhrOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function (method, url, ...rest) {
      this.addEventListener('load', function () {
        appendLog(`[xhr ${method}] ${url} → ${this.status}`, 'xhr');
      });
      return originalXhrOpen.call(this, method, url, ...rest);
    };

    appendLog('✅ debug-helper.js 启用');
  }

  // 等待 DOM 准备好后再执行
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initDebugHelper);
  } else {
    initDebugHelper();
  }
})();

5. 浏览器调试 【DevTools 调试】

目前针对的是安卓端

  • chrome: chrome://inspect/#devices

  • edge: edge://inspect/#devices

Android App 中启用 WebView 调试模式

浏览器需要开启 WebView 调试模式 才能在 浏览器中进行调试

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}
image-20250708091224972
image-20250708091224972

Spy-Debugger

Spy-Debugger 是一款开源的、专为移动端 Web 页面调试设计的代理调试工具，适用于调试 Android 和 iOS 上的 H5 页面，**特别适合你这种「iOS 原生 + H5 混合 App 项目」**场景，不依赖于 Mac 也能对 iOS 页面进行调试，非常友好。

  • 安卓端的开发，应该是要开启调试模式 [Android App 中启用 WebView 调试模式](#Android App 中启用 WebView 调试模式) --没验证过不开启
  • 手机端需要开启 开发者模式和 无线调试 【目前能确定一定要开启开发者模式， 无线调试 是否需要开启待定】
  • 目前IOS调试不通，不确定原因 ，后期如果有需求可以参考 https://segmentfault.com/a/1190000019462388?sort=newestopen in new window 尝试安装证书

1. 安装 spy-debugger

npm install -g spy-debugger

如果网络缓慢建议设置淘宝源：

npm config set registry https://registry.npmmirror.com

2. 启动 spy-debugger

spy-debugger

默认启动监听：

如需指定端口：

spy-debugger --port 7002 --web-port 8000

3. 配置手机调试

步骤如下：

  1. 手机连接与电脑相同 Wi-Fi

  2. 查看电脑 IP 地址 在命令行输入：

    ipconfig

    找到无线网卡的 IPv4 地址，如 192.168.1.100

  3. 在手机上设置 HTTP 代理

    • 代理服务器：填写你电脑的 IP（如 192.168.1.100）
    • 端口：9888

  4. 手机访问目标页面（H5 页面）

    • App 中的 WebView 页面也会自动进入 spy-debugger 的监听队列。

4. 使用调试界面

打开浏览器访问： 👉 http://127.0.0.1:7001open in new window

你将看到：

  • 请求抓包列表（可查看 Headers、Body）
  • 页面列表（可以远程调试 H5 页面）
  • 点击某个页面「调试」，即可打开 Chrome DevTools，对页面进行断点、查看 DOM、样式、控制台输出等。

5. 高级功能说明

功能说明
JS/CSS 注入可在指定页面中自动注入调试代码，如加载 vConsole
替换请求可在界面中配置某些接口请求的替换路径
HTTPS 支持会自动生成证书，手机需安装并信任证书

6. HTTPS 页面调试支持（iOS 重点）

步骤：

  1. 在手机 Safari 打开页面 http://mitm.it
  2. 下载并安装证书
  3. 设置 > 通用 > 关于本机 > 证书信任设置，信任该证书

7. 常见问题排查

问题解决办法
页面打不开检查手机是否连接了正确 Wi-Fi，电脑 IP 是否正确
请求不出现检查是否正确设置了手机代理，重启 spy-debugger
iOS App 不加载某些 App 对证书较严格，尝试注入 vConsole 或使用 Eruda
DevTools 没反应建议关闭其他 DevTools 工具占用端口，再尝试

8. 搭配工具推荐

工具用途
Erudaopen in new window页面嵌入式调试，适合调试无法代理的页面
vConsoleopen in new window微信团队出品的移动端调试工具
Charlesopen in new window更高级的抓包工具，可与 spy-debugger 互补