大家好，我是程式視點的小二哥!
今天小二哥碰到一新來的實習生在使用 alert 除錯H5頁面，仿佛看到小二哥年少時羞澀的樣子...
趁這個機會，就給大家分享一個針對手機網頁的前端開發者除錯面板工具：vConsole
簡介
vConsole 是框架無關的，可以在 Vue、React 或其他任何框架中使用，
現在 vConsole 是微信小程式的官方除錯工具，
功能特性
查看日志(Logs)： console.log|info|error|...
查看網路請求(Network)： 請求、回應的詳情
查看節點結構(Element)： HTML 節點樹
管理存盤(Storage)： 添加、編輯、洗掉、復制 Cookies / LocalStorage / SessionStorage
手動執行 JS 命令列: 這就和在 Chrome devtools 的console面版中執行命令一樣，
使用方法
將 vConsole 添加到專案中主要有以下方式：
方法一：使用 npm（推薦）
$ npm install vconsole
Import 并初始化后，即可使用 console.log 功能，
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
使用示例和建議
引入 vConsole 模塊后，頁面前端將會在右下角出現 vConsole 的懸停按鈕，可展開/收起面板，
支持 4 種不同型別的日志，會以不同的顏色輸出到前端面板：
支持列印 Object 物件，會以 JSON 字串格式輸出：
vConsole 面板中的使用幾乎如同 Chrome devtools 一樣，
重點注意：請不要在生產環境中引入 vConsole 模塊，
vConsole 還提供了公共屬性、方法和配置項，以及插件的使用，這些詳細的使用就留待大家去查閱啦，
vConsole地址https://gitee.com/Tencent/vConsole
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553994.html
標籤：其他
下一篇：返回列表