做移動H5時，經常需要真機調試，但是手機端沒有像Chrome控制臺那樣的開發者工具，對于network、console日志沒辦法查看，所以便有了今天的開發神器——vConsole。

vConsole是一個輕量、可拓展、針對手機網頁的前端開發者調試面板。

功能特性

• 日志(Logs)： console.log|info|error|…
• 網絡(Network)： XMLHttpRequest, Fetch, sendBeacon
• 節點(Element)： HTML 節點樹
• 存儲(Storage)： Cookies, LocalStorage, SessionStorage
• 手動執行 JS 命令行
• 自定義插件

使用

方法一：使用 npm（推薦）

npm install vconsole

Import 并初始化后，即可使用 console.log 功能，如 Chrome devtools 上一樣。

import VConsole from 'vconsole';const vConsole = new VConsole(); // 或者使用配置參數來初始化，詳情見文檔 const vConsole = new VConsole({ theme: 'dark' });// 接下來即可照常使用 `console` 等方法 console.log('Hello world');// 結束調試后，可移除掉 vConsole.destroy();

方法二：使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script>// VConsole 默認會掛載到 `window.VConsole` 上var vConsole = new window.VConsole(); </script>

可用的 CDN：

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js
https://unpkg.com/vconsole/dist/vconsole.min.js

手機效果

詳細文檔可查看：https://gitee.com/mirrors/vConsole/

總結

以上是生活随笔為你收集整理的移动H5调试神器 vConsole的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。