微信開發(fā)者工具開發(fā)版是一款微信小程序的開發(fā)和調(diào)試的軟件，可能不少的用戶都使用過微信小程序，實際上只需要通過專業(yè)的工具，就能夠自己開發(fā)小程序應(yīng)用，在微信開發(fā)者工具這個軟件之中，通過內(nèi)置的調(diào)試功能和版本管理、項目分享功能，開發(fā)者可以快速編寫、修正和調(diào)試小程序代碼。

軟件介紹

微信開發(fā)者工具程序調(diào)試主要有三大功能區(qū)：模擬器、調(diào)試工具和小程序操作區(qū)

一、模擬器

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

二、自定義編譯

點擊工具欄中的編譯按鈕或者使用快捷鍵 Ctrl(?) + B，可以編譯當(dāng)前代碼，并自動刷新模擬器。

同時為了幫助開發(fā)者調(diào)試從不同場景值進入具體的頁面，開發(fā)者可以添加或選擇已有的自定義編譯條件進行編譯和代碼預(yù)覽。

三、編譯異常信息

在預(yù)覽或上傳的過程中，可能會出現(xiàn)編譯異常信息。

忽略上傳的文件：在項目文件夾下，某些文件可能不是小程序運行所需的，例如 readme 文檔、.gitignore 文件等。為了優(yōu)化大小，在預(yù)覽和上傳的過程中，這些文件將不會被打包。

體積過大的文件：如果勾選了 ES6、 轉(zhuǎn) ES5 或代碼壓縮的選項，為了優(yōu)化編譯速度，對于某些體積很大的 JS 文件，工具會跳過對這些文件的處理。

四、自定義預(yù)處理

在項目設(shè)置頁卡，我們提供了以下幾個默認的預(yù)處理，可以解決大部分的代碼文件預(yù)處理的問題

1）ES6 轉(zhuǎn) ES5（可以應(yīng)用于編譯、預(yù)覽、上傳），使用 "babel-core": "^6.26.0"

2）上傳代碼時樣式自動補全，使用 "postcss": "^6.0.1"

3）上傳代碼時自動壓縮，使用 "uglify-js": "3.0.27"

對于高級開發(fā)者來說，完全可以自己編寫自動化構(gòu)建腳本對代碼文件進行預(yù)處理，所以微信開發(fā)者工具提供了 啟用自定義處理命令 選項 開發(fā)者可以指定 編譯前/預(yù)覽前/上傳前 需要預(yù)處理的命令 開發(fā)者工具使用 shell 的方式運行指定的命令，并在控制臺中輸出命令的執(zhí)行日志

預(yù)處理命令的執(zhí)行順序

1）自定義預(yù)處理命令

2）默認預(yù)處理命令

3）編譯/預(yù)覽/上傳

注：

1）編譯前預(yù)處理命令，需要手動點擊 "編譯" 按鈕，或者使用快捷鍵編譯才能觸發(fā)。文件修改無法觸發(fā)該命令。

2）Mac 版本的開發(fā)者工具無法復(fù)用 bash 中的 Path 環(huán)境變量?？赡苄枰謩釉O(shè)置系統(tǒng)的 Path 環(huán)境變量，才能正常執(zhí)行命令。

五、前后臺切換

工具欄中前后臺切換幫助開發(fā)者模擬一些客戶端的環(huán)境操作。例如當(dāng)用戶從小程序中回到聊天窗口，會觸發(fā)一個小程序被設(shè)置為后臺的回調(diào)。

六、調(diào)試工具

微信開發(fā)者工具調(diào)試工具分為 7 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

七、Wxml panel

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

八、Sources panel

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

九、AppData panel

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

十、Storage panel

Storage panel 用于顯示當(dāng)前項目使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲情況。

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

十一、Network panel

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

十二、Console panel

Console panel 有兩大功能：

1）開發(fā)者可以在此輸入和調(diào)試代碼

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

在微信開發(fā)者工具控制臺中可以輸入以下命令

build: 編譯小程序

preview: 預(yù)覽

upload: 上傳代碼

openVendor: 打開基礎(chǔ)庫所在目錄

openToolsLog: 打開工具日志目錄

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

十三、Sensor panel

Sensor panel 有兩大功能：

1）開發(fā)者可以在這里選擇模擬地理位置

2）開發(fā)可以在這里模擬移動設(shè)備表現(xiàn)，用于調(diào)試重力感應(yīng) API

十四、自動預(yù)覽

自動預(yù)覽可以實現(xiàn)編寫小程序時快速預(yù)覽，免去了每次查看小程序效果時都要掃碼或者使用小程序助手的麻煩。只需按下快捷鍵，保持前臺運行的微信即可自動喚出或刷新小程序。

要使用自動預(yù)覽功能，需要配合 6.6.7 及以上的微信客戶端版本。

要開始使用 “自動預(yù)覽” 功能，可以在打開預(yù)覽二維碼的時候，點擊 “自動預(yù)覽” 標(biāo)簽以切換到自動預(yù)覽模式。切換到自動預(yù)覽模式后，只需按下預(yù)覽快捷鍵，或者點擊浮窗上的 “編譯并預(yù)覽” 按鈕，即可觸發(fā)自動預(yù)覽。此時工具會上傳代碼，保持前臺運行的微信客戶端會自動刷新當(dāng)前開發(fā)的小程序。

當(dāng)自動預(yù)覽成功時，工具欄上的預(yù)覽圖標(biāo)會顯示為一個綠勾。如果預(yù)覽出錯，則會顯示為一個紅色驚嘆號，可以點擊查看詳情。

注意，自動預(yù)覽功能僅限與登錄開發(fā)者工具的同賬號微信使用。如需換回普通預(yù)覽模式，只需要點擊 “掃描二維碼預(yù)覽” 標(biāo)簽即可。

用戶可以在微信開發(fā)者工具快捷鍵設(shè)置里自定義預(yù)覽快捷鍵。