工具 - vConsole調試工具 在項目中的應用

最近做移動端項目比較多，電腦上開發完了上真機必現問題，但是真機上又看不了代碼很捉急啊有沒有。

這兩天才發現這個騰訊良品vConsole，以前開發小程序見過，但沒想到他竟然還能被應用到我們的h5頁面中，

廢話不多說，先給大佬磕一個。

具體描述介紹啥的見github：https://github.com/Tencent/vConsole

我這里先記錄下具體開發中是怎么引用的

1、按照官網的步驟，先安裝vConsole工具包：

npm install vconsole

　　

注：我當時在項目中使用，安裝命令是 

npm i --S vconsole

　　

然后項目的入口js中引入並實例化，如下：

let VConsole = require('../../node_modules/vconsole/dist/vconsole.min');//路徑根據項目自己找
let vConsole = new VConsole();

　　

。。。

對，就這三句，一個強大的功能就誕生在我都頁面了！

比如做些控制台輸出信息：

//這是demo
console.log('我是控制台輸出的信息！');
var a;
console.log(a);
console.log(html2canvas);

 

 

 

2019-06-03  17:04:25

vConsole 在安卓中字體過大的問題

let u = window.navigator.userAgent,
    android = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1;

if(android){
　　$('#__vconsole').attr('style','font-size: 26');
}

 

因為vconsole是em單位的，把他的父元素根節點的font-size設置小一點，vconsole里邊的子元素的字體自然就小了。