微信小程序工具程序調試的方法

今天小編給大家分享一下微信小程序工具程序調試的方法的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

程序調試主要有三大功能區：模擬器、調試工具和小程序操作區

模擬器

模擬器模擬微信小程序在客戶端真實的邏輯表現，對于絕大部分的 API 均能夠在模擬器上呈現出正確的狀態。

編譯代碼

點擊工具左下角的編譯按鈕或者使用快捷鍵 Ctrl(Command) + B，可以編譯當前代碼，并自動刷新模擬器。

同時為了幫助開發者調試具體頁面或者進入的場景值，如同，開發者可以選擇自定義編譯模式。

調試工具

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

Wxml Panel

Wxml Panel 用于幫助開發者開發 Wxml 轉化后的界面。在這里可以看到真實的頁面結構以及結構對應的 wxss 屬性，同時可以通過修改對應 wxss 屬性，在模擬器中實時看到修改的情況。通過調試模塊左上角的選擇器，還可以快速找到頁面中組件對應的 wxml 代碼。

Sources panel

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

Network panel

Netwrok Pannle 用于觀察和顯示 request 和 socket 的請求情況

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

Appdata panel

Appdata panel 用于顯示當前項目當前時刻 appdata 具體數據，實時地反饋項目數據情況，可以在此處編輯數據，并及時地反饋到界面上。

Storage panel

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

Console Pannel

Console Pannel 有兩大功能：

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

   

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

Sensor panel

Sensor panel 有兩大功能：

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

   

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

小程序操作區

小程序操作區幫助開發者模擬一些客戶端的環境操作。例如當用戶從小程序中回到聊天窗口，會觸發一個小程序被設置為后臺的api。

當小程序使用到多窗口的時候，可以在頂部操作區進行頁面切換，需要注意的是這個操作只是為了方便開發者才存在的，在真實的微信客戶端中是不會有的。

自定義數據上報

開發者工具上可以編輯和調試自定義分析的數據上報功能，點擊菜單欄中的 “工具 - 自定義分析” 即可彈窗打開自定義分析：

在頁面中可以新建、查看或修改事件，在修改事件的頁面中編輯完畢后，點擊底部的保存并測試按鈕將保存當前配置，同時工具將在調試器上提示收到最新配置，并展示配置信息，展示的內容包括事件的 ID 和名稱，以及每個動作的觸發條件和上報數據：

接著可以在模擬器中操作和觸發事件。在模擬器中刷新小程序也將獲取該測試配置，除非窗口被關閉。窗口關閉后模擬器不會再收到配置。當事件被觸發上報時，工具上會展示上報信息，包括事件 ID、觸發頁面、觸發方式、觸發時動作、以及上報的字段值和數據：

同時可以在窗口中點擊 “同步結果” 會同步顯示上報的數據：

關閉窗口后，配置將全部失效，模擬器不再收到配置并不再觸發上報（小程序中使用 wx.reportAnalytics API 進行的數據上報仍會在工具中輸出）。 測試成功后，可到小程序后臺發布事件配置，即可正式生效收集所定義的事件數據。

以上就是“微信小程序工具程序調試的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。