How to Use vConsole for Mobile Web Debugging in Frontend Development
This guide explains how vConsole, a lightweight tool from WeChat's frontend team, enables developers to view console.log output directly on mobile browsers, providing step‑by‑step usage instructions, example code, and screenshots of the on‑screen console.
During frontend development, developers often use console.log or console.info to output log information, which can be easily viewed in a desktop browser's console. However, when debugging on mobile devices, accessing these logs becomes difficult.
vConsole is a small, easy‑to‑use tool created by WeChat's frontend team that solves this problem by allowing developers to view console logs directly on mobile devices.
Demo
The floating button at the bottom‑right opens the console, where logged messages are displayed.
Usage
1. Download vConsole from its project page: https://github.com/WechatFE/vConsole.
2. Include vconsole.min.js in your page.
3. Use standard console methods ( log, info, debug, warn, error) in your JavaScript as usual.
Example Code
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="vconsole.min.js"></script>
<script>
window.onload = function (){
console.log('hello world');
}
function testInfo(){
alert('info');
console.info('test info');
}
</script>
</head>
<body>
<h1>vConsole test</h1>
<button onclick="testInfo()">INFO</button>
</body>The effect screenshot shows the console displaying the logged messages.
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.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
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.