小程式開發者除錯工具使用說明
微信開發者工作是微信官方提供的針對微信小程式的開發工具,集中了開發,除錯,預覽,上傳等功能。微信團隊釋出了微信小程式開發者工具、微信小程式開發文件和微信小程式設計指南,全新的開發者工具,集成了開發除錯、程式碼編輯及程式釋出等功能,幫助開發者簡單和高效地開發微信小程式。
啟動工具時,開發者需要使用已在後臺繫結成功的微訊號掃描二維碼登入,後續所有的操作都會基於這個微信的帳號。
除錯工具分為9大功能模組:Console、Sources、Network、Security,Storage,Appdata、Wxml,Sensor以及Trace。
開發者工具
Console的功能:開發者可以在此輸出和除錯程式碼,程式碼報錯和警告會在此處顯示。
輸出除錯
定位報錯
Sources的功能:用於顯示當前專案的指令碼檔案,同瀏覽器開發不同,微信小程式框架會對指令碼檔案進行編譯的工作,所以在 Sources panel 中開發者看到的檔案是經過處理之後的指令碼檔案,開發者的程式碼都會被包裹在 define 函式中,並且對於 Page 程式碼,在尾部會有 require 的主動呼叫。
使用
Network的使用:觀察和顯示 request 和 socket 的請求情況(請求介面,請求引數,返回值)
Network使用方法
Security使用: 通過該面板你可以去除錯當前網頁的安全和認證等問題並確保您已經在你的網站上正確地實現HTTPS。
專案中用得到的不多
Storege使用: 用於顯示當前專案的使用 wx.setStorage 或者 wx.setStorageSync 後的資料儲存情況。
存
APPData使用:用於顯示當前專案當前時刻 appdata 具體資料,實時地反饋專案資料情況,可以在此處編輯資料,並及時地反饋到介面上。
Wxml的使用:幫助開發者開發 Wxml 轉化後的介面。在這裡可以看到真實的頁面結構以及結構對應的 wxss 屬性,同時可以通過修改對應 wxss 屬性,在模擬器中實時看到修改的情況。通過除錯模組左上角的選擇器,還可以快速找到頁面中元件對應的 wxml 程式碼。
佈局樣式除錯
sensor:模擬地理位置和重力感應
trace:這是連結手機除錯用的
直接開啟頁面路徑