1.2　开发工具的介绍

为了帮助开发者更为高效地开发和调试微信小程序，微信Web开发者工具集成了公众号网页调试和小程序调试两种开发模式。

开发者工具界面，从上到下、从左到右分别为菜单栏、工具栏、模拟器、编辑器、调试器五大部分，如图1-22所示。

1.2.1　菜单栏

菜单栏包含项目、文件、编辑、工具、界面、设置和微信开发者工具七大部分，它们的下拉菜单如图1-23所示。

1.2.2　工具栏

1．左侧区域

工具栏的左侧区域包含个人中心、模拟器、编辑器、调试器和云开发五部分，如图1-24所示。

具体说明如下。

• 　个人中心：账号切换和消息提醒；
• 　模拟器：单击该项切换显示／隐藏模拟器面板；
• 　编辑器：单击该项切换显示／隐藏编辑器面板；
• 　调试器：单击该项切换显示／隐藏调试器面板；
• 　云开发：单击该项创建云开发。

2．中间区域

工具栏的中间区域包含小程序模式、编译模式、编译、预览、真机调试、切后台和清缓存七个部分，如图1-25所示。

具体说明如下。

• 　小程序模式：包括小程序模式与插件模式；
• 　编译模式：包括普通编译、自定义编译和通过二维码编译；
• 　编译：单击该项编译小程序项目；
• 　预览：单击该项生成二维码进行真机预览；
• 　真机调试：单击该项生成二维码进行真机调试；
• 　切后台：单击该项切换前台／后台；
• 　清缓存：可清除数据缓存、文件缓存、授权数据、网络缓存、登录状态与全部缓存。

3．右侧区域

工具栏的右侧区域包含上传、版本管理、社区和详情四部分，如图1-26所示。

具体说明如下。

• 　上传：将代码上传为开发版本；
• 　版本管理：单击该项开启代码版本管理（使用git进行版本管理）；
• 　社区：单击该项进入开放社区；
• 　详情：显示项目详情、项目设置和域名信息。

1.2.3　模拟器

在模拟器面板顶部，可以切换手机型号、显示比例和模拟网络连接状态，并进行模拟操作。在模拟器底部的状态栏，可以直观地看到当前运行小程序的场景值、页面路径及页面参数，如图1-27所示。

1.2.4　编辑器

编辑器包含项目目录结构区与代码编辑区，如图1-28所示。

1.2.5　调试器

调试器分为Console、Sources、Network、Security、AppData、Audits、Sensor、Storage、Trace以及Wxml十大功能模块，如图1-29所示。

1．Console

Console是后台控制器，开发者可以在此输出自定义内容并调试代码，代码报错和警告会在此处显示。开发者可以在js（即JavaScript）文件中使用console.log（）语句查看代码的执行情况以及数据，如图1-30和图1-31所示。

2．Sources

Sources面板是小程序的资源面板，主要用于显示当前项目的脚本文件。与浏览器开发不同的是微信小程序框架会对脚本文件进行编译，所以在Sources面板中，开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define（）函数中，并且对于Page代码，在尾部会有require的主动调用，如图1-32所示。

3．Network

Network面板主要用于观察和显示request和socket的请求情况（请求接口、请求参数、返回值），如图1-33所示。

4．Security

Security面板是小程序的安全面板，开发者可以通过该面板去调试当前网页的安全和认证等问题并确保是否已经在网站上正确地实现HTTPS，如图1-34所示。

5．AppData

AppData面板主要用于显示当前项目当前时刻AppData的具体数据，实时地反馈项目数据情况，开发者也可以在此处编辑数据，并及时地反馈到界面上，如图1-35所示。

6．Audits

Audits面板主要具有体验评分功能，开发者单击“运行”按钮，并测试小程序项目，尽可能测试小程序中的所有页面，测试结束后，单击“停止”按钮，系统会在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并定位出哪里有问题，以及给出一些优化意见，如图1-36所示。

7．Sensor

Sensor面板用于模拟手机传感器，在PC端测试时，开发者可以手动录入传感器数据，例如地理位置经纬度、加速度计坐标等，如图1-37所示。

8．Storage

Storage面板用于显示当前项目中使用wx.setStorage或者wx.setStorageSync后的本地数据存储情况，如图1-38所示。

9．Trace

Trace面板是小程序的调试追踪面板，目前只支持Android系统的手机，如图1-39所示。

10．Wxml

Wxml面板是小程序的WXML代码预览面板，可以帮助开发者开发WXML转换后的界面。在这里可以看到真实的页面结构以及对应的WXSS属性，同时可以通过修改对应的WXSS属性，在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的WXML代码，如图1-40和图1-41所示。