Detailed explanation on the use of vConsole, the mobile debugging artifact

vConsole is framework-independent and can be used in Vue, React or any other framework. Today, through this article, I will introduce to you the use of vConsole, the mobile debugging artifact. Friends who are interested should take a look.

introduce

Usually during the development of web applications, we can console.log to output some information or see the information returned by the interface and the interface performance, but on the mobile terminal, that is, on the mobile phone, we cannot see it.

In this case, you can choose to use alert to pop up some information, but this method is not very convenient and will also block the JS thread, causing subsequent threads to not execute. It also affects the debugging experience.

So, what if console.log is applied to the mobile terminal?
Requires third-party plug-in: vConsole

A lightweight, scalable, front-end developer debugging panel for mobile web pages.

vConsole is framework agnostic and can be used in Vue, React or any other framework. There are supporting plug-ins

https://gitee.com/Tencent/vConsole/tree/master/Official documentation

Features

Logs: console.log|info|error|...
Network: XMLHttpRequest, Fetch, sendBeacon
Node (Element): HTML node tree
Storage: Cookies, LocalStorage, SessionStorage
Manual execution of JS command line
Custom plug-in

use

Method 1: Use npm (recommended)

npm install vconsole

Once imported and initialized, the console.log functionality can be used, as on Chrome devtools.

import VConsole from 'vconsole';
const vConsole = new VConsole();
// 接下来即可照常使用 `console` 等方法
console.log('Hello world');
// 结束调试后，可移除掉
vConsole.destroy();

Method 2: Use CDN to insert directly into HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
  // 接下来即可照常使用 `console` 等方法
    console.log('Hello world');
     
    // 结束调试后，可移除掉
    vConsole.destroy();
</script>

The development environment shows that the production environment is deleted

First of all, when we are developing single-page applications in react and vue, I believe that everyone is not familiar with process.env in the configuration file. We only need the production environment not to load vConsole, development and testing to load vConsole, and limit the display to the mobile phone only, because PCs have browser debugging tools. If conditions permit, we can also add a production environment switch button to trigger the debugging panel.

vue example

If you don’t understand process.env, it’s very simple to search it on Baidu. It’s just like a global variable.

Add the following code in main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import store from './store'
import VConsole from 'vconsole';
import router from './router'
createApp(App).use(store).use(router).mount('#app')
 
// 判断是否是pc设备
const isPc = () => {
    const userAgentInfo = navigator.userAgent;
    const Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
//如果不是生产环境并且不是pc设备那么就显示调试
if (process.env.NODE_ENV != "prod" && !isPc()) {
    console.log(process.env.NODE_ENV);
    const vConsole = new VConsole();
}