微信小程序如何調試

本篇內容主要講解“微信小程序如何調試”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“微信小程序如何調試”吧!

　　調試工具

　　調試工具分為 7 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

　　Wxml panel

　　Wxml panel 用于幫助開發者開發 wxml 轉化后的界面。在這里可以看到真實的頁面結構以及結構對應的 wxss 屬性，同時可以通過修改對應 wxss 屬性，在模擬器中實時看到修改的情況(僅為實時預覽，無法保存到文件)。通過調試模塊左上角的選擇器，還可以快速定位頁面中組件對應的 wxml 代碼。

　　Sources panel

　　Sources panel 用于顯示當前項目的腳本文件，同瀏覽器開發不同，微信小程序框架會對腳本文件進行編譯的工作，所以在 Sources panel 中開發者看到的文件是經過處理之后的腳本文件，開發者的代碼都會被包裹在 define 函數中，并且對于 Page 代碼，在尾部會有 require 的主動調用。

　　注：當代碼運行到斷點的時候，整個小程序都停止了，所以模擬器會出現白屏或者無法操作的情況

　　AppData panel

　　AppData panel 用于顯示當前項目運行時小程序 AppData 具體數據，實時地反映項目數據情況，可以在此處編輯數據，并及時地反饋到界面上。

　　Storage panel

　　Storage panel 用于顯示當前項目使用 wx.setStorage 或者 wx.setStorageSync 后的數據存儲情況。

　　可以直接在 Storage panel 上對數據進行刪除(按 delete 鍵)、新增、修改

　　Network panel

　　Network Panel 用于觀察和顯示 request 和 socket 的請求情況

　　注：uploadFile 和 downloadFile 暫時不支持在 Network Panel 中查看

　　Console panel

　　Console panel 有兩大功能：

　　開發者可以在此輸入和調試代碼

　　小程序的錯誤輸出，會顯示在此處

　　在控制臺中可以輸入以下命令

　　build: 編譯小程序

　　preview: 預覽

　　upload: 上傳代碼

　　openVendor: 打開基礎庫所在目錄

　　openToolsLog: 打開工具日志目錄

　　checkProxy(url): 檢查指定 url 的代理使用情況

　　Sensor panel

　　Sensor panel 有兩大功能：

　　開發者可以在這里選擇模擬地理位置

　　開發可以在這里模擬移動設備表現，用于調試重力感應 API

到此，相信大家對“微信小程序如何調試”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！