How to Use vConsole for Real-Time Mobile Web Debugging
This guide explains how to integrate the vConsole front‑end debugging panel into mobile web pages, showing how to view colored console logs, access system information, and conditionally load the tool for development environments.
1 Introduction
When developing mobile web pages, developers often encounter situations where the page works fine on a computer but crashes on a phone without visible error logs, or a user reports a broken page that cannot be reproduced, making debugging difficult.
Development works on the local computer but fails on the phone, with no error log visible on the device.
After deployment, a user reports a broken page that cannot be reproduced, and no client‑side error information is available.
Therefore developers need a quick way to view log output directly on the mobile front‑end.
2 vConsole Front‑End Debug Panel
vConsole is a front‑end debugging panel created by the WeChat public platform team, specifically designed to solve the problem of viewing logs on mobile devices.
It provides two default panels; the default "Log" panel displays log messages.
The log panel uses different colors for different console methods, similar to desktop Developer Tools:
console.log('foo'); // white background, black text
console.info('bar'); // white background, purple text
console.debug('oh'); // white background, yellow text
console.warn('foo'); // yellow background, yellow text
console.error('bar'); // red background, red textThe second panel, "System", automatically prints basic information such as system version, and when the page is opened in WeChat's built‑in browser it also prints the WeChat version and current network type.
By default the vConsole panel is hidden; clicking the floating "panel" button in the lower‑right corner displays the vConsole panel.
3 Usage
Talk is cheap, show me the code.
First, include the vConsole script on the page, preferably in the <head> so that it initializes early and creates a window.vConsole instance.
<head>
<script src='path/to/vconsole.min.js'></script>
</head>Typically you only enable vConsole in debug mode. For example, in PHP you can load it only when a dev_mode=1 query parameter is present:
<?php if($_GET['dev_mode']=='1'){ ?>
<script src='path/to/vconsole.min.js'></script>
<?php } ?>If the project uses a module loader such as CommonJS, SeaJS, or AMD/CMD, you can require the script:
var vConsole = require('path/to/vconsole.min.js');After vConsole is loaded, you can use the standard console.log(), console.info(), console.debug(), console.warn(), and console.error() methods; logs appear both in the native console and in the vConsole panel.
console.log('foo');
console.info('bar');
console.debug('oh');
console.warn('foo');
console.error('bar');If the page has not loaded vConsole, these calls go to the native console; once loaded they are shown in both places, so compatibility is not an issue.
Because vConsole needs a short initialization period before rendering the panel, use vConsole.ready(function(){ console.log('Hello World'); }); to log immediately after it is ready.
4 Online Demo
Scan the QR code below with WeChat to try the vConsole panel.
vConsole is open‑source on the WeChatFE GitHub repository; click “Read Original” to view the source.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.