vConsole 讓你在手機上也能輕松調試網頁

有時候為了想在手機真機上對網頁進行 Debug，可手機上沒有 F12，用 Chrome DevTools 連接手機操作又太過復雜。VConsole 的出現，正好解決了這一痛點！

（下列內容照搬一下官方文檔……）

vConsole 介紹

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

 在線體驗 官方網站

功能

• 查看 console 日志
• 查看網絡請求
• 查看頁面 element 結構
• 查看 Cookies、localStorage 和 SessionStorage
• 手動執行 JS 命令行
• 自定義插件

使用方法

從 GitHub 上下載最新版本，然后按下列方式在你的網頁中引入：

<script src="vconsole.min.js"></script>
<script>
    new VConsole();
</script>

然后你就可以在頁面的右下角看到一個綠色的 vConsole，點開它就能使用了，整體界面和 Chrome 的控制台類似，非常方便！

不過，這樣引入的話無論是在電腦上還是手機上，無論是站長和訪客都能看到這個按鈕。有點不太友好……為此，我們可以采用下面的方法：

<script>
if ((location.href || '').indexOf('vconsole=true') > -1) {
    document.write('<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"><\/script>');
    document.write('<script>new VConsole()<\/script>');
}
</script>

這樣，正常訪問網站時不會加載這個工具，僅當在網址后面加上 ?vconsole=true 時才會載入,按需開啟，非常好用！

同類工具

除了 vConsole 外，還一個開源項目 Eruda，功能與之類似（貌似還強大一些？），這里就不過多介紹了。 感興趣的可以自行去 Eruda 的 GitHub 上研究吧~傳送門：https://github.com/liriliri/eruda

本文作者為mengkun