模拟器 | 微信开放文档

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

# 模拟器

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

emulat

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

模拟操作

# 自定义编译

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

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

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

wxml

# 编译异常信息

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

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

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

# 自定义预处理

projectsetting

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

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

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

预处理命令的执行顺序

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

注：

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

# 模拟操作

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

# 调试工具

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

# Wxml panel

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

wxml

# Sources panel

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

sources