Shulou(Shulou.com)05/31 Report--

This article focuses on "Mobile debugging artifact vConsole how to use", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the mobile debugging artifact vConsole.

Introduction

Usually in the process of web application development, we can console.log to output some information or look at the information returned by the interface and interface performance, but on the mobile side, that is, on the mobile phone, we can not see it.

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

So, what if console.log is applied to mobile?

Need to use a third-party plug-in: vConsole

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

VConsole is framework-independent and can be used in Vue, React, or any other framework. All have matching plug-ins.

Https://gitee.com/Tencent/vConsole/tree/master/ official documentation

Functional characteristics

Logs: console.log | info | error | …

Network (Network): XMLHttpRequest, Fetch, sendBeacon

Node (Element): HTML node tree

Storage (Storage): Cookies, LocalStorage, SessionStorage

Execute the JS command line manually

Custom plug-in

Usage 1: use npm (recommended) npm install vconsole

After Import and initialization, you can use the console.log feature, as on Chrome devtools.

Import VConsole from 'vconsole';const vConsole = new VConsole (); / / then you can use `console` and other methods console.log (' Hello world') as usual; / / after debugging, you can remove vConsole.destroy (); method 2: insert it directly into HTML / / VConsole and mount it to `window.VConsole` by default; / then you can use `console` and other methods console.log ('Hello world') as usual. / / after debugging, you can remove vConsole.destroy (); the development environment shows that the build environment is deleted.

First of all, when we are doing the single-page application development of react and vue, I believe we are not new to the process.env in the configuration file. We only need the production environment not to load the vConsole development and test load vConsole and limit the display only on the mobile side, because pc has the debugging tool for the browser, and if conditions permit, we can also add the production environment switch button to trigger the debugging panel.

Vue case

If you don't understand process.env, it's easy to search Baidu on your own, just like a global variable.

Add the following code to 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') / / determine whether it is a pc device const isPc = () = > {const userAgentInfo = navigator.userAgent Const Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; let flag = true; for (let v = 0; v)

0) {flag = false; break;}} return flag;} / / if it is not a production environment and is not a pc device, then debug if (process.env.NODE_ENV! = "prod" & &! isPc ()) {console.log (process.env.NODE_ENV); const vConsole = new VConsole ();}

At this point, I believe you have a deeper understanding of "how to use the mobile debugging artifact vConsole". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.