移動端調試工具vConsole插件

移動端H5真機上看不到調試資訊，可以用移動端調試工具檢視console.log資訊

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

功能

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

一、vConsole

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

<script src="https://cdn.bootcss.com/vConsole/3.3.4/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>
           

通過npm安裝vConsole

• 安裝vConsole,  vConsole是騰訊開發的一個用于調試移動端項目的插件，安裝vConsole隻需執行下面指令

一般情況下

vConsole

隻應用于開發環境，正式環境不會使用到，是以我們隻需要在開發環境下使用，如何使用呢？

然後啟動項目，可以看到系統右下角會出現一個紅色按鈕，點開即可看到一系列調試所需的内容

demo測試位址：http://www.w3cways.com/demo/vconsole/

如果如下：

二、eruda

<script src="https://cdn.bootcss.com/eruda/1.5.8/eruda.min.js"></script>
<script>
    eruda.init();
</script>
           

除了 vConsole 外，開源項目 Eruda，功能與之類似（貌似還強大一些？），這裡就不過多介紹了。 感興趣的可以自行去 Eruda 的 GitHub 上研究吧~