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

軟件介紹

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

一、模擬器

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

二、自定義編譯

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

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

三、編譯異常信息

在預覽或上傳的過程中，可能會出現編譯異常信息。

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

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

四、自定義預處理

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

1）ES6 轉 ES5（可以應用于編譯、預覽、上傳），使用 "babel-core": "^6.26.0"

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

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

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

預處理命令的執行順序

1）自定義預處理命令

2）默認預處理命令

3）編譯/預覽/上傳

注：

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

2）Mac 版本的開發者工具無法復用 bash 中的 Path 環境變量?？赡苄枰謩釉O置系統的 Path 環境變量，才能正常執行命令。

五、前后臺切換

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

六、調試工具

微信開發者工具調試工具分為 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 的請求情況

十二、Console panel

Console panel 有兩大功能：

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

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

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

build: 編譯小程序

preview: 預覽

upload: 上傳代碼

openVendor: 打開基礎庫所在目錄

openToolsLog: 打開工具日志目錄

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

十三、Sensor panel

Sensor panel 有兩大功能：

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

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

十四、自動預覽

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

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

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

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

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

用戶可以在微信開發者工具快捷鍵設置里自定義預覽快捷鍵。