程序调试主要有三大功能区：模拟器、调试工具和小程序操作区 ## 模拟器 模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。 ![emulat](https://res8.wxqcloud.qq.com.cn/wxdoc/9cac5bae-48a0-4dbd-96cc-0638d2517b58.png) ## 自定义编译 点击工具栏中的编译按钮或者使用快捷键 Ctrl(⌘) + B，可以编译当前代码，并自动刷新模拟器。 同时为了帮助开发者调试从不同场景值进入具体的页面，开发者可以添加或选择已有的自定义编译条件进行编译和代码预览（如图）。 **注：编译条件跟项目相关，每个项目可以保存自己相关的编译条件** ![wxml](https://res8.wxqcloud.qq.com.cn/wxdoc/32d60119-b9d6-42f2-b436-062f70f620c2.png) ### 编译异常信息 在预览或上传的过程中，可能会出现编译异常信息。 ![](https://res8.wxqcloud.qq.com.cn/wxdoc/ee918250-5755-4c44-8b7b-f8c107dee4a1.png) 忽略上传的文件：在项目文件夹下，某些文件可能不是小程序运行所需的，例如 readme 文档、`.gitignore` 文件等。为了优化大小，在预览和上传的过程中，这些文件将不会被打包。 体积过大的文件：如果勾选了 ES6 转 ES5 或代码压缩的选项，为了优化编译速度，对于某些体积很大的 JS 文件，工具会跳过对这些文件的处理。 ## 自定义预处理 ![projectsetting](https://res8.wxqcloud.qq.com.cn/wxdoc/f2142d41-3d59-4a3a-a4c6-61b8fc9ca3af.png) 在项目设置页卡，我们提供了以下几个默认的预处理，可以解决大部分的代码文件预处理的问题 1. ES6 转 ES5（可以应用于编译、预览、上传），使用 "babel-core": "^6.26.0" 1. 上传代码时样式自动补全，使用 "postcss": "^6.0.1" 1. 上传代码时自动压缩，使用 "uglify-js": "3.0.27" 对于高级开发者来说，完全可以自己编写自动化构建脚本对代码文件进行预处理，所以我们提供了 `启用自定义处理命令` 选项 开发者可以指定 `编译前/预览前/上传前` 需要预处理的命令 开发者工具使用 shell 的方式运行指定的命令，并在控制台中输出命令的执行日志 预处理命令的执行顺序 1. 自定义预处理命令 1. 默认预处理命令 1. 编译/预览/上传 注： 1. 编译前预处理命令，需要手动点击 "编译" 按钮，或者使用快捷键编译才能触发。文件修改无法触发该命令。 2. Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量，才能正常执行命令。 ## 前后台切换 工具栏中前后台切换帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口，会触发一个小程序被设置为后台的回调。 ![5](https://res8.wxqcloud.qq.com.cn/wxdoc/4580e88f-f5bc-48b8-a792-dfa64dc678ff.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/ea1803ad-316c-4771-b8c6-34b3e6840f1b.gif) ### Sources panel Sources panel 用于显示当前项目的脚本文件，同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。 ![sources](https://res8.wxqcloud.qq.com.cn/wxdoc/1ab14c43-b5bf-4a8f-8f7d-b178693e20a0.png) **注：当代码运行到断点的时候，整个小程序都停止了，所以模拟器会出现白屏或者无法操作的情况** ### AppData panel AppData panel 用于显示当前项目运行时小程序 AppData 具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。 ![appdata](https://res8.wxqcloud.qq.com.cn/wxdoc/401114fb-500f-4d2a-914d-d48a54d8c654.gif) ### Storage panel Storage panel 用于显示当前项目使用 [wx.setStorage](/minigame/dev/api/storage/wx.setStorage.md) 或者 [wx.setStorageSync](/minigame/dev/api/storage/wx.setStorageSync.md) 后的数据存储情况。 可以直接在 Storage panel 上对数据进行删除（按 delete 键）、新增、修改 ![storage](https://res8.wxqcloud.qq.com.cn/wxdoc/01050adf-6cff-4961-a066-01b06f8e9519.gif) ### Network panel Network Panel 用于观察和显示 request 和 socket 的请求情况 ![network](https://res8.wxqcloud.qq.com.cn/wxdoc/0bc94a9f-227c-4ace-b0d3-5e16373d5889.png) **注：uploadFile 和 downloadFile 暂时不支持在 Network Panel 中查看** ### Console panel Console panel 有两大功能： - 开发者可以在此输入和调试代码 ![console](https://res8.wxqcloud.qq.com.cn/wxdoc/0580164d-b3ca-4f68-a890-44b2be2c3ebf.gif) - 小程序的错误输出，会显示在此处 ![4](https://res8.wxqcloud.qq.com.cn/wxdoc/8843095d-cf9e-41fe-a3c9-60b1dc0227c3.png) - 在控制台中可以输入以下命令 > build: 编译小程序 > > preview: 预览 > > upload: 上传代码 > > openVendor: 打开基础库所在目录 > > openToolsLog: 打开工具日志目录 > > checkProxy(url): 检查指定 url 的代理使用情况 ### Sensor panel Sensor panel 有两大功能： - 开发者可以在这里选择模拟地理位置 ![location](https://res8.wxqcloud.qq.com.cn/wxdoc/4b4cf48d-e20a-4ad0-98e6-660d5aa1f2df.gif) - 开发可以在这里模拟移动设备表现，用于调试重力感应 API ![4](https://res8.wxqcloud.qq.com.cn/wxdoc/105fc472-a621-4d3a-be9b-21e30c4e5fab.gif) ## 自动预览 自动预览可以实现编写小程序时快速预览，免去了每次查看小程序效果时都要扫码或者使用小程序助手的麻烦。只需按下快捷键，保持前台运行的微信即可自动唤出或刷新小程序。 要使用自动预览功能，需要配合 6.6.7 及以上的微信客户端版本。 ![13](https://res8.wxqcloud.qq.com.cn/wxdoc/60b9581d-9650-4455-b231-192c7cb8b2ab.png) 要开始使用 “自动预览” 功能，可以在打开预览二维码的时候，点击 “自动预览” 标签以切换到自动预览模式。切换到自动预览模式后，只需按下预览快捷键，或者点击浮窗上的 “编译并预览” 按钮，即可触发自动预览。此时工具会上传代码，保持前台运行的微信客户端会自动刷新当前开发的小程序。 当自动预览成功时，工具栏上的预览图标会显示为一个绿勾。如果预览出错，则会显示为一个红色惊叹号，可以点击查看详情。 注意，自动预览功能仅限与登录开发者工具的同账号微信使用。如需换回普通预览模式，只需要点击 “扫描二维码预览” 标签即可。 用户可以在快捷键设置里自定义预览快捷键。 ![13](https://res8.wxqcloud.qq.com.cn/wxdoc/04b11e2b-5efa-4278-8cc4-a0f7f9d12364.png)