注冊

微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能

2017-12-20
導讀:本帖最后由 狂兔科技 于 2016-11-1 22:21 編輯 1. 開篇導言 本節(jié)目標:通過之前的講解,相信大家對于微信小程序本身有了一定的認識。本篇將專注于講解IDE的調試功能。 目標用戶:無編程...


1. 開篇導言    
  • 本節(jié)目標:通過之前的講解,相信大家對于微信小程序本身有了一定的認識。本篇將專注于講解IDE的調試功能。
  • 目標用戶:無編程經驗,但對微信小程序感興趣的同學。
  • 學習目標:了解并使用微信開發(fā)工具的調試功能。
  • 案例分析:helloworld小程序。
  • 代碼下載
  • 傳送門:

上一篇:微信小程序教程-入門篇【4】
下一篇:微信小程序教程-入門篇小結【6】


  • 備注:有編程經驗或看過微信官網簡易教程的同學,請酌情略過該章節(jié)。


2. 調試區(qū)
如下圖:
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能
調試工具分為6 大功能模塊:Wxml、Console、Sources、Network、Appdata、Storage。
熟悉Chrome瀏覽器(F12)的同學,可能眼前一(沒錯,基本一致)。

3. Wxml panel
Wxml panel:用于幫助開發(fā)者開發(fā) Wxml 轉化后的界面。
通過對于頁面結構及對應的 wxss 屬性的修改,可以在模擬器中實施查看效果。
通過調試模塊左上角的選擇器,可快速定位頁面中組件對應的 wxml 代碼。
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能
(圖片來自于官網)

4. Sources panel
Sources panel:用于顯示當前項目的腳本文件。
同瀏覽器開發(fā)不同,微信小程序框架會對腳本文件進行編譯的工作,開發(fā)者看到的文件是經過處理之后的腳本文件,
開發(fā)者的代碼都會被包裹在 define 函數(shù)中,并且對于 Page 代碼,在尾部會有 require 的主動調用。
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能

  • 代碼導航欄(藍色區(qū)域部分)

top下為域名列表。每個域名中包含與其相關的腳本文件。

  • 代碼顯示區(qū)(綠色區(qū)域部分)

代碼區(qū)的左側,通過點擊可以下斷點。
左下角的【{}】可以format代碼結構。


  • 調試區(qū)(橙色部分)

Watch:可以添加要查看的expressions(變量、表達式)。
Call Stack:查看調用堆棧。
其它部分留著以后詳談。

5. Network panel
Netwrok Pannle 用于觀察和顯示 request 和 socket 的請求情況。后章節(jié)詳細討論。
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能
(來自于官網)

6. Appdata panel
Appdata panel 用于顯示當前項目當前時刻 appdata 具體數(shù)據(jù),實時地反饋項目數(shù)據(jù)情況,可以在此處編輯數(shù)據(jù),并及時地反饋到界面上。
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能
上圖將【Hello World】更改為【Hello MINA】

7. Storage panel
Storage panel 用于顯示當前項目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲情況。本項目為log,見下圖:
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能

8. Console panel
Console panel:輸出小程序的log或者輸入,調試代碼,如下圖綠色部分。
微信小程序教程入門篇【5】,微信開發(fā)工具的調試功能
通過點擊console中右側橢圓部分,可以快速定位到相應的文件中(【index.js [sm]:24 onLoad】)。
橙色部分為調試代碼的例子。

9. 小結
注意:多動手來習慣于用調試工具來解決項目的問題。

10. 預告
下一篇將對入門篇做一個總結。



重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)