如何調(diào)試小程序代碼

在進(jìn)行項(xiàng)目開發(fā)的時(shí)候，不可避免需要進(jìn)行調(diào)試，那么如何調(diào)試小程序呢？

打開微信開發(fā)者工具后，有一個(gè)模擬器，通過模擬器能夠?qū)崟r(shí)預(yù)覽自己寫的頁面，如下：

在上部工具欄中有一個(gè)調(diào)試器按鈕，點(diǎn)擊該按鈕，在底部就會(huì)彈出一個(gè)調(diào)試器，如下：

在下部調(diào)試器中，有很多功能項(xiàng)，這里講解一下常用的選項(xiàng)：

• Wxml：能夠看到當(dāng)前頁面的結(jié)構(gòu)和樣式，通過這個(gè)面板能夠調(diào)試結(jié)構(gòu)和樣式；
• Console：通過 Console 能夠看到 JS 打印輸出的內(nèi)容；在 Console 中有一些系統(tǒng)打印信息，系統(tǒng)打印信息會(huì)影響開發(fā)者自己打印的信息，這樣不方便開發(fā)者調(diào)試。可以右鍵點(diǎn)擊系統(tǒng)打印信息，選擇【Hide messages from WAServiceMainContext.js】隱藏系統(tǒng)打印信息，如下：
  
• Network：通過 Network 可以調(diào)試網(wǎng)絡(luò)請(qǐng)求，即調(diào)試自己向服務(wù)器發(fā)送的請(qǐng)求；
• AppData：通過 AppData 可以查看當(dāng)前頁面定義了哪些數(shù)據(jù)；
• Storgae：通過 Storage 可以查看我們?cè)诒镜卮鎯?chǔ)了哪些數(shù)據(jù)；

接下來看一下工具欄中的四個(gè)功能：編譯、預(yù)覽、真機(jī)調(diào)試、清緩存 這個(gè)四個(gè)功能：

• 編譯：有點(diǎn)類似于瀏覽器的刷新，在點(diǎn)擊之后能夠重新刷新當(dāng)前頁面，當(dāng)我們編寫代碼之后發(fā)現(xiàn)模擬器沒有任何變化時(shí)，就可以點(diǎn)擊編譯進(jìn)行刷新；

• 預(yù)覽：點(diǎn)擊預(yù)覽之后會(huì)彈出一個(gè)彈框，點(diǎn)擊彈框下部的【繼續(xù)瀏覽小程序】：
  
  點(diǎn)擊之后會(huì)彈出一個(gè)二維碼，我們使用自己的手機(jī)掃描二維碼：
  
  掃描二維碼之后，在手機(jī)上就能看到模擬器上的內(nèi)容，點(diǎn)擊手機(jī)微信頂部的【…】，選擇彈出框最右側(cè)的【開發(fā)調(diào)試】：
  
  點(diǎn)擊【開發(fā)調(diào)試】，會(huì)有一個(gè)新的彈框，選擇彈框中的【打開調(diào)試】，微信會(huì)關(guān)閉當(dāng)前界面，然后我們需要重新掃描開發(fā)者工具中的二維碼：
  
  重新掃描二維碼之后，我們就可以在自己的手機(jī)上對(duì)小程序進(jìn)行一些調(diào)試工作；

  如果希望關(guān)閉調(diào)試，同樣是點(diǎn)擊頂部右側(cè)的【…】，在下側(cè)彈出框中選擇最右邊的【開發(fā)調(diào)試】，在【開發(fā)調(diào)試】彈框中選擇【關(guān)閉調(diào)試】即可；

• 真機(jī)調(diào)試：點(diǎn)擊真機(jī)調(diào)試之后，會(huì)彈出一個(gè)二維碼：
  
  用手機(jī)微信掃描這個(gè)二維碼，在掃描二維碼之后，開發(fā)者模式中會(huì)彈出一個(gè)新的【真機(jī)調(diào)試】窗口，如下：
  
  我們可以在【真機(jī)調(diào)試】面板中選擇不同的功能獲取信息，比如 Wxml、Console 等功能，其功能和我們上面介紹的一樣；當(dāng)我們?cè)谡鏅C(jī)中發(fā)送請(qǐng)求之后，在 【Network】部分就能看到我們?cè)谡鏅C(jī)中發(fā)送的請(qǐng)求信息，這里主要是為了方便真機(jī)調(diào)試；

  預(yù)覽和真機(jī)調(diào)試的區(qū)別在于，真機(jī)調(diào)試會(huì)彈出一個(gè)調(diào)試器窗口；

• 清緩存：微信開發(fā)者工具緩存非常嚴(yán)重，當(dāng)我們寫好代碼后，發(fā)現(xiàn)模擬器的效果與代碼預(yù)期不符，當(dāng)點(diǎn)擊【編譯】刷新之后發(fā)現(xiàn)效果還是不一致，這時(shí)候我們可以選擇【清緩存】。但需要注意，在點(diǎn)擊【清緩存】后，模擬器還是沒有實(shí)現(xiàn)代碼預(yù)期效果，這時(shí)候需要點(diǎn)擊左側(cè)頂部的【項(xiàng)目】按鈕，選擇【重新打開此項(xiàng)目】，然后再觀看模擬器是否符合代碼預(yù)期：
  參考視頻：尚硅谷微信小程序開發(fā)教程