抖音开放平台Logo
开发者文档
小程序
控制台
  • 开发者工具
  • 开发者工具概述
  • Lite 模式
  • 界面
  • 设置
  • 代码编辑
  • 代码编译
  • 代码调试
  • IDE 调试
  • 真机调试
  • 小程序源码调试
  • IDE API Mock 功能
  • vConsole
  • Web 化调试
  • 抖音云本地调试
  • 代码质量
  • 开发辅助
  • 下载
  • 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。
    ​
    ​