程序調(diào)試
代碼編輯
項目預(yù)覽
細(xì)節(jié)點

程序調(diào)試

• 程序調(diào)試主要有三大功能區(qū)：模擬器帮非、調(diào)試工具和小程序操作區(qū)
• 模擬器 -- 模擬器模擬微信小程序在客戶端真實的邏輯表現(xiàn)氧吐，對于絕大部分的 API 均能夠在模擬器上呈現(xiàn)出正確的狀態(tài)。

模擬器.png

• 編譯代碼 -- 點擊工具左下角的編譯按鈕末盔，可以編譯當(dāng)前代碼筑舅，并自動刷新模擬器，同時為了幫助開發(fā)者調(diào)試具體頁面陨舱，可以選擇自定義編譯模式翠拣。

編譯代碼.png

• 調(diào)試工具 -- 調(diào)試工具分為 7 大功能模塊：Wxml、Console游盲、Sources误墓、Network、Appdata益缎、Storage谜慌、Sensor panel

• Wxml panel -- 用于幫助開發(fā)者開發(fā) Wxml 轉(zhuǎn)化后的界面。在這里可以看到真實的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應(yīng)的 wxss 屬性莺奔，同時可以通過修改對應(yīng) wxss 屬性欣范，在模擬器中實時看到修改的情況。通過調(diào)試模塊左上角的選擇器，還可以快速找到頁面中組件對應(yīng)的 wxml 代碼熙卡。

Wxml panel.gif

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

Sources panel.png

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

Netwrok Pannle .png

• Appdata panel 用于顯示當(dāng)前項目當(dāng)前時刻 appdata 具體數(shù)據(jù)典予，實時地反饋項目數(shù)據(jù)情況甜滨，可以在此處編輯數(shù)據(jù)，并及時地反饋到界面上瘤袖。

appdata.gif

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

storage.gif

• Console panel 有兩大功能：（1）開發(fā)者可以在此輸入和調(diào)試代碼 （2）小程序的錯誤輸出，會顯示在此處

console1.gif

錯誤輸出.png

• Sensor panel 有兩大功能：（1）開發(fā)者可以在這里選擇模擬地理位置（2）開發(fā)可以在這里模擬移動設(shè)備表現(xiàn)捂敌，用于調(diào)試重力感應(yīng) API

location.gif

accelerometerchange.gif

• 小程序操作區(qū) -- 小程序操作區(qū)幫助開發(fā)者模擬一些客戶端的環(huán)境操作艾扮。例如當(dāng)用戶從小程序中回到聊天窗口，會觸發(fā)一個小程序被設(shè)置為后臺的api占婉。

小程序操作區(qū).png

當(dāng)小程序使用到多窗口的時候泡嘴，可以在頂部操作區(qū)進(jìn)行頁面切換，需要注意的是這個操作只是為了方便開發(fā)者才存在的逆济，在真實的微信客戶端中是不會有的酌予。

多窗口切換.png

代碼編輯

編輯區(qū)可以對當(dāng)前項目進(jìn)行代碼編寫和文件的添加抛虫、刪除以及重命名等基本操作简僧。

• 文件支持 -- 工具目前提供了4種文件的編輯：wxml建椰、wxss、js涎劈、json以及圖片文件的預(yù)覽。
• 實時預(yù)覽 -- 可以通過編輯區(qū)左邊的模擬器谅海，實時預(yù)覽編輯的情況：
  （1）修改 wxss、wxml 文件蹦浦，會刷新當(dāng)前 page
  （2）修改 js 文件或者 json 文件扭吁，會重新編譯小程序

實時預(yù)覽.png

• 自動保存 -- 書寫代碼后，工具會自動幫助用戶保存當(dāng)前的代碼編輯狀態(tài)侥袜，直接關(guān)閉工具或者切換到別的項目，并不會丟失已經(jīng)編輯的文件狀態(tài)浦旱，但需要注意的是九杂，只有 保存文件，修改內(nèi)容才會真實的寫到硬盤上例隆，并觸發(fā)實時預(yù)覽镀层。
• 自動補(bǔ)全 -- 同大部分編輯器一樣，工具提供了較為完善的自動補(bǔ)全
  （1） js 文件編輯會幫助開發(fā)補(bǔ)全所有的 API ,并給出相關(guān)的注釋解釋
  （2）wxml 文件編輯會幫助開發(fā)者直接寫出相關(guān)的標(biāo)簽
  （3） json 文件編輯會幫助開發(fā)者補(bǔ)全相關(guān)的配置吴侦，并給出實時的提示

自動補(bǔ)全.gif

自動補(bǔ)全2.gif

自動補(bǔ)全3.gif

• 常用快捷鍵

格式調(diào)整

    Ctrl+S：保存文件
    Ctrl+[妈倔， Ctrl+]：代碼行縮進(jìn)
    Ctrl+Shift+[绸贡， Ctrl+Shift+]：折疊打開代碼塊
    Ctrl+C Ctrl+V：復(fù)制粘貼，如果沒有選中任何文字則復(fù)制粘貼一行
    Shift+Alt+F：代碼格式化
    Alt+Up捧挺，Alt+Down：上下移動一行
    Shift+Alt+Up尿瞭，Shift+Alt+Down：向上向下復(fù)制一行
    Ctrl+Shift+Enter：在當(dāng)前行上方插入一行
    Ctrl+Shift+F：全局搜索

光標(biāo)相關(guān)

    Ctrl+End：移動到文件結(jié)尾
    Ctrl+Home：移動到文件開頭
    Ctrl+i：選中當(dāng)前行
    Shift+End：選擇從光標(biāo)到行尾
    Shift+Home：選擇從行首到光標(biāo)處
    Ctrl+Shift+L：選中所有匹配
    Ctrl+D：選中匹配
    Ctrl+U：光標(biāo)回退

界面相關(guān)

    Ctrl + \：隱藏側(cè)邊欄
    Ctrl + m: 打開或者隱藏模擬器

項目預(yù)覽

項目頁卡主要有三大功能

• 顯示當(dāng)前項目細(xì)節(jié):包括圖標(biāo)声搁、AppID、目錄信息很魂，以及上次提交代碼的時間以及代碼包大小檐涝。
• 提交預(yù)覽和提交上傳
  (1)點擊預(yù)覽功能法挨，工具會上傳源代碼到微信服務(wù)器幅聘，成功后將會顯示一個二維碼，開發(fā)者用新版微信掃描二維碼即可在手機(jī)上看到相應(yīng)項目的真實表現(xiàn).
  (2)點擊上傳荐糜，工具會上傳源代碼到微信服務(wù)器葛超，開發(fā)者可以在 mp 管理后臺看到本次提交的情況. 需要注意的是，代碼上傳 功能僅管理員微信號可操作
• 項目配置

1.ES6 轉(zhuǎn) ES5
在 0.10.101000 以及之后版本的開發(fā)工具中，會默認(rèn)使用 babel 將開發(fā)者代碼 ES6 語法
轉(zhuǎn)換為三端都能很好支持的 ES5 的代碼页畦，幫助開發(fā)者解決環(huán)境不同所帶來的開發(fā)問題豫缨。
開發(fā)者可以在項目設(shè)置中關(guān)閉這個功能。

2.需要注意的是：
    這種轉(zhuǎn)換只會幫助開發(fā)處理語法上問題燃箭，新的 ES6 的 API 例如 Promise 等需要開發(fā)者自行引入 Polyfill 或者別的類庫舍败。
    為了提高代碼質(zhì)量，在開啟 ES6 轉(zhuǎn)換功能的情況下裙戏，默認(rèn)啟用 javasctipt 嚴(yán)格模式厕诡，請參考 "use strict"(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)。

3.監(jiān)聽文件變化壹罚，自動刷新開發(fā)者工具
開啟此選項寿羞，和當(dāng)前項目相關(guān)的文件發(fā)生改變時候稠曼，會自動幫助開發(fā)者刷新調(diào)試模擬器客年，從而提高開發(fā)效率漠吻。

4.壓縮代碼
開啟此選項，開發(fā)工具在上傳代碼時候?qū)椭_發(fā)者壓縮 javascript 代碼绍傲，減小代碼包體積耍共。

5.樣式補(bǔ)全
開啟此選項，開發(fā)工具會自動檢測并補(bǔ)全缺失樣式杠纵，保證在 iOS8 上的正常顯示钩骇。

6.不校驗請求域名及 TLS 版本
開啟此選項倘屹，開發(fā)工具將不會校驗安全域名，以及 TLS 版本务蝠，幫助在開發(fā)過程中更好的完成調(diào)試工作烛缔。

項目預(yù)覽.png

細(xì)節(jié)點

• javascript && wxss
  微信小程序運行在三端：iOS、Android 和 用于調(diào)試的開發(fā)者工具毅弧。三端的腳本執(zhí)行環(huán)境聚以及用于渲染非原生組件的環(huán)境是各不相同的：
  在 iOS 上当窗，小程序的 javascript 代碼是運行在 JavaScriptCore 中崖面，是由 WKWebView 來渲染的，環(huán)境有 iOS8庶香、iOS9简识、iOS10
  在 Android 上感猛，小程序的 javascript 代碼是通過 X5 JSCore來解析奢赂，是由 X5 基于 Mobile Chrome 37 內(nèi)核來渲染的
  在 開發(fā)工具上膳灶， 小程序的 javascript 代碼是運行在 nwjs 中，是由 Chrome Webview 來渲染的
  盡管三端的環(huán)境是十分相似的轧钓，但是還是有些許區(qū)別：
  ES6 語法支持不一致 語法上開發(fā)者可以通過開啟 ES6 轉(zhuǎn) ES5 的功能來規(guī)避毕箍。
  ES6 API 支持不一致 考慮到代碼包大小的限制，API 上目前需要開發(fā)者自行引入相關(guān)的類庫來進(jìn)行處理庭再，可以通過 caniuse 或者 X5兼容 查詢到相關(guān) API 的支持情況
  wxss 渲染表現(xiàn)不一致 盡管可以通過開啟樣式補(bǔ)全來規(guī)避大部分的問題 詳情牺堰，還是建議開發(fā)者需要在 iOS 和 Android 上檢查小程序的真實表現(xiàn)颅围。

• 掃碼接口的調(diào)試
  同手機(jī)端直接調(diào)用攝像頭來掃碼不同院促，在 PC 或者 Mac 上調(diào)用攝像頭來掃碼完成調(diào)試是一個低效的行為，所以在開發(fā)工具上調(diào)用二維碼掃碼 API 后渐溶，開發(fā)者可以選擇一個本地的圖片來進(jìn)行后續(xù)的邏輯調(diào)試弄抬，而不是真正的啟用攝像頭來掃碼，流程有所不同拖陆，但是接口的輸入和輸出是一致的懊亡。

• 微信支付的調(diào)試
  最新版本的開發(fā)者工具已經(jīng)支持微信支付的調(diào)試店枣，但是為了兼顧到安全叹誉，同手機(jī)上直接調(diào)用微信支付有所不同闷旧。

    1.新綁定的開發(fā)者需要 24 小時后才有權(quán)限進(jìn)行微信支付的調(diào)試
    2.開發(fā)者在工具上調(diào)用微信支付的 API 后鸠匀，開發(fā)工具會出現(xiàn)一個二維碼，開發(fā)者必須使用當(dāng)前開發(fā)所使用的微信號掃碼后在手機(jī)上完成支付的流程
    3.工具會同步移動端微信支付的回包到工具中宅此，開發(fā)者自行進(jìn)行后續(xù)的操作

• 分享的調(diào)試

    1.開發(fā)者工具上調(diào)用分享是一個模擬的行為爬范，并不會真實的分享給用戶，開發(fā)可以通過這個模擬行為判斷是否正確的調(diào)用了分享 API
   2. 在工具上編譯小程序之前開發(fā)者可以設(shè)置啟動的頁面和參數(shù)璧亮，用于幫助調(diào)試被分享者打開小程序并定位到相關(guān)頁面的場景
    3.在提交預(yù)覽的時候斥难，開發(fā)者也可以設(shè)置啟動頁面和參數(shù)哑诊，用于幫助調(diào)試移動端的真實表現(xiàn)

• 客戶端可信域名校驗
  開發(fā)者使用手機(jī)掃碼調(diào)試的場景下，打開調(diào)試模式之后竞阐，最新版的客戶端將不檢查可信域名暑劝。
• 代碼文件必須 UTF8 編碼
  iOS下僅支持 UTF8 編碼格式，最新版本的開發(fā)者工具會在上傳代碼時候?qū)Υa文件做一次編碼格式校驗幕垦。