When we are developing the mobile version of the webpage, the following scenarios often appear:
(1) During development, it runs well on our computer, and it hangs after opening it on the mobile phone, but the error log is not visible on the mobile phone;
( 2) After going online, a user said that the page was malfunctioning, but we couldn't reproduce it by ourselves, and we couldn't see the error message on the user side.
If (1) it can be solved by connecting a computer to a mobile phone to view the log, then (2) it is very passive when there is no complete front-end reporting system.
As developers, our appeal is simple: Is there a quick way to see the log on the front-end page of the mobile phone?
vConsole front-end debugging panel Do
n’t panic, hug vConsole!
vConsole is a front-end debugging panel created by the front-end team of the WeChat public platform, which specializes in the problem of log viewing on the mobile phone.
Currently vConsole comes with 2 panels, the default is the "Log" panel, responsible for displaying the log.
vConsole is
a lightweight, extensible , front-end developer debugging panel for mobile web pages.
characteristic
- View console log
- View network requests
- View page element structure
- View Cookies, localStorage and SessionStorage
- Manually execute the JS command line
- Custom plugin
Get started
Download the latest version of vConsole.
Install using npm:
npm install vconsole
use
// package.json
// "vconsole": "^3.3.4",
import vConsole from 'vconsole';
const Console = new vConsole();
original: