2.3　编码与调试

小程序开发工具支持用户在文件目录上通过右击来新建页面或文件，当然也可直接操作项目路径下的文件，开发者工具会实时将修改同步到项目的文件目录上。

不仅如此，在基本编码功能的基础上，小程序开发工具还提供了不少针对小程序的定制功能。例如，配合模拟器实现了代码修改的实时预览，并针对小程序特有的AXML标签和API进行了自动补全；默认支持ES5/ES6/ES7，并提供了内置的ESlint支持。

小程序并不是一个普通的HTML5　App，无法在浏览器中预览。开发者工具提供了两种调试方式：模拟器加调试工具模式和真机测试模式。模拟器提供了常用设备尺寸的模拟、编译的日志和地理位置数据的模拟，任何代码的修改都会实时反映在模拟器上。

为了配合模拟器，开发者工具提供了定制化的Chrome Devtool，并在其基础上增加了AXML等扩展。单击开发者工具左侧菜单中的第二个图标，打开“调试”界面，如图2-6所示。该界面中的几个功能按钮的作用如下。

·Console：运行日志、错误查看。

·AXML：基于小程序元素的结构和样式调试（替代网页的Elements）。

·Storage：缓存数据查看、编辑。

·Sources：源码查看、断点调试。

·Network：网络资源、请求查看。

图2-6“调试”页面

真机预览首先需要一个有效的App ID，然后将其推送给自己或对应开发者即可。单击左侧菜单中的第三个图标，打开“真机预览”的设置界面，如图2-7所示。

图2-7“真机预览”的设置界面