开发工具的介绍，开发工具包含“编辑器区域”，“调试器区域”，“工具栏区域”

一 编辑器区域

编辑器区域有两部分：

1. 项目文件目录和结构展示区
   在项目目录或者文件上单击右键可完成新建文件、删除
   重新命名目录或者文件
2. 代码编辑区
   在该区编码代码，可通过模拟器实时预览
   修改wxss、wxml文件。会刷新当前页面
   修改js 或者json文件，会重新编译小程序

代码补全
代码编写过程中，开发工具提供自动补全功能
编辑js 文件，自动补全所有的API，给出相关注释解释
编辑wxml 文件，帮助开发者直接写出相关标签
编辑json 文件，自动补全相关的配置，给出实时的提示。

二 调试器区域

image.png

常用尝试工具有：

1. Console
   显示小程序的错误信息和调试代码
2. Sources
   显示当前项目的脚本文件，此处看到的是处理后的脚本文件
3. Network
   用来观察发送的请求和调用文件的信息，包括文件名称、路径、大小、调用状态、时间等
4. Storage
   显示当前项目使用wx.setStorage或者wx.setStorageSync后的数据存储情况
5. AppData
   显示当前项目当前时刻的具体数据，实时反馈项目数据情况
6. Wxml
   用于帮助开发者开发wxml转后的界面，在这里可以看到真实的界面结构及结构对应的wxss属性，也可修改对应属性。

三 工具栏区域

image.png

1. 编译
   编译当前代码，自动刷新模拟器
2. 预览
   将小程序上传，生成预览二维码
3. 真机调试
   在真实手机上进行调试，会生成二维码
4. 前后台切换
   帮助开发者模拟一些客户端的操作环境。如：操作小程序过程中，有电话进来，小程序会从前台进入后台，重新访问时，又从后台进入前台
5. 清缓存
   清除各类缓存，包含数据、文件、授权、网络、登录等各方面
6. 上传
   小程序开发完成后，需要上传到服务器进行测试，然后可获取测试报告，根据报告进行修改
7. 版本管理
   可以完成对小程序的版本管理
8. 详情
   查看小程序的基本信息和项目配置，也可以修改本地配置

四 云开发

小程序开发时的云环境，包含：
云函数，数据库，文件存储，数据分析

五 常用快捷键

image.png
image.png