Keyframer Inspector

Name: Keyframer Inspector
Author: keyframer.dev

本地服务

keyframer.dev开发工具51 周前更新

代码仓库访问官网

关于 Keyframer Inspector

Keyframer Inspector 是用于移动应用动画调试的 SDK 与桌面应用，面向开发者和编码 Agent。它记录动画、帧耗时和调用位置，可逐帧检查、调整参数并写回源码；桌面应用内置 MCP 服务。

主要功能

01录制并拖动检查动画轨迹
02显示动画调用位置与帧耗时
03实时调整时长、延迟和弹簧参数
04对比录制并查看性能问题
05将录制与问题提供给编码 Agent

适用场景

01定位移动应用动画的掉帧原因
02调整动画参数并回写源码
03让编码 Agent 对场景执行测量与复测

MCP 相关

桌面应用内置 MCP 服务，编码 Agent 可录制应用、运行场景、读取轨迹和问题，并获取截图。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "dev-keyframer-inspector": {
      "command": "npx",
      "args": [
        "-y",
        "@keyframerdev/inspector"
      ],
      "env": {
        "KEYFRAMER_VITALS_READ_KEY": "<KEYFRAMER_VITALS_READ_KEY>"
      }
    }
  }
}

启动命令npx -y @keyframerdev/inspector

需要配置的环境变量

KEYFRAMER_VITALS_READ_KEY密钥Optional: a Motion Vitals workspace read key (kfw_...) for field_problems and field_compare. Every other tool works without it.

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@keyframerdev/inspector0.4.0stdio

工具

收录的工具列表 · 更新于 6 天前

此工具无需参数。

详细介绍

Keyframer Inspector

应用的动效调试器。在设备上录制每个动画、启动它的代码行、它的开销，以及帧率下降的原因；像播放视频一样拖动时间轴。调整时长或弹簧参数，并将数值写回源代码。通过 MCP 将录制内容交给编码 Agent，或在 CI 中以此作为拉取请求的门禁。

https://github.com/user-attachments/assets/81d909d3-64fb-431b-a06f-1d20da5d5952

此仓库包含可集成到应用中的 SDK，涵盖所有平台，采用 MIT 许可证。

平台	文件夹	安装
React Native（Reanimated）	`react-native/`	`npm i -D @keyframerdev/inspector`
iOS（UIKit）	`ios/`	Swift Package Manager：`https://github.com/keyframer-dev/inspector`
Android（Views）	`android/`	`debugImplementation("dev.keyframer:keyframer-inspector:<version>")`
Flutter	`flutter/`	`flutter pub add keyframer_inspector`

各应用会连接到桌面应用 Keyframer Inspector（如下）。React Native 应用也可以使用 Expo 开发工具中的面板，无需桌面应用。

快速开始

React Native。 在开发环境中添加 Babel 插件（置于 react-native-worklets/plugin 之前），完成连接，然后在 Metro 中按 shift+m 并打开 @keyframerdev/inspector。npm README 中有详细说明，也包含纯 React Native 项目的说明；react-native/example 是一个已完成全部设置的 Expo 应用。

// babel.config.js (Expo)
plugins: process.env.NODE_ENV !== 'production' ? ['@keyframerdev/inspector/babel'] : []

// your root layout
if (__DEV__) require('@keyframerdev/inspector/devtools').connectDevTools({ app: 'MyApp' })

iOS。

import KeyframerInspector

#if DEBUG
KeyframerInspector.start()                              // simulator: ws://127.0.0.1:8790
KeyframerInspector.start(.init(host: "192.168.1.20"))   // a device: the Mac's LAN address
#endif

Android。

// Application.onCreate (debuggable builds only)
Keyframer.start(this)
ObjectAnimator.ofFloat(title, View.ALPHA, 0f, 1f).kfTrack("title").start()

Flutter。

void main() => runApp(const KeyframerInspector(app: 'My app', appPackage: 'my_app', child: MyApp()));

各文件夹中的 README 介绍了 API、报告的内容及其方式，以及相关测试。

桌面应用

适用于 macOS（Apple 芯片和 Intel）的 Keyframer Inspector 是所有 SDK 的连接端。请从 Releases 下载。它免费、经过签名和公证，并会自动更新。

所有平台，一处管理。 iOS、Android、Flutter 和 React Native 应用都可以通过 ws://<your Mac>:8790 连接：模拟器和仿真器可直接连接；同一网络中的设备可使用状态栏显示的地址连接。可同时连接多个应用，并通过切换器切换。
面板。 录制后拖动时间轴，即可查看应用画面如何跟随变化，回到当时的屏幕。轨道以片段形式显示每个动画；点击片段即可实时调整时长、延迟和弹簧参数，然后将数值应用到源代码。问题按造成的帧损失排序，并显示问题所在位置、正在运行的内容以及修复方法。可比较更改前后的两个会话。可在 Cursor、VS Code、Zed 或 Xcode 中打开任意步骤。
供编码 Agent 使用的 MCP 服务。 内置于应用中，只需在设置中切换开关，无需安装其他内容。Claude Code、Codex、Cursor、VS Code、Windsurf、Zed 和 Claude Desktop 可以录制应用、运行其场景、读取跟踪记录和问题，并截取屏幕截图。使用 check 和 recheck，Agent 可以执行修复循环：测量、修改代码、再次测量，直到问题消失且动效仍能正常运行。设置中会显示各客户端的配置方法；Claude Code 的配置如下：
```
claude mcp add --transport http keyframer-inspector http://127.0.0.1:8789/mcp
```
录制内容库。 来自面板、测试人员设备或分享链接的录制文件（.kfrec.json）都会存放在同一个文件夹中。双击即可打开录制文件；分享链接会在应用中打开。
位于菜单栏。 关闭窗口后，中继服务仍会继续运行。菜单会显示已连接的应用和 MCP 服务，并提供服务开关及登录时启动开关。
自动更新。 应用会在启动后及每六小时检查更新，在后台下载，并在重启或退出时安装。每次更新都经过签名，应用不会安装其他内容。
本地运行。 录制内容、中继服务和 MCP 服务都保留在你的 Mac 上。除非你创建分享链接，否则任何内容都不会离开本机。

协议

每个 SDK 都使用一种传输协议：protocol/inspector.ts：hello、应用公开的信号、包含调用位置的动画事件、帧、屏幕、录制内容，以及编辑器发回的内容（录制、拖动、覆盖项、场景）。新平台只需支持该协议。

问题与贡献

任何平台、桌面应用和 npm 包的问题都可以在此提交。本仓库从 Keyframer 自有仓库发布；欢迎提交拉取请求，待其在 Keyframer 仓库合并后，改动也会合并到这里。

许可证

本仓库中的所有内容均采用 MIT 许可证（见 LICENSE）。桌面应用免费但闭源。npm 包中，在你的应用里运行的部分采用 MIT 许可证（其源代码位于 react-native/）；工具（CLI、MCP 服务和面板）采用 Functional Source License，详见其 LICENSE.md。

支持 Markdown

登录后评论