好用手機測試 WEB 工具(VConsole)

malagege included in JavaScript

2022-07-31 243 words 2 minutes

Contents

在手機瀏覽器上開發 Web 應用時，最大的痛點就是無法使用 Chrome DevTools 的 Console 面板。VConsole 是一個輕量的前端工具，可以在手機頁面上直接顯示調試面板。

什麼是 VConsole？

VConsole 是由騰訊開源的手機端調試工具，在頁面右下角插入一個可展開的面板，提供類似 Chrome DevTools 的功能，讓開發者在手機瀏覽器上也能看到 Console 輸出、Network 請求、Storage 內容等資訊。

特別適合用在：

LINE LIFF 應用（內建瀏覽器無法使用 DevTools）
Webview 內嵌頁面
需要在真實手機環境調試的 PWA

安裝方式

方法一：CDN 引入（快速測試）

1
2
3
4


<script src="https://cdn.jsdelivr.net/npm/vconsole@3.2.0/dist/vconsole.min.js"></script>
<script>
  var vConsole = new VConsole();
</script>

建議放在 </body> 前，確保頁面內容優先載入。

方法二：npm 安裝（正式專案）

1

npm install vconsole

1
2
3
4
5
6


import VConsole from 'vconsole';

// 只在開發環境啟用
if (process.env.NODE_ENV === 'development') {
  const vConsole = new VConsole();
}

主要功能

Console 面板

顯示 console.log、console.warn、console.error 等輸出，支援物件展開檢視。

1
2


console.log('Hello from VConsole');
console.log({ user: 'Alice', age: 30 }); // 物件也可以顯示

Network 面板

自動攔截 XMLHttpRequest 和 Fetch 請求，顯示：

請求 URL、Method、Headers
回應狀態碼、Body
請求耗時

Storage 面板

直接在手機上查看和修改：

localStorage
sessionStorage
Cookie

Element 面板

顯示頁面的 HTML 結構（類似 Elements 面板）。

LIFF 應用場景

LINE 的 LIFF（LINE Front-end Framework）應用執行在 LINE 的內建瀏覽器中，無法使用外部 DevTools，VConsole 是目前最方便的調試方案。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<!DOCTYPE html>
<html>
<head>
  <script src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vconsole/dist/vconsole.min.js"></script>
  <script>
    var vConsole = new VConsole();

    liff.init({ liffId: 'your-liff-id' }).then(() => {
      console.log('LIFF initialized');
      console.log('User Agent:', navigator.userAgent);
    });
  </script>
</body>
</html>

替代工具比較：VConsole vs Eruda

功能	VConsole	Eruda
開源授權	MIT	MIT
維護方	騰訊	liriliri
體積	~40KB（min+gzip）	~100KB
Console	✓	✓
Network	✓	✓
Storage	✓	✓
Element	✓	✓
Resources 面板	✗	✓
自訂 Plugin	✓	✓

Eruda 功能略多（多了 Sources 和 Resources 面板），但體積也較大。若只需要基本 Console 和 Network 調試，VConsole 更輕量。

注意事項

記得在上線前移除 VConsole，避免在生產環境洩露調試資訊
建議搭配環境變數控制是否載入，例如 process.env.NODE_ENV !== 'production'
VConsole 本身不支援 Source Map，所以 minify 後的錯誤訊息可能較難閱讀