微信開發(fā)者工具開發(fā)版 v1.06.2411282

微信開發(fā)者工具開發(fā)版是微信官方為方便開發(fā)者進(jìn)行微信小程序的開發(fā)和調(diào)試而提供的一款軟件，通過內(nèi)置的調(diào)試功能和版本管理、項(xiàng)目分享功能，開發(fā)者不僅能夠快速編寫、修正和調(diào)試小程序代碼，還可以更好地發(fā)現(xiàn)和解決問題，提高團(tuán)隊(duì)的協(xié)作效率。

值得一提的是，微信開發(fā)者工具開發(fā)版提供了模擬器和真機(jī)調(diào)試功能，方便開發(fā)者在開發(fā)過程中進(jìn)行實(shí)時(shí)預(yù)覽和調(diào)試，通過模擬器，開發(fā)者可以在不連接真實(shí)設(shè)備的情況下模擬各種不同型號(hào)的手機(jī)，查看小程序在不同設(shè)備上的顯示效果和交互行為，同時(shí)，開發(fā)者還可以將小程序直接部署到真實(shí)設(shè)備上進(jìn)行真機(jī)調(diào)試，以確保小程序在各種實(shí)際環(huán)境中的穩(wěn)定性和兼容性。

除此之外，微信開發(fā)者工具開發(fā)版還提供了數(shù)據(jù)分析功能，幫助開發(fā)者了解小程序的運(yùn)行情況和用戶行為。開發(fā)者可以通過工具提供的數(shù)據(jù)統(tǒng)計(jì)接口，獲取小程序的訪問量、用戶留存率、頁面跳轉(zhuǎn)等數(shù)據(jù)指標(biāo)，從而進(jìn)行數(shù)據(jù)分析和優(yōu)化，歡迎有需要的用戶朋友下載使用。

微信開發(fā)者工具開發(fā)版小程序調(diào)試介紹

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

一、模擬器

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

二、自定義編譯

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

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

三、編譯異常信息

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

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

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

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

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

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

2）上傳代碼時(shí)樣式自動(dòng)補(bǔ)全，使用 "postcss": "^6.0.1"

3）上傳代碼時(shí)自動(dòng)壓縮，使用 "uglify-js": "3.0.27"

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

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

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

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

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

注：

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

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

五、前后臺(tái)切換

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

六、調(diào)試工具

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

七、Wxml panel

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

八、Sources panel

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

九、AppData panel

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

十、Storage panel

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

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

十一、Network panel

Network Panel 用于觀察和顯示 request 和 socket 的請(qǐng)求情況

十二、Console panel

Console panel 有兩大功能：

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

2）小程序的錯(cuò)誤輸出，會(huì)顯示在此處

在控制臺(tái)中可以輸入以下命令

build: 編譯小程序

preview: 預(yù)覽

upload: 上傳代碼

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

openToolsLog: 打開工具日志目錄

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

十三、Sensor panel

Sensor panel 有兩大功能：

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

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

十四、自動(dòng)預(yù)覽

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

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

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

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

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

用戶可以在快捷鍵設(shè)置里自定義預(yù)覽快捷鍵。

微信開發(fā)者工具開發(fā)版怎么真機(jī)調(diào)試？

1、安裝并打開本站下載的微信開發(fā)者工具開發(fā)版，可看到支持小程序和網(wǎng)頁項(xiàng)目，

2、點(diǎn)擊+添加小程序，

3、這里我們選擇確定就可以了，

4、在詳情中，還可以進(jìn)行相應(yīng)的本地設(shè)置，

5、如果，可看到當(dāng)前已經(jīng)顯示機(jī)型了，我們點(diǎn)擊上方的【調(diào)試器】，

6、當(dāng)POST請(qǐng)求看傳參的話，我們可以往下滑，

7、后續(xù)改完bug，開發(fā)再給你發(fā)包后，點(diǎn)擊一下上方的【編譯】就可以了，

8、還可以進(jìn)行緩存清理，以上就是微信開發(fā)者工具開發(fā)版真機(jī)調(diào)試的方法了。

更新日志

1.06.2411282版本

1、新增 多端 Android 設(shè)備信息面板

v1.06.2411272版本

1、小程序默認(rèn)使用真機(jī)調(diào)試 2.0

2、新增 多端 Android 調(diào)試面板支持導(dǎo)出日志

3、新增 Audit 面板展示小程序診斷工具數(shù)據(jù)