抖音开放平台Logo
控制台

IDE 调试
收藏
我的收藏

​简介​

​IDE 本地支持多种调试能力，包括模拟器模拟操作，调试器工具调试等。​
​

​模拟器调试​

模拟器是模拟字节小程序在抖音 APP 真实的逻辑表现和运行环境。绝大部分的 API 在模拟器上的表现与和客户端一致。模拟器支持机型、缩放比例、网络等模拟，同时也支持与小程序能力相关的功能模拟，比如定位、罗盘等。​
​​
​更多内容可以参考模拟器。​
​

​调试器调试​

配合模拟器，IDE 提供了定制化的调试器，在其基础上提供更多扩展。默认展示如下图所示。​
​

​Elements Panel​

​Elements Panel 用于帮助开发者查看真实的页面结构以及对应的 css 属性，同时可以通过修改对应 css 属性，在模拟器中实时看到修改的情况（仅为实时预览，无法保存到文件）。​
​

​Component Data​

​Elements Panel 除了基本的元素展示，还支持自定义组件数据展示。​

​Console Panel​

​开发者可以在此输入和调试代码，程序中的 console 信息也会在 Console Panel 中提示。​
​

​Sources Panel​

​Sources Panel 面板用于查看、断点调试项目源码。整个面板分为资源列表、代码编辑区域、调试区域三个部分。​

​断点调试​

​在 Source 面板中可以设置断点，对小程序进行断点调试。​
​​
​Sources 面板用于显示当前项目的脚本文件。字节小程序框架会对脚本文件进行编译的处理，所以开发者在 Sources 面板中看到的文件是经过处理之后的脚本文件。实际上开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。​
​注意，当代码运行到断点的时候，整个小程序进入停止状态，此时模拟器会出现白屏或者无法操作的情况。​
​

​Network Panel​

​Network Panel 中展示了 request 和 socket 的请求情况。​
​

​AppData Panel​

​AppData 面板用于显示当前小程序项目运行时，最上层页面中 Data 具体数据（在 Page 定义时的 data 对象）。Data 数据调试可以在此处修改数据，并及时地反馈到页面 TTML 上。​
开发者工具 3.3.5 版本起，支持对双端的真机调试也使用 AppData 面板进行 Data 数据调试。​
​

​Storage Panel​

​Storage Panel 用于显示当前项目使用 tt.setStorage 或者 tt.setStorageSync 后的数据存储情况。可以直接在 Storage Panel 上对数据进行新增、删除（按 delete 键或通过右键菜单）、修改等行为。​
修改后的数据将直接影响 tt.getStorage 或者 tt.getStorageSync 的回调运行结果。​
​

​Mock Panel​

​Mock 面板用于拦截字节小程序 API 并提前返回用户自定义的数据。​
    •​目前支持模拟 tt.request、tt.downloadFile、tt.checkSession和tt.getLocation四个 API。​
​更多使用可参考 - Mock。​
​

​Trace Panel​

​Trace Panel 中使用该功能分析小程序启动过程中的主要耗时。​
​更多使用可参考 - Trace。​
​

​Sensors Panel​

​Sensors Panel 主要是用于模拟加速度和陀螺仪数据。该面板目前支持模拟 tt.onAccelerometerChange 和 tt.onGyroscopeChange。​
​
​