移動端H5頁面調試利器vconsole

文章目錄

• 前言
• 一、vconsole是什麼？
• 二、主要功能面闆
• 三、引入方式
• • 1.cdn引入
  • 2.npm包引入
• 總結

前言

PC頁面，我們可通過F12打開控制台，檢視日志資訊，便于測試調試。但放到移動端中，移動端是沒有控制台的，我們就無法檢視頁面的console資訊，非常不便。但vconsole插件解決了此問題~

一、vconsole是什麼？

一個輕量、可拓展、針對手機網頁的前端開發者調試面闆。（騰訊出品）

源碼連結：https://github.com/Tencent/vConsole

頁面效果：頁面前端将會在右下角出現 vConsole 的懸停按鈕，可展開/收起面闆。

若不希望普通使用者看到面闆，請不要在生産環境中引入 vConsole 子產品。

二、主要功能面闆

• Log：檢視 console 日志
• System：檢視系統資訊

  

• Network：檢視網絡請求
• Element：檢視頁面 element 結構
• Storage：檢視 Cookies、localStorage 和 SessionStorage

三、引入方式

1.cdn引入

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
        var vConsole = new VConsole()
</script>
           

2.npm包引入

安裝包

npm install vconsole
           

檔案中引入

import VConsole from 'vconsole';
new VConsole();
           

總結

在開發和測試階段，引入好的日志工具能有效提高工作效率！