【小程式踩坑系列2】 vConsole 將已清除掉的log記錄再次列印出來，造成程式碼沒有生效或者微信掃碼錯誤的錯覺

作者: 蔣歡

這是一個開發工具 vConole 帶來的問題。雖然不大，但是如果你早已習慣 chrome 開發皮膚的使用方法，則很容易在開發中導致誤解。

問題：vConsole 開啟後點選 clear 清除log，再次操作小程式。發現會將之前清除掉的log再次列印出來，然後才列印新的log，造成程式碼沒有生效的錯覺。

1、首先，解釋下什麼是 vConole ？
vConsole 是騰訊開發的一個輕量、可擴充、針對手機網頁的前端開發者除錯皮膚， 具體介紹見請：vConsole官方倉庫。

2、小程式裡的 vConole 工具
微信小程式在開發過程中也可以使用 vConole 輔助在手機端進行除錯，具體方法是：點選開發版小程式又上角 ... ，之後選擇 開啟除錯 ，如下圖所示。

3、在使用小程式開發工具中，由於 log 記錄過多，我們在一次除錯過程中可能會使用 clear 來清除log，事實上 clear 沒有像 chrome 的 “clear console” 一樣，做到真正的清除 log。而是將 log 清除後快取了起來。待你下次重新整理頁面時會將兩次 log 一起列印出來。我們在除錯 “小程式掃碼bug” 時就遇到了該問題。

舉例：

a、我們除錯時，會在 onload 內將該函式引數打出，讀取微信掃碼的資料。

    onLoad(this: IndexPage, p) {  
        console.log('列印p引數列印p引數列印p引數列印p引數列印p引數列印p引數');  
        console.log(p);  
    }
複製程式碼

b、當我們第一次掃碼除錯時，針對商戶 “巴蜀傳香” 打出的log結果如圖所示，之後我們點選 clear 清除了除錯工具的 log 記錄並退出。

c、當我們第二次掃不同的二維碼進入小程式時，預期onload的引數會變化。然而發現店鋪變了，但掃描的結果沒有改變（實際上二維碼變了，店鋪與log也應該會改變）。

d、事實上，當你將 log 記錄繼續往下滑會發現，新的 log 記錄也已列印出來。說明即使你之前點選了 clear ，新的 log 也會因為快取再次列印出來。

環境：

IOS 和 安卓 均可穩定復現。

原因：

vConsole 會將已經 “clear” 的快取再次列印出來。

微信反饋：“這是小程式底層的一個問題，正在修復中，不是vConsole的問題哈。”

解決方案：

除錯的時候需要多往後翻一下，找到各次對應的掃碼 log 記錄。

風險：

開發階段，可能因為 log 判斷錯誤，而造成誤解。