Mobile Debugging: Rescue Techniques for Remote Debugging, Eruda, and VConsole

Debugging on mobile devices has always been a pain point in front-end development, especially when dealing with complex user environments and device variations. Remote debugging tools, Eruda, and VConsole offer various solutions to help developers quickly identify issues. Below, we delve into the usage techniques and pitfalls of these tools based on practical scenarios.

Remote Debugging: Chrome DevTools in Action

After connecting an Android device via USB, enter chrome://inspect in the Chrome address bar to see a list of debuggable pages. Key techniques include:

1. Port Forwarding: Resolving local development server access issues

adb reverse tcp:8080 tcp:8080  # Map device port 8080 to local

2. Common Issues with Real Device Element Inspection:

• Check webview.setWebContentsDebuggingEnabled(true) when encountering blank pages
• Try disabling the phone's power-saving mode for style issues
• Use document.designMode = "on" to directly edit page text

3. Advanced Network Request Interception:

// Override the fetch method in the Console
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log('Intercepted:', args);
  return originalFetch(...args);
};

Eruda: The Swiss Army Knife for Mobile Consoles

Include via CDN with just one line:

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

Optimization strategies for real-world projects:

1. On-Demand Loading:

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

2. Custom Plugin Development Example:

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

3. Performance Monitoring in Practice:

const timing = performance.timing;
eruda.get('performance').set('timing', {
  'DNS Query': timing.domainLookupEnd - timing.domainLookupStart,
  'TCP Connection': timing.connectEnd - timing.connectStart,
  'White Screen Time': timing.responseStart - timing.navigationStart
});

Advanced Customization Tips for VConsole

Rich configuration options during initialization:

new VConsole({
  maxLogNumber: 1000,
  onReady: () => console.log('Debug panel ready'),
  theme: 'dark' // Supports 'light'/'dark'
});

Solutions for special scenarios:

1. Communication Bridging in Hybrid Environments:

window.VConsoleBridge = {
  sendToNative: (data) => {
    vConsole.log('[Native]', data);
    // Call native APIs...
  }
};

2. Log Filtering Implementation:

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

3. Custom Panel Development Example:

const myPlugin = new VConsole.VConsolePlugin('myPlugin', 'My Plugin');
myPlugin.on('init', () => {
  const html = `<button id="getUser">Get User Info</button>`;
  this.$dom.querySelector('.vc-content').innerHTML = html;
});
vConsole.addPlugin(myPlugin);

Cross-Tool Collaborative Debugging

Combining different tools yields greater power:

1. Eruda + Charles for Request Monitoring:

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 Performance Snapshot Extension:

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

3. Remote Debugging and Local Tool Integration:

// Execute in PC Chrome
const handleDeviceEvent = (data) => {
  if (data.type === 'log') {
    eruda.log(data.content);
  }
};

Stealthy Debugging Solutions for Production

More cautious approaches for online issue troubleshooting:

1. Gesture Activation Implementation:

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. Dynamic Injection Security Strategy:

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);
}

// Controlled via specific URL parameters or cookies
if (localStorage.getItem('debugMode') === 'true') {
  loadDebugTool();
}

3. Log Data Masking:

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);

Special Handling for WeChat Ecosystem

Extra attention needed for WeChat browser environments:

1. X5 Core Debugging:

// Enable debugging in WeChat webview
document.addEventListener('WeixinJSBridgeReady', () => {
  WeixinJSBridge.invoke('openDebug', {time: new Date().getTime()});
}, false);

2. Mini Program Embedded Page Debugging:

wx.onNetworkStatusChange(res => {
  vConsole.log('Network change:', res);
});

// Capture Mini Program API errors
const originalRequest = wx.request;
wx.request = function(options) {
  return originalRequest({
    ...options,
    fail: (err) => {
      vConsole.log('Request failed:', err);
      options.fail?.(err);
    }
  });
};

3. JSSDK Issue Localization:

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

Combining Performance Optimization and Debugging

Debugging tools themselves need performance considerations:

1. Sampling Rate Control:

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

2. Enhanced Memory Monitoring:

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

3. Automated Log Collection:

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]);
});

// Automatic error reporting
window.onerror = (msg, url, line) => {
  fetch('/log', {
    method: 'POST',
    body: JSON.stringify({msg, url, line, logs})
  });
};