抖音开放平台Logo
开发者文档
“/”唤起搜索
控制台
  • 开发者工具
  • 开发者工具概述
  • Lite 模式
  • 界面
  • 启动页
  • 菜单栏
  • 工具栏
  • 模拟器
  • 编辑器
  • 调试器
  • 设置
  • 代码编辑
  • 代码编译
  • 代码调试
  • 代码质量
  • 开发辅助
  • AI 功能
  • 下载
  • IDE 模拟器实现差异
  • 常见问题
  • 抖音云
  • 小程序项目通过编译之后,自动在模拟器中运行,模拟小程序在字节系 App 客户端的表现,无需真机即可快速预览。基础互动方式是通过鼠标点击、拖拽来模拟手指触摸、拖动操作。
    ​
    首次进入时,模拟器默认位于主界面左侧。

    模拟器顶部功能

      •机型:开发者可以选择不同的设备来调试小程序,以观察小程序在不同尺寸机型上的适配问题。
      •缩放比例:开发者可以控制模拟屏幕的显示比例。
      •屏幕高度:开发者可以切换分屏模式调试小程序直播场景。
      •网络连接:开发者可以切换网络来模拟不同网络场景。
      •抖音登录:开发者通过抖音扫码登录,在小程序拿到真实抖音用户信息。
      •智能选择:开启该开关后,可以在模拟器中选择元素,并在弹出的输入框中快速向 AI 提问以调整该元素。
      •模拟工具:模拟手机的部分操作,用以触发特定事件。常见的事件比如切后台、截屏、内存警告等。
      •独立窗口:开发者可以通过点击【独立窗口】按钮,将模拟器区域从开发者工具主窗口弹出,以独立窗口的形式展现。
      •布局切换:该功能可以将模拟器的位置与编辑器、调试器进行左右切换。
    ​

    设备皮肤

    在模拟器中,IDE 提供了常见设备皮肤(iOS/Android)供开发者直观调试小程序在不同机型上的效果,开发者可以通过模拟器顶部菜单栏上的设备列表进行切换。

    自定义设备

    除了固定的设备外,开发者可以选择不同的设备,也可以选择自定义设备,拖动模拟器来调试小程序在不同尺寸机型上的适配问题。
    ​

    抖音测试账号登录

    从 IDE 3.3.7 版本起,模拟器支持使用抖音扫码绑定测试账号。扫码绑定后,模拟器中依赖用户身份的开放能力,如tt.login,tt.getUserProfile,code2Session 等,将使用该抖音用户的信息,与抖音 App 表现相同。
    开放能力
    模拟器未登录
    模拟器登录抖音账号
    以开发者账号模拟登录,返回开发者账号的模拟 code
    以抖音账号登录,返回抖音账号的 code
    返回开发者账号的信息
    返回抖音账号的真实信息
    返回模拟的 openid
    返回抖音账号的真实 openid
    具体操作方法如下:
    点击头像区域触发登录二维码,使用抖音 App 扫码登录。
    登录后,头像区域展示抖音头像。
    登录后再次点击头像区域,可以退出登录。
    此外,在模拟器未登录的情况下,若用户使用抖音扫码登录 IDE,模拟器将自动绑定该抖音用户。此时用户如需更改模拟器绑定的抖音用户,可以手动退出登录后,重新使用其他抖音账号扫码绑定。

    智能选择

    开启该开关后,开发者可以在模拟器中自由选择元素,并可通过弹出的输入框快捷向 AI 提问来调整该元素。

    工具栏

    点击模拟器上方小工具图标,显示/隐藏更多模拟功能。
      •主页:切后台事件。
      •返回:返回上一页事件。
      •webview:当前页面有 web-view 组件时,点击按钮后打开当前 web-view 组件所加载页面的控制台。
      •截图:模拟手机截屏事件。
      •内存警告:模拟内存警告事件。
      •定位:模拟手机定位数据,支持地图选择地址经纬度和输入经纬度。
      •罗盘:模拟手机罗盘数据。
      •录屏:模拟手机录屏事件。
      •静音:模拟手机静音能力。
      •web 化:开启 Web 化预览模式
      •归因:模拟流量归因接口 tt.getAnalysisInfo 的成功回调参数
    ​

    主页

    当模拟按下主页键时,小程序将退回后台并展示场景值页面。用于设置场景值和测试生命周期函数 onShow 与 onHide,可查看小程序启动流程。
    ​

    返回

    快速返回到上一页。
    ​

    Webview

    用于调试当前页面为 web-view 标签内嵌的 HTML5 页面。点击 Webview 按钮,会打开当前 web-view 的调试工具。
    说明:此功能仅在 web-view 页面可用,其他页面下置灰无法点击。
    ​

    截图

    模拟用户截屏情况,用于测试 tt.onUserCaptureScreen 截屏事件监听 API。
    ​

    内存警告

    模拟内存不足情况,用于测试 tt.onMemoryWarning 内存警告 API。
    ​

    定位

    通过地图或者输入框设置经纬度模拟信息,该功能用于测试 tt.getLocation 获取用户位置。
    模拟器工具栏「定位」功能使用了高德地图 SDK。
    ​

    罗盘

    当用户手机罗盘发生变化时,用于测试 tt.onCompassChange 罗盘数据监听 API。
    ​

    录屏

    模拟用户录屏情况,用于测试 tt.onUserScreenRecord 用户主动录屏监听 API。
    ​

    静音

    模拟手机静音,用于开发音视频静音测试,支持缓存效果。
    ​

    归因

    模拟小程序流量归因接口 tt.getAnalysisInfo 的成功回调参数
    ​

    旋转

    当选择的设备为“iPad”系列时,可以点击工具栏中的“旋转“按钮查看横竖屏下的显示效果。大屏适配介绍参考小程序大屏适配指南。
    注意,该功能要求设备为 iPad 且 基础库版本大于 3.37.0.0
    ​

    独立窗口

    有不少开发者基于小程序三方框架接入,需要结合自己偏好的编辑器开发,只用开发者工具看效果和调试,因此模拟器支持作为独立窗口弹出。在模拟器右上角单击按钮,可以使用独立窗口显示模拟器或调试器。
    ​

    布局切换

    首次打开工程,模拟器默认位于主界面左侧,当点击“布局切换”按钮,模拟器将切换布局,展示在右侧。
    模拟器布局与工程绑定并缓存到本地。当下次进入时,模拟器会展示在上次设置的布局位置。
    ​

    模拟器底部功能

    模拟器底部存在四个功能,分别是「页面参数」、「启动路径」、「场景值」、「骨架屏」。
      •页面参数:显示当前页面路径。点击打开,可直接打开当前页面 js 文件;点击复制可快速复制路径至剪贴板;点击右键则展示目录下文件后缀,点击即可打开对应文件。
      •启动路径:显示当前页面收到的参数。点击复制可快速复制参数至剪贴板。
      •场景值:显示当前编译模式设置的场景值。点击复制可快速复制参数至剪贴板。
      •骨架屏:显示当前页面配置的骨架屏路径。详情可以参考骨架屏。