移动端调试：远程调试、Eruda 和 VConsole 的救场技巧

移动端调试一直是前端开发中的痛点，尤其是面对复杂的用户环境和设备差异。远程调试工具、Eruda 和 VConsole 提供了多种解决方案，帮助开发者快速定位问题。下面从实际场景出发，详细解析这些工具的使用技巧和避坑指南。

远程调试：Chrome DevTools 实战

通过 USB 连接 Android 设备后，在 Chrome 地址栏输入 chrome://inspect 即可看到可调试的页面列表。关键技巧在于：

1. 端口转发：解决本地开发服务器访问问题

adb reverse tcp:8080 tcp:8080  # 将设备8080端口映射到本地

2. 真机元素审查的常见问题：

• 遇到空白页面时检查 webview.setWebContentsDebuggingEnabled(true)
• 样式错乱时尝试关闭手机省电模式
• 使用 document.designMode = "on" 直接编辑页面文本

3. 网络请求拦截的高级用法：

// 在Console中重写fetch方法
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log('Intercepted:', args);
  return originalFetch(...args);
};

Eruda：移动端的控制台瑞士军刀

通过 CDN 引入只需一行代码：

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

实际项目中的优化方案：

1. 按需加载策略：

if (/mobile/i.test(navigator.userAgent) && location.search.includes('debug')) {
  import('eruda').then(eruda => eruda.init());
}

2. 自定义插件开发示例：

eruda.add({
  name: 'Custom',
  init() {
    this.button('获取定位', () => {
      navigator.geolocation.getCurrentPosition(pos => {
        console.log(pos.coords);
      });
    });
  }
});

3. 性能监控实战：

const timing = performance.timing;
eruda.get('performance').set('timing', {
  'DNS查询': timing.domainLookupEnd - timing.domainLookupStart,
  'TCP连接': timing.connectEnd - timing.connectStart,
  '白屏时间': timing.responseStart - timing.navigationStart
});

VConsole 的深度定制技巧

基础初始化时可以配置丰富选项：

new VConsole({
  maxLogNumber: 1000,
  onReady: () => console.log('调试面板就绪'),
  theme: 'dark' // 支持'light'/'dark'
});

特殊场景处理方案：

1. Hybrid 环境下的通信桥接：

window.VConsoleBridge = {
  sendToNative: (data) => {
    vConsole.log('[Native]', data);
    // 调用原生接口...
  }
};

2. 日志过滤功能实现：

const vConsole = new VConsole();
vConsole.$eventBus.on('renderTab', (type) => {
  if (type === 'log') {
    document.querySelector('.vc-log-item').style.display = 'none';
  }
});

3. 自定义面板开发实例：

const myPlugin = new VConsole.VConsolePlugin('myPlugin', '我的插件');
myPlugin.on('init', () => {
  const html = `<button id="getUser">获取用户信息</button>`;
  this.$dom.querySelector('.vc-content').innerHTML = html;
});
vConsole.addPlugin(myPlugin);

跨工具联合调试方案

组合使用不同工具能发挥更大威力：

1. Eruda + Charles 实现请求监控：

eruda.get('network').on('request', (req) => {
  console.groupCollapsed(`%c${req.method} ${req.url}`, 'color:blue');
  console.table(req.headers);
  console.log(req.body);
  console.groupEnd();
});

2. VConsole 性能快照功能扩展：

const perf = {
  memory: performance.memory,
  timing: performance.timing
};
vConsole.log(JSON.stringify(perf, null, 2));

3. 远程调试与本地工具联动：

// 在PC端Chrome中执行
const handleDeviceEvent = (data) => {
  if (data.type === 'log') {
    eruda.log(data.content);
  }
};

生产环境调试的隐蔽方案

线上问题排查需要更谨慎的方式：

1. 手势激活实现方案：

let tapCount = 0;
document.addEventListener('touchstart', (e) => {
  if (e.touches.length === 3) {
    tapCount++;
    if (tapCount === 5) {
      import('./eruda.js').then(eruda => eruda.init());
    }
  }
}, {passive: true});

2. 动态注入安全策略：

function loadDebugTool() {
  const script = document.createElement('script');
  script.src = `//cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js?t=${Date.now()}`;
  script.onload = () => new VConsole();
  document.body.appendChild(script);
}

// 通过特定URL参数或cookie控制
if (localStorage.getItem('debugMode') === 'true') {
  loadDebugTool();
}

3. 日志脱敏处理方法：

const sensitiveKeys = ['token', 'password'];
vConsole.log = (function(origin) {
  return function(...args) {
    args = args.map(arg => {
      if (typeof arg === 'object') {
        sensitiveKeys.forEach(key => delete arg[key]);
      }
      return arg;
    });
    origin.apply(this, args);
  };
})(vConsole.log);

微信生态的特殊处理

微信浏览器环境需要额外注意：

1. X5 内核调试：

// 在微信webview中启用调试
document.addEventListener('WeixinJSBridgeReady', () => {
  WeixinJSBridge.invoke('openDebug', {time: new Date().getTime()});
}, false);

2. 小程序内嵌页调试：

wx.onNetworkStatusChange(res => {
  vConsole.log('网络变化:', res);
});

// 捕获小程序API错误
const originalRequest = wx.request;
wx.request = function(options) {
  return originalRequest({
    ...options,
    fail: (err) => {
      vConsole.log('请求失败:', err);
      options.fail?.(err);
    }
  });
};

3. JSSDK 问题定位：

eruda.get('sdk').set('wx', {
  config: wx.config,
  ready: wx.ready,
  error: wx.error
});

性能优化与调试结合

调试工具本身也需要考虑性能影响：

1. 采样率控制实现：

let logCount = 0;
const originalConsole = console.log;
console.log = function(...args) {
  if (Math.random() < 0.1) { // 10%采样率
    originalConsole.apply(console, args);
  }
};

2. 内存监控增强：

setInterval(() => {
  if (window.performance && performance.memory) {
    const mem = performance.memory;
    eruda.log(
      `内存: ${(mem.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB/` +
      `${(mem.totalJSHeapSize / 1024 / 1024).toFixed(2)}MB`
    );
  }
}, 5000);

3. 自动化日志收集：

const logs = [];
['log', 'warn', 'error'].forEach(type => {
  console[type] = (function(origin) {
    return function(...args) {
      logs.push({type, args, timestamp: Date.now()});
      origin.apply(console, args);
    };
  })(console[type]);
});

// 错误自动上报
window.onerror = (msg, url, line) => {
  fetch('/log', {
    method: 'POST',
    body: JSON.stringify({msg, url, line, logs})
  });
};