程序调试主要有三大功能区：模拟器、调试工具和小程序操作区

## 模拟器

模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

![emulat](https://res8.wxqcloud.qq.com.cn/wxdoc/7a7c4c65-3656-43fe-9824-7fc0aa0e8737.png)

开发者工具模拟器提供了一系列模拟操作

![模拟操作](https://res8.wxqcloud.qq.com.cn/wxdoc/a6121279-7fd3-4013-83e3-97d09dae4365.png)

## 自定义编译

点击工具栏中的编译按钮或者使用快捷键 Ctrl(⌘) + B，可以编译当前代码，并自动刷新模拟器。

同时为了帮助开发者调试从不同场景值进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览（如图）。

**注：编译条件跟项目相关，每个项目可以保存自己相关的编译条件**

![wxml](https://res8.wxqcloud.qq.com.cn/wxdoc/8fbacc6e-435e-43dc-a6eb-934723fe47cf.png)

### 编译异常信息

在预览或上传的过程中，可能会出现编译异常信息。

![](https://res8.wxqcloud.qq.com.cn/wxdoc/981669d2-909b-4987-a33c-edfdb2fbcf81.png)

忽略上传的文件：在项目文件夹下，某些文件可能不是小程序运行所需的，例如 readme 文档、`.gitignore` 文件等。为了优化大小，在预览和上传的过程中，这些文件将不会被打包。

体积过大的文件：如果勾选了 ES6 转 ES5 或代码压缩的选项，为了优化编译速度，对于某些体积很大的 JS 文件，工具会跳过对这些文件的处理。

## 自定义预处理

![projectsetting](https://res8.wxqcloud.qq.com.cn/wxdoc/ccb2b593-32e6-4086-acac-ebe73fa37eed.png)

在项目设置页卡，我们提供了以下几个默认的预处理，可以解决大部分的代码文件预处理的问题

1. 1.ES6 转 ES5（可以应用于编译、预览、上传），使用 "babel-core": "^6.26.0"
2. 1.上传代码时样式自动补全，使用 "postcss": "^6.0.1"
3. 1.上传代码时自动压缩，使用 "uglify-js": "3.0.27"

对于高级开发者来说，完全可以自己编写自动化构建脚本对代码文件进行预处理，所以我们提供了 `启用自定义处理命令` 选项
开发者可以指定 `编译前/预览前/上传前` 需要预处理的命令
开发者工具使用 shell 的方式运行指定的命令，并在控制台中输出命令的执行日志

预处理命令的执行顺序

1. 1.自定义预处理命令
2. 1.默认预处理命令
3. 1.编译/预览/上传

注：

1. 1.编译前预处理命令，需要手动点击 "编译" 按钮，或者使用快捷键编译才能触发。文件修改无法触发该命令。
2. 2.Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量，才能正常执行命令。

## 模拟操作

工具栏中前后台切换帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口，会触发一个小程序被设置为后台的回调。

![5](https://res8.wxqcloud.qq.com.cn/wxdoc/176a0586-c0a2-476d-89e9-792c4bcd0454.png)

## 调试工具

调试工具分为 7 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage、Sensor、Trace

### Wxml Panel

Wxml panel 用于帮助开发者开发 wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性，同时可以通过修改对应 wxss 属性，在模拟器中实时看到修改的情况（仅为实时预览，无法保存到文件）。通过调试模块左上角的选择器，还可以快速定位页面中组件对应的 wxml 代码。

![wxml](https://res8.wxqcloud.qq.com.cn/wxdoc/6f095975-7ca1-498f-b90c-d6eb5545d7fd.gif)

### Sources Panel

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

![sources](https://res8.wxqcloud.qq.com.cn/wxdoc/27b29b38-d2a7-4a6b-898a-ed95b229f1d0.png)

**注：当代码运行到断点的时候，整个小程序都停止了，所以模拟器会出现白屏或者无法操作的情况**

### AppData Panel

AppData panel 用于显示当前项目运行时小程序 AppData 具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

![appdata](https://res8.wxqcloud.qq.com.cn/wxdoc/73b788ee-dc3f-4942-bd3c-1c09b74dedbd.gif)

### Storage Panel

Storage panel 用于显示当前项目使用 [wx.setStorage](/miniprogram/dev/api/storage/wx.setStorage.md) 或者 [wx.setStorageSync](/miniprogram/dev/api/storage/wx.setStorageSync.md) 后的数据存储情况。

可以直接在 Storage panel 上对数据进行删除（按 delete 键）、新增、修改

![storage](https://res8.wxqcloud.qq.com.cn/wxdoc/97b04002-e242-4459-9506-d7fb0f560126.gif)

### Network Panel

Network Panel 用于观察和显示 request 和 socket 的请求情况

![network](https://res8.wxqcloud.qq.com.cn/wxdoc/68581f6f-971a-4feb-baae-448ef4404fb5.png)

**注：uploadFile 和 downloadFile 暂时不支持在 Network Panel 中查看**

### Console Panel

Console panel 有两大功能：

- •开发者可以在此输入和调试代码

  ![console](https://res8.wxqcloud.qq.com.cn/wxdoc/596ccfa7-c6af-4779-bfb0-c97453857496.gif)

- •小程序的错误输出，会显示在此处

  ![4](https://res8.wxqcloud.qq.com.cn/wxdoc/1f5e50b0-d5c5-4853-a16c-43aecf7fd9f2.png)

- •在控制台中可以输入以下命令

> build: 编译小程序
>
> preview: 预览
>
> upload: 上传代码
>
> openVendor: 打开基础库所在目录
>
> openToolsLog: 打开工具日志目录
>
> checkProxy(url): 检查指定 url 的代理使用情况

### Sensor Panel

Sensor panel 有两大功能：

- •开发者可以在这里选择模拟地理位置

  ![location](https://res8.wxqcloud.qq.com.cn/wxdoc/cd70d6ed-09a3-44fd-bf01-972abd6b14a2.gif)

- •开发可以在这里模拟移动设备表现，用于调试重力感应 API

  ![4](https://res8.wxqcloud.qq.com.cn/wxdoc/364aadb3-fd0e-409e-9053-203479a33d55.gif)

## 自动预览

自动预览可以实现编写小程序时快速预览，免去了每次查看小程序效果时都要扫码或者使用小程序助手的麻烦。只需按下快捷键，保持前台运行的微信即可自动唤出或刷新小程序。
对于 PC/Mac 微信无法使用扫码功能的，也可以通过自动预览进行调试。

要使用自动预览功能，需要配合 6.6.7 及以上的微信客户端版本。

  ![13](https://res8.wxqcloud.qq.com.cn/wxdoc/fa57cf36-cb94-41e0-8df3-e7b1090523d1.png)

要开始使用 "自动预览" 功能，可以在打开预览二维码的时候，点击 "自动预览" 标签以切换到自动预览模式。切换到自动预览模式后，只需按下预览快捷键，或者点击浮窗上的 "编译并预览" 按钮，即可触发自动预览。此时工具会上传代码，保持前台运行的微信客户端会自动刷新当前开发的小程序。

当自动预览成功时，工具栏上的预览图标会显示为一个绿勾。如果预览出错，则会显示为一个红色惊叹号，可以点击查看详情。

注意，自动预览功能仅限与登录开发者工具的同账号微信使用。如需换回普通预览模式，只需要点击 "扫描二维码预览" 标签即可。

用户可以在快捷键设置里自定义预览快捷键。默认为 cmd(ctrl) + shift + P