Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

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

內容目錄

在手機上進行前端網頁的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」

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