# 调试器
调试工具分为 6 大功能模块，分别是 Elements、Console、Sources、Network、Memory、Application
# Elements panel
Elements panel 的使用方式和 Chrome 调试器中的 Elements 区别不大，可用于帮助开发者开发 vue 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 html 属性，同时可以通过修改对应 html 属性，在模拟器中实时看到修改的情况（仅为实时预览，无法保存到文件）；通过调试模块左上角的选择器，还可以快速定位页面中组件对应的 html 代码。
# Console panel
Console panel 有两大功能：
- 开发者可以在此输入和调试代码
- 小程序的 console 和 error 输出，会显示在此处
# Sources panel
Sources panel 用于显示当前项目的脚本文件，同浏览器开发时显示的 Sources 面板基本没有区别。
注：当代码运行到断点的时候，整个小程序都停止了，会有明显的 debugger 提示
# Network panel
Network Panel 用于观察和显示 request 和 socket 的请求情况
# Application panel
Application 用于显示当前项目使用 bz.setStorage 或者 bz.setStorageSync 后的数据存储情况，开发者可以直接在 Application panel 上对数据进行删除（delete 键）、新增、修改。
# Mock Panel
为了让开发者更方便地开发小程序，开发者工具提供了 API Mock 的能力，可以模拟部分 API 的调用结果。
首先你需要在左侧面板上方勾选“启用 Mock”打开 Mock 功能，可以点击加号新增一条规则，点击减号删除一条规则，双击规则的名字可以编辑规则名称。
在右侧面板，你可以设置当前规则的 Mock 信息。
当 Mock 功能启用时，在模拟器中调用的 API 时会按照以下方式从上往下命中第一条规则：
- 规则启用
- API 接口名匹配
- 该规则下设置的所有的参数都能通过正则表达式
- 不填写规则会默认匹配
命中后，该 API 按照命中规则的模拟返回输出，否则不进入 Mock 的逻辑。
