微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

—— 2017 ——

12/20

00:00

來(lái)源：

作者：未知

欄目：小程序開(kāi)發(fā)

2017/12/20 0:00:00 來(lái)源：不詳作者：未知

1. 開(kāi)篇導(dǎo)言

本節(jié)目標(biāo)：通過(guò)之前的講解，相信大家對(duì)于微信小程序本身有了一定的認(rèn)識(shí)。本篇將專(zhuān)注于講解IDE的調(diào)試功能。
目標(biāo)用戶(hù)：無(wú)編程經(jīng)驗(yàn)，但對(duì)微信小程序感興趣的同學(xué)。
學(xué)習(xí)目標(biāo)：了解并使用微信開(kāi)發(fā)工具的調(diào)試功能。
案例分析：helloworld小程序。
代碼下載
傳送門(mén)：

上一篇：微信小程序教程-入門(mén)篇【4】
下一篇：微信小程序教程-入門(mén)篇小結(jié)【6】

備注：有編程經(jīng)驗(yàn)或看過(guò)微信官網(wǎng)簡(jiǎn)易教程的同學(xué)，請(qǐng)酌情略過(guò)該章節(jié)。

2. 調(diào)試區(qū)
如下圖：
微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

調(diào)試工具分為6 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage。
熟悉Chrome瀏覽器(F12)的同學(xué)，可能眼前一(沒(méi)錯(cuò)，基本一致)。

3. Wxml panel
Wxml panel：用于幫助開(kāi)發(fā)者開(kāi)發(fā) Wxml 轉(zhuǎn)化后的界面。
通過(guò)對(duì)于頁(yè)面結(jié)構(gòu)及對(duì)應(yīng)的 wxss 屬性的修改，可以在模擬器中實(shí)施查看效果。
通過(guò)調(diào)試模塊左上角的選擇器，可快速定位頁(yè)面中組件對(duì)應(yīng)的 wxml 代碼。
微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

(圖片來(lái)自于官網(wǎng))

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

代碼導(dǎo)航欄(藍(lán)色區(qū)域部分)

top下為域名列表。每個(gè)域名中包含與其相關(guān)的腳本文件。

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

代碼區(qū)的左側(cè)，通過(guò)點(diǎn)擊可以下斷點(diǎn)。
左下角的【{}】可以format代碼結(jié)構(gòu)。

調(diào)試區(qū)(橙色部分)

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

5. Network panel
Netwrok Pannle 用于觀(guān)察和顯示 request 和 socket 的請(qǐng)求情況。后章節(jié)詳細(xì)討論。
微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

(來(lái)自于官網(wǎng))

6. Appdata panel
Appdata panel 用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻 appdata 具體數(shù)據(jù)，實(shí)時(shí)地反饋?lái)?xiàng)目數(shù)據(jù)情況，可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上。
微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

上圖將【Hello World】更改為【Hello MINA】

7. Storage panel
Storage panel 用于顯示當(dāng)前項(xiàng)目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲(chǔ)情況。本項(xiàng)目為log，見(jiàn)下圖：
微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

8. Console panel
Console panel：輸出小程序的log或者輸入，調(diào)試代碼，如下圖綠色部分。
微信小程序教程入門(mén)篇【5】,微信開(kāi)發(fā)工具的調(diào)試功能

通過(guò)點(diǎn)擊console中右側(cè)橢圓部分，可以快速定位到相應(yīng)的文件中(【index.js [sm]:24 onLoad】)。
橙色部分為調(diào)試代碼的例子。

9. 小結(jié)
注意：多動(dòng)手來(lái)習(xí)慣于用調(diào)試工具來(lái)解決項(xiàng)目的問(wèn)題。

10. 預(yù)告
下一篇將對(duì)入門(mén)篇做一個(gè)總結(jié)。

【本站聲明】
1、本站文章中所選用的圖片及文字來(lái)源于網(wǎng)絡(luò)以及用戶(hù)投稿，由于未聯(lián)系到知識(shí)產(chǎn)權(quán)人或未發(fā)現(xiàn)有關(guān)知識(shí)產(chǎn)權(quán)的登記，如有知識(shí)產(chǎn)權(quán)人并不愿意我們使用，如果有侵權(quán)請(qǐng)立即聯(lián)系。
2、本網(wǎng)站不對(duì)文章中所涉及的內(nèi)容真實(shí)性、準(zhǔn)確性、可靠性負(fù)責(zé)，僅系客觀(guān)性描述，如您需要了解該類(lèi)商品/服務(wù)詳細(xì)的資訊，請(qǐng)您直接與該類(lèi)商品/服務(wù)的提供者聯(lián)系。

KESION 科汛軟件
KESION 科汛軟件是國(guó)內(nèi)領(lǐng)先的在線(xiàn)教育軟件及私域社交電商軟件服務(wù)提供商，長(zhǎng)期專(zhuān)注于為企業(yè)提供在線(xiàn)教育軟件及社交電商SaaS平臺(tái)解決方案。
公司核心產(chǎn)品云開(kāi)店SaaS社交電商服務(wù)平臺(tái)、在線(xiàn)教育SaaS服務(wù)平臺(tái)、教育企業(yè)數(shù)字化SaaS云平臺(tái)、企微營(yíng)銷(xiāo)助手、私有化獨(dú)立部署品牌網(wǎng)校和在線(xiàn)教育咨詢(xún)等。
KESION 不斷通過(guò)技術(shù)創(chuàng)新，提供產(chǎn)品和服務(wù)，助力企業(yè)向數(shù)字化轉(zhuǎn)型，通過(guò)科技驅(qū)動(dòng)商業(yè)革新，讓商業(yè)變得更智慧！

▼點(diǎn)擊進(jìn)入科汛官網(wǎng)了解更多