在手機上進行前端網頁的debug

說來真是羞愧，最近才知道有這個神兵協助手機上的除錯XD 當專案越寫越多樣化時，常常會遇到一種狀況，例如專案在手機的某個 app 內建瀏覽器上打開時才會出現錯誤、或是顯示異常，由於沒有萬能的 F12 可以看 console，通常得靠經驗通靈，其實效率滿差的。

如果這種狀況依然能打開 console 的話，就能加速除錯時間了，最近才知道有這樣的神兵利器啊！那就是 vconsole ！

以 vite + vue 為例，就照以下方式：

安裝

npm install vconsole

引入

我的作法有點偷懶，直接在 main.js 中引入

import VConsole from 'vconsole';

//因為要限制只在開發期才顯示
if (import.meta.env.MODE === 'development') {
  const vConsole = new VConsole();
}

其實這樣就可以了

正常來說會有個按鈕「VCONSOLE」

打開來就有個 視窗可以看資訊囉～～