2.3 开发者工具的介绍
开发者工具主要由菜单栏、工具栏、模拟器、编辑器和调试器5个部分组成，如图2-28所示。
图2-28 微信web开发者工具的页面布局
2.3.1 菜单栏
菜单栏中主要包括项目、文件、编辑、工具、界面、设置和微信开发者工具，它们的下拉菜单选项如图2-29所示。
图2-29 菜单栏的二级选项
2.3.2 工具栏
1 左侧区域
工具栏的左侧区域主要包含个人中心、模拟器、编辑器和调试器，如图2-30所示。
图2-30 工具栏的左侧区域
具体说明如下。
• 个人中心：账户切换和消息提醒。
• 模拟器：单击切换显示／隐藏模拟器面板。
• 编辑器：单击切换显示／隐藏编辑器面板。
• 调试器：单击切换显示／隐藏调试器面板。
2 中间区域
工具栏的中间区域主要包含小程序模式、编译模式、编译、预览、远程调试、切后台和清缓存，如图2-31所示。
图2-31 工具栏的中间区域
具体说明如下。
• 小程序模式：小程序模式和搜索动态页模式。
• 编译模式：普通模式、自定义编译模式和二维码编译模式。
• 编译：重新编译小程序项目。
• 预览：生成二维码进行真机预览。
• 远程调试：生成二维码进行真机远程调试。
• 切后台：可以切换场景值。
• 清缓存：可以单独或同时清除数据缓存、文件缓存、授权数据、网络缓存、登录状态。
3 右侧区域
工具栏的右侧区域主要包含上传、测试、腾讯云和详情，如图2-32所示。
图2-32 工具栏的右侧区域
具体说明如下。
• 上传：将代码上传为开发版本。
• 测试：每24小时可以申请一份测试报告。
• 腾讯云：小程序授权的腾讯云服务。
• 详情：显示项目设置、域名信息和腾讯云状态。
2.3.3 模拟器
模拟器面板可以切换虚拟手机型号、显示比例以及模拟网络连接状态，如图2-33所示。
图2-33 模拟器的相关选项
2.3.4 编辑器
编辑器主要包含项目完整目录结构区和代码区，如图2-34所示。
图2-34 编辑器面板布局
1 目录结构区
在目录结构区中可以单击左上角的“+”号添加新文件，文件类型包括目录、Page、Component、JS、JSON、WXML、WXSS和WXS。其中，Page有帮助开发者快速创建页面所需的全套文件，即在同一路径中批量生成同名的WXML、WXSS、JS及JSON文件。
2 代码区
在代码区中允许打开多个页面切换查看，单击代码右上角的“×”号可以关闭当前代码页面。
在页面上编辑代码还可以实现自动提示。这里以编写一个<view>标签为例，如图2-35所示。
图2-35 代码启动提示功能
由图2-35可见，只需要输入前面几个字母，就可以出现相关组件的代码提示，此时用键盘方向键选择正确的内容，然后按回车键即可全部生成。
2.3.5 调试器
调试器可以在PC端预览小程序或在手机端调试小程序时使用，用于实时查看小程序运行时的后台输出、网络状况、数据存储等内容的变化。调试器目前主要包含了9个面板，可以用其顶部的tab栏进行切换，如图2-36所示。
图2-36 调试器的tab栏
1 Console
Console是后端控制台，在小程序编译或运行有误时将给出warning或error的信息提示。例如错误的JS文件代码导致编译失败时，提示如图2-37所示。
图2-37 Console控制台的错误提示
当然可以由开发者自行在JS文件中使用console.log("自定义输出内容")语句或直接在控制台上进行文本输出，用于诊断代码的执行情况和数据内容。
例如直接在控制台输入console.log()语句后回车即可完成输出，效果如图2-38所示。
图2-38 Console控制台中的console.log()语句
2 Sources
Sources面板是小程序的资源面板，可以显示本地和云端的相关资源文件，如图2-39所示。
图2-39 Sources面板
小程序在代码编写完成后会被打包成一个完整的JavaScript文件运行。
3 Network
Network面板在小程序调用网络API时用于记录网络抓包数据，如图2-40所示。
图2-40 Network面板
4 Security
Security面板是小程序的安全面板，当发生了网络请求时记录所使用的域名来源是否安全，如图2-41所示。
图2-41 Security面板
5 Storage
Storage面板可用于查看当前小程序的缓存数据，如图2-42所示。
图2-42 Storage面板
在测试过程中，开发者可以手动修改该面板中的数据值。
6 AppData
AppData面板可以实时查看小程序页面JS文件中data数据的变化，如图2-43所示。
图2-43 AppData面板
在测试过程中，开发者可以手动修改该面板中的数据值。
7 Wxml
Wxml面板是小程序的WXML代码预览面板，在运行小程序后打开该面板就可以查看当前页面的WXML代码内容和对应的渲染样式，如图2-44所示。
图2-44 Wxml面板
8 Sensor
Sensor面板用于模拟手机传感器，在PC端测试时可以手动录入传感器数据，例如地理位置经纬度、加速度计坐标等，如图2-45所示。
图2-45 Sensor面板
9 Trace
Trace面板是小程序的调试追踪面板，目前暂时只支持Android手机，如图2-46所示。
图2-46 Trace面板