# @axonpack/expo-devtools 中文文档

规范地址：https://npmcn.com/package/%40axonpack/expo-devtools/

版本：3\.9\.0
npm 元数据更新时间：2026-11-04T12:26:15.884Z
中文译文更新时间：2026-11-07T19:16:51.829Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40axonpack/expo-devtools
原文对照：https://npmcn.com/package/%40axonpack/expo-devtools/?lang=original
项目主页：https://axonpack.dev/docs/expo-devtools/
源码仓库：https://github.com/axonpack/axonpack

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：5.9 MB，2034 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：expo \*，react \*，react-native \*，expo-clipboard \*，@axonpack/preview \*，react-native-webview \*，react-native-safe-area-context \*
- 首次发布：2026-08-05T16:40:50.824Z
- 最新版本发布：2026-11-04T12:26:15.371Z
- 近 30 天下载量：3015（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：40（近 12 个月 40 个）

## 中文简介

React 本地开发调试工具

## 安装

```sh
npm install @axonpack/expo-devtools
```

也可以使用：`pnpm add @axonpack/expo-devtools`、`yarn add @axonpack/expo-devtools`、`bun add @axonpack/expo-devtools`

## README

![Axonpack](https://raw.githubusercontent.com/axonpack/axonpack/main/packages/@axonpack/expo-devtools/docs/logo.png)

# @ axonpack/expo-devtools (英语)

**浏览器风格的 devtools , 生活在您的 React Introduct 或 Expo app 中 .**

为设备本身的11个标签按下浮动按钮: **网络** (每个请求,可重复, 以抽搐的方式, **控制台** (每个日志,加上答题的提示), **业绩** (框架费率, 记忆,应用程序被冻结的时刻, **存储** (所有你保存的钥匙), **查询**, (中文(简体) ), **导航**, (中文(简体) ), **复数**, (中文(简体) ), **预览**, (中文(简体) ), **崩溃**, (中文(简体) ), **国 际** 财务报告和审定财务报表 **调试**。没有桌面调试器,没有电缆,什么都没有 除非你打开它,否则被俘虏了.

**[文档](https://axonpack.dev/docs/expo-devtools)** • 妇女 [快开始](https://axonpack.dev/docs/expo-devtools/quick-start) • 妇女 [参考文献](https://axonpack.dev/docs/expo-devtools/reference) • 妇女 [升级](https://axonpack.dev/docs/expo-devtools/upgrading) • 妇女 [更改日志](https://axonpack.dev/docs/expo-devtools/changelog)

[![npm version](https://img.shields.io/npm/v/@axonpack/expo-devtools.svg)](https://www.npmjs.com/package/@axonpack/expo-devtools) [![npm downloads](https://img.shields.io/npm/dm/@axonpack/expo-devtools.svg)](https://www.npmjs.com/package/@axonpack/expo-devtools) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/axonpack/axonpack/blob/main/LICENSE)

<table><tbody><tr><td><img alt="Network tab listing captured requests" src="https://raw.githubusercontent.com/axonpack/axonpack/main/packages/@axonpack/expo-devtools/docs/screenshots/network-log.png" width="260" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td><img alt="Console tab listing captured logs" src="https://raw.githubusercontent.com/axonpack/axonpack/main/packages/@axonpack/expo-devtools/docs/screenshots/console-log.png" width="260" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td><td><img alt="Performance tab showing frame rate and memory charts" src="https://raw.githubusercontent.com/axonpack/axonpack/main/packages/@axonpack/expo-devtools/docs/screenshots/perf-statistics.png" width="260" loading="lazy" decoding="async" referrerpolicy="no-referrer"></td></tr><tr><td>每一次请求都包含在应用程序内浏览器流量中.</td><td>每个日志,都有可以打开和探索的物体.</td><td>帧率、内存和启动,在设备上测量.</td></tr></tbody></table>

## 安装

```sh
npx expo install @axonpack/expo-devtools react-native-safe-area-context react-native-webview expo-clipboard
```

这三个是同伴的依赖关系, 所以每个都决定了版本 您的博览会SDK飞船.

## 设置

把你的应用包在地上 这就是整个设置:没有配置插件,没有 `app.json` 更改,无 本地密码要写.

```tsx
import { DevtoolsProvider } from '@axonpack/expo-devtools';

export default function App() {
  return (
    <DevtoolsProvider config={{ enabled: __DEV__ }}>
      <YourApp />
    </DevtoolsProvider>
  );
}
```

`enabled` 这是唯一的大门。 没有补丁 没有记录 没有按钮 引出后,山体可以安全离开.

对于您计算机上的网络标签, 在 React Independent DevTools 中自己的标签中, 添加一行到 `metro.config.js`数字 :

```js
const { getDefaultConfig } = require('expo/metro-config');
const { withDevtools } = require('@axonpack/expo-devtools/metro');

module.exports = withDevtools(getDefaultConfig(__dirname));
```

有两件事需要多一点:一个内用浏览器拿走 `useDevtoolsWebView` 钩子,和 存储标签中不显示任何东西,直到您在 `config.storage.adapters`,因为 此软件包依赖于没有存储库且无法发现一个库 .

支持将devtools连接到其他软件包. 每个人有自己的入口点, `@axonpack/expo-devtools/support/<name>/v<major>`从没有主条目。 一旦你通过一个英寸 `supports`,它增加了一个标签,一个主题 `devtools` 命令行工具,和 a `useSupport()` 钩子 返回软件包的状态. `<major>` 是它支持的软件包的主要版本。 这个 首先是预览,用于 [`@axonpack/preview`](https://axonpack.dev/docs/preview) 0.x: (中文(简体) )

```tsx
import PreviewV0Support from '@axonpack/expo-devtools/support/preview/v0';

<DevtoolsProvider config={{ enabled: __DEV__, supports: [PreviewV0Support.configure(previewConfig)] }}>
```

其软件包没有安装,或者在另一个主要软件上,一个支持记录了该做什么并显示在它的 选项卡,从不崩溃应用程序。 见 [支助](https://axonpack.dev/docs/expo-devtools/supports)。 。 。 .

## 对于人工智能特工

人工智能代理,或者你,可以读取 从终端记录的devtools: 请求与他们的身体, 日志、崩溃、存储值和其他标签,过滤到它需要的行。 这也可以嘲笑 或屏蔽 URL,从应用程序内部发送请求,调用您交给控制台标签的函数 `>` 快速进入 `console.context`,并在预览支持下,切换、下载、更新或删除一个 预览.

```sh
npx devtools network --where state=error --since 10m
npx devtools context call store.dispatch '{"type":"cart/clear"}' --yes
```

它与任何软件包管理器合作, 需要节点22或更新 `expo start`,并保留所有编辑 你配置的, `console.redactKeys` 财务报告和审定财务报表 `console.redact` 对于它读取的内容 `context` 包含。 CLI 标签列出了每个查询和动作,以及它得到的回复. [与人工智能代理使用](https://axonpack.dev/docs/expo-devtools/ai-agents) 拥有每一个命令,和一个 将片段粘入您的 `AGENTS.md` 或者说 `CLAUDE.md`编辑 `axonpack` [代理技能](https://axonpack.dev/docs/agent-skills) 您的代理人是否从文档中学习了整个工具 : `npx skills add axonpack/skills`。 。 。 .

## 文档

其它东西都在文件网站上.

| 页次 | 上面写着什么 |
| --- | --- |
| [快开始](https://axonpack.dev/docs/expo-devtools/quick-start) | 设置 Expo 路由器或您自己的出入口, 以及启动器按钮 |
| [指南](https://axonpack.dev/docs/expo-devtools) | 每分页一个页,每分页结束于无法测量的内容和原因 |
| [与人工智能代理使用](https://axonpack.dev/docs/expo-devtools/ai-agents) | 从终端读取演示文稿, 并为您的代理阅读片段 |
| [应用程序浏览器](https://axonpack.dev/docs/expo-devtools/in-app-browsers) | 抓取一个 `<WebView />`请求和日志 |
| [反应原生 DevTools](https://axonpack.dev/docs/expo-devtools/react-native-devtools) | 您计算机上的网络标签, 有沙盒和代码片段 |
| [把它留在生产上](https://axonpack.dev/docs/expo-devtools/production) | 什麽 `enabled: false` 做,什么还在运行 |
| [参考文献](https://axonpack.dev/docs/expo-devtools/reference) | 每个控件,每个配置选项,每个导出类型 |
| [升级](https://axonpack.dev/docs/expo-devtools/upgrading) | 是什么从2.x移动到3.0的 |
| [更改日志](https://axonpack.dev/docs/expo-devtools/changelog) | 每一份出版的新闻稿,也载于 [`CHANGELOG.md`](https://npmcn.com/package/%40axonpack/expo-devtools/CHANGELOG.md) |

本包内同为参考船 [`REFERENCE.md`](https://npmcn.com/package/%40axonpack/expo-devtools/REFERENCE.md),用于阅读下线.

## 示例应用程序

`example/` 是一个可运行的 Expo 应用程序,每个标签有一个屏幕,每个按钮的墙壁产生真实 交通、木头、摊位和坠机 它作为工作配置双倍:自定义主题, a REPL 上下文,所有四个存储适配器都对应真实的 AsyncStorage, MMKV, SecureStore 和 a 记忆 `Map`,以及 `@axonpack/preview` 通过其支持设立.

```sh
cd example
bun run start   # Expo Go / dev client
bun run ios     # or: bun run android (full native build)
```

## 什么已经建成,什么不是

见 [特性列表](https://github.com/axonpack/axonpack/blob/main/packages/@axonpack/expo-devtools/notes/README.md) 对于已经建成的, 平台真正不能做的(为什么) 不假作假),而桌上还放着什么.

## 常见问题

### @axonpack/expo-devtools 是什么？

React 本地开发调试工具

### 如何安装 @axonpack/expo-devtools？

在项目目录运行 npm install @axonpack/expo-devtools，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：expo（\*）、react（\*）、react-native（\*）、expo-clipboard（\*）、react-native-webview（\*）、react-native-safe-area-context（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 devtools，可以用 npx devtools 直接运行。

### @axonpack/expo-devtools 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @axonpack/expo-devtools 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @axonpack/expo-devtools 可以商用吗？

@axonpack/expo-devtools 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @axonpack/expo-devtools 的下载量有多少？

根据 npm 官方下载统计，@axonpack/expo-devtools 在 2026/10/08 – 2026/11/06 这 30 天内被下载 3,015 次，日均约 101 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @axonpack/expo-devtools 还在维护吗？

最新版本 3\.9\.0 发布于 2026/11/04（3 天前）；至今共发布 40 个版本，其中过去 12 个月发布了 40 个；首次发布于 2026/08/06。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

