移動端調(diào)試神器 vConsole

移動端真機調(diào)試一般想看到簡單的數(shù)據(jù)會使用 alert() 的方式打印,但由于 alert() 會有一個隱形轉(zhuǎn)換成字符串的問題,一些復雜的數(shù)據(jù)沒法看到。而且彈出的對話框會打斷一些 js 的進行,體驗也很糟糕。

于是微信團隊開發(fā)的vconsole出來了。
安裝:

cnpm i vconsole

引入模塊
(1) 如果未使用 AMD/CMD 規(guī)范,可直接在 HTML 中引入 vConsole 模塊:
找到這個模塊下面的 dist/vconsole.min.js ,然后復制到自己的項目中

<head>
    <script src="dist/vconsole.min.js"></script>
</head>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('VConsole is cool');
</script>

(2) 如果使用了 AMD/CMD 規(guī)范,可在 module 內(nèi)使用 require() 引入模塊:

var vConsole = require('path/to/vconsole.min.js');
使用webpack,然后js代碼中
let vConsole = new VConsole() // 初始化

(3)Vue中使用

import VConsole from 'vconsole/dist/vconsole.min.js' //import vconsole
let vConsole = new VConsole() // 初始化

需要注意的是:

vconsole 與 vue 結(jié)合使用時若嚴格使用 eslint 我的會報錯誤,報錯結(jié)果如下

error: 'vConsole' is assigned a value but never used (no-unused-vars) at src\main.js:9:5:

解決辦法在 src/main.js 入口文件引用時候使用 use 就沒事了。

import Vconsole from 'vconsole';
const vConsole = new Vconsole();
Vue.use(vConsole);
console.log("hello Vconsole");

使用時與 PC 端打印 log 一樣,可直接使用 console.log() 等方法直接打印日志。未加載 vConsole 模塊時,console.log() 會直接打印到原生控制臺中;加載 vConsole 后,日志會打印到頁面前端+原生控制臺。
打印一下運行效果圖:


了解這些就夠使用了,更詳細的 API 去看下面這個的博客:
https://segmentfault.com/a/1190000017320562#item-1

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • vconsole.js git地址:https://github.com/Tencent/vConsole 引入方...
    劉小胖LJX閱讀 10,247評論 0 1
  • 前言 和上一篇文章eruda,移動端網(wǎng)頁調(diào)試神器[http://www.itdecent.cn/p/a05b90...
    小猿_Luck_Boy閱讀 93,288評論 1 26
  • 33、JS中的本地存儲 把一些信息存儲在當前瀏覽器指定域下的某一個地方(存儲到物理硬盤中)1、不能跨瀏覽器傳輸:在...
    萌妹撒閱讀 2,255評論 0 2
  • 利用Vconsole和Fillder進行移動端抓包調(diào)試 在開發(fā)中,有時候我們需要在手機上進行測試,可是如果遇到bu...
    蘇本的書柜閱讀 1,505評論 0 1
  • ## 框架和庫的區(qū)別?> 框架(framework):一套完整的軟件設計架構(gòu)和**解決方案**。> > 庫(lib...
    Rui_bdad閱讀 3,156評論 1 4

友情鏈接更多精彩內(nèi)容