> 隨著人工智慧技術的不斷發展，阿裡體育等IT大廠，推出的“樂動力”、“天天跳繩”AI運動APP，讓**雲上運動會、線上運動會、健身打卡、AI體育指導**等概念空前火熱。那麼，能否將這些在APP成功應用的場景搬上小程式，分享這些概念的紅利呢？本系列文章就帶您一步一步從零開始開發一個AI運動小程式，本 ...
大家好，我是程式視點的小二哥!
今天小二哥碰到一新來的實習生在使用 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
