移動端調試解決方案vConsole

我們在寫webapp或者移動端網頁需要嵌入到app時候，尤其是在APP內置的webView上加載我們的頁面，想要查看手機瀏覽器信息是非常困難的事，當出現問題的時候，你又不能查看日誌，一般會連接本地測試環境，然後在alert來打印日誌（這種做法太蠢了），然後一遍一遍的定位bug，修改代碼。常用的插件有eruda、vconsole等，這裏我選擇使用vConsole，這個工具就想電腦端的devtools，可以查看日誌，網絡，頁面，Resources等。

調試代碼一般就是爲了查看數據和定位 bug。分爲兩種場景，一種是開發和測試時調試，一種是生產環境上調試。
爲什麼有生產環境上調試呢？有些時候測試環境上沒法復現這個 bug，測試環境和生產環境不一致，此時就需要緊急生產調試。

原理與解決方案

多頁面應用

在要進行調試的頁面

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script> 

單頁面應用

先下載安裝npm install vconsole
然後在入口文件進行引用就可以了

const vConsole = new VConsole();

有興趣看看它實現的基本原理，我們關注的點應該在 vsconsole 如何打印出我們所有 log 的 騰訊開源vconsole

上述方法僅用於開發和測試。生產環境中不允許出現，所以，使用時需要對環境進行判斷。

import Vconsole from 'vconsole'
if (process.env.NODE_ENV !== 'production') {
    new Vconsole()
}