2.3 開發者工具的介紹

開發者工具主要由菜單欄、工具欄、模擬器、編輯器和調試器5個部分組成，如圖2-28所示。

2.3.1 菜單欄

菜單欄中主要包括項目、文件、編輯、工具、界面、設置和微信開發者工具，它們的下拉菜單選項如圖2-29所示。

2.3.2 工具欄

1 左側區域

工具欄的左側區域主要包含個人中心、模擬器、編輯器和調試器，如圖2-30所示。

具體說明如下。

?　個人中心：賬戶切換和消息提醒。

?　模擬器：單擊切換顯示／隱藏模擬器面板。

?　編輯器：單擊切換顯示／隱藏編輯器面板。

?　調試器：單擊切換顯示／隱藏調試器面板。

2 中間區域

工具欄的中間區域主要包含小程序模式、編譯模式、編譯、預覽、遠程調試、切后臺和清緩存，如圖2-31所示。

具體說明如下。

?　小程序模式：小程序模式和搜索動態頁模式。

?　編譯模式：普通模式、自定義編譯模式和二維碼編譯模式。

?　編譯：重新編譯小程序項目。

?　預覽：生成二維碼進行真機預覽。

?　遠程調試：生成二維碼進行真機遠程調試。

?　切后臺：可以切換場景值。

?　清緩存：可以單獨或同時清除數據緩存、文件緩存、授權數據、網絡緩存、登錄狀態。

3 右側區域

工具欄的右側區域主要包含上傳、測試、騰訊云和詳情，如圖2-32所示。

具體說明如下。

?　上傳：將代碼上傳為開發版本。

?　測試：每24小時可以申請一份測試報告。

?　騰訊云：小程序授權的騰訊云服務。

?　詳情：顯示項目設置、域名信息和騰訊云狀態。

2.3.3 模擬器

模擬器面板可以切換虛擬手機型號、顯示比例以及模擬網絡連接狀態，如圖2-33所示。

2.3.4 編輯器

編輯器主要包含項目完整目錄結構區和代碼區，如圖2-34所示。

1 目錄結構區

在目錄結構區中可以單擊左上角的“+”號添加新文件，文件類型包括目錄、Page、Component、JS、JSON、WXML、WXSS和WXS。其中，Page有幫助開發者快速創建頁面所需的全套文件，即在同一路徑中批量生成同名的WXML、WXSS、JS及JSON文件。

2 代碼區

在代碼區中允許打開多個頁面切換查看，單擊代碼右上角的“×”號可以關閉當前代碼頁面。

在頁面上編輯代碼還可以實現自動提示。這里以編寫一個<view>標簽為例，如圖2-35所示。

由圖2-35可見，只需要輸入前面幾個字母，就可以出現相關組件的代碼提示，此時用鍵盤方向鍵選擇正確的內容，然后按回車鍵即可全部生成。

2.3.5 調試器

調試器可以在PC端預覽小程序或在手機端調試小程序時使用，用于實時查看小程序運行時的后臺輸出、網絡狀況、數據存儲等內容的變化。調試器目前主要包含了9個面板，可以用其頂部的tab欄進行切換，如圖2-36所示。

1 Console

Console是后端控制臺，在小程序編譯或運行有誤時將給出warning或error的信息提示。例如錯誤的JS文件代碼導致編譯失敗時，提示如圖2-37所示。

當然可以由開發者自行在JS文件中使用console.log("自定義輸出內容")語句或直接在控制臺上進行文本輸出，用于診斷代碼的執行情況和數據內容。

例如直接在控制臺輸入console.log()語句后回車即可完成輸出，效果如圖2-38所示。

2 Sources

Sources面板是小程序的資源面板，可以顯示本地和云端的相關資源文件，如圖2-39所示。

小程序在代碼編寫完成后會被打包成一個完整的JavaScript文件運行。

3 Network

Network面板在小程序調用網絡API時用于記錄網絡抓包數據，如圖2-40所示。

4 Security

Security面板是小程序的安全面板，當發生了網絡請求時記錄所使用的域名來源是否安全，如圖2-41所示。

5 Storage

Storage面板可用于查看當前小程序的緩存數據，如圖2-42所示。

在測試過程中，開發者可以手動修改該面板中的數據值。

6 AppData

AppData面板可以實時查看小程序頁面JS文件中data數據的變化，如圖2-43所示。

在測試過程中，開發者可以手動修改該面板中的數據值。

7 Wxml

Wxml面板是小程序的WXML代碼預覽面板，在運行小程序后打開該面板就可以查看當前頁面的WXML代碼內容和對應的渲染樣式，如圖2-44所示。

8 Sensor

Sensor面板用于模擬手機傳感器，在PC端測試時可以手動錄入傳感器數據，例如地理位置經緯度、加速度計坐標等，如圖2-45所示。

9 Trace

Trace面板是小程序的調試追蹤面板，目前暫時只支持Android手機，如圖2-46所示。