2.3　編碼與調(diào)試

小程序開發(fā)工具支持用戶在文件目錄上通過右擊來新建頁面或文件，當(dāng)然也可直接操作項目路徑下的文件，開發(fā)者工具會實時將修改同步到項目的文件目錄上。

不僅如此，在基本編碼功能的基礎(chǔ)上，小程序開發(fā)工具還提供了不少針對小程序的定制功能。例如，配合模擬器實現(xiàn)了代碼修改的實時預(yù)覽，并針對小程序特有的AXML標(biāo)簽和API進(jìn)行了自動補(bǔ)全；默認(rèn)支持ES5/ES6/ES7，并提供了內(nèi)置的ESlint支持。

小程序并不是一個普通的HTML5　App，無法在瀏覽器中預(yù)覽。開發(fā)者工具提供了兩種調(diào)試方式：模擬器加調(diào)試工具模式和真機(jī)測試模式。模擬器提供了常用設(shè)備尺寸的模擬、編譯的日志和地理位置數(shù)據(jù)的模擬，任何代碼的修改都會實時反映在模擬器上。

為了配合模擬器，開發(fā)者工具提供了定制化的Chrome Devtool，并在其基礎(chǔ)上增加了AXML等擴(kuò)展。單擊開發(fā)者工具左側(cè)菜單中的第二個圖標(biāo)，打開“調(diào)試”界面，如圖2-6所示。該界面中的幾個功能按鈕的作用如下。

·Console：運行日志、錯誤查看。

·AXML：基于小程序元素的結(jié)構(gòu)和樣式調(diào)試（替代網(wǎng)頁的Elements）。

·Storage：緩存數(shù)據(jù)查看、編輯。

·Sources：源碼查看、斷點調(diào)試。

·Network：網(wǎng)絡(luò)資源、請求查看。

真機(jī)預(yù)覽首先需要一個有效的App ID，然后將其推送給自己或?qū)?yīng)開發(fā)者即可。單擊左側(cè)菜單中的第三個圖標(biāo)，打開“真機(jī)預(yù)覽”的設(shè)置界面，如圖2-7所示。