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

微信小程式經驗分享發表於2017-12-15

作者: 蔣歡

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

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

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

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

圖1 vConsole使用介紹

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 記錄並退出。

圖2 第一次掃描二維碼得到的結果

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

圖3 第二次掃描二維碼得到的上次快取結果

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

圖4 第二次掃描二維碼得到的實際結果

環境:

IOS 和 安卓 均可穩定復現。

原因:

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

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

解決方案:

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

風險:

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

相關文章