# apollo-client-devtools 中文文档

规范地址：https://npmcn.com/package/apollo-client-devtools/

版本：4\.26\.5
npm 元数据更新时间：2026-11-03T01:02:16.418Z
中文译文更新时间：2026-11-03T03:36:44.831Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/apollo-client-devtools
原文对照：https://npmcn.com/package/apollo-client-devtools/?lang=original
项目主页：https://github.com/apollographql/apollo-client-devtools#readme
源码仓库：https://github.com/apollographql/apollo-client-devtools

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

- 包体积（解压后）：1.9 MB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2019-01-24T15:58:17.298Z
- 最新版本发布：2026-11-03T01:02:16.145Z
- 已发布版本数：151（近 12 个月 31 个）

## 中文简介

用于Apollo Client的开发人员工具，具有Studio Explorer集成、缓存检查和查询监视。

## 安装

```sh
npm install apollo-client-devtools
```

也可以使用：`pnpm add apollo-client-devtools`、`yarn add apollo-client-devtools`、`bun add apollo-client-devtools`

## README

[![Apollo Client](https://npmcn.com/package/apollo-client-devtools/assets/apollo-wordmark.svg)](https://www.apollographql.com/)

# Apollo客户端开发工具

[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/jdkknkkbebbapilgoeccciglkfbmbnfm.svg?label=chrome&logo=google-chrome&logoColor=white)](https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm) [![Addons.mozilla.org](https://img.shields.io/amo/v/apollo-developer-tools.svg?label=firefox&logo=firefox-browser&logoColor=white)](https://addons.mozilla.org/en-US/firefox/addon/apollo-developer-tools/) [![Build Status](https://circleci.com/gh/apollographql/apollo-client-devtools.svg?style=svg)](https://circleci.com/gh/apollographql/apollo-client-devtools)

此存储库包含用于Chrome和Firefox的Apollo Client Browser Devtools扩展。

| ☑️阿波罗客户端用户调查 |
| --- |
| 你最喜欢阿波罗客户的哪一点？需要改进的是什么？请用a来告诉我们 [一分钟的调查](https://docs.google.com/forms/d/e/1FAIpQLSczNDXfJne3ZUOXjk9Ursm9JYvhTh1_nFTDfdq3XBAFWCzplQ/viewform?usp=pp_url&entry.1170701325=Apollo+Client&entry.204965213=Readme)． 您的回答将帮助我们了解Apollo客户端的使用情况，并使我们能够更好地为您服务。 |

## 安装

### Chrome网页商店

Chrome用户可以通过访问 [Chrome网页商店](https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm).

Opera用户可以从Chrome Web Store使用 [下载Chrome扩展](https://addons.opera.com/extensions/details/app_id/kipjbhgniklcnglfaldilecjomjaddfi) Opera插件。

### 火狐

Firefox用户可以通过 [Firefox浏览器插件](https://addons.mozilla.org/firefox/addon/apollo-developer-tools/).

### 安装本地版本

如果您想安装本地版本的扩展，请跳到 [发展中](https://npmcn.com/package/apollo-client-devtools/#readme-Developing) 部分。

## 功能

Apollo Client Browser Devtools在你的web浏览器检查器中显示为“Apollo”选项卡，旁边还有其他选项卡，如“Elements”和“Console”。devtools目前有四个主要特性：

-   **浏览器:** Apollo Studio Explorer的内置版本，允许您直接使用应用程序的网络接口对GraphQL服务器进行查询（无需配置）。
-   **监视查询检查器：** 查看活动查询、变量、缓存结果，并重新运行单个查询。
-   **突变检查员:** 查看触发的突变、变量，并重新运行单个突变。
-   **缓存检查员:** 可视化Apollo Client缓存，并通过字段名和/或值对其进行搜索。

![Apollo Client Browser Devtools](https://npmcn.com/package/apollo-client-devtools/assets/devtools-screenshot.jpg)

## Apollo Client版本支持

> 如果您使用的是旧版本的阿波罗客户端，并且我们的客户端浏览器开发工具有问题，我们建议您升级到最新版本的阿波罗客户端。

-   我们为当前的小版本提供积极的支持 [阿波罗的客户](https://github.com/apollographql/apollo-client) 用于我们的客户端浏览器开发工具。
-   我们尽最大努力支持老年人 `3.x` 版本的 [阿波罗的客户](https://github.com/apollographql/apollo-client/releases) 用于我们的客户端浏览器开发工具。
-   我们不提供支持 `2.x` 版本的 [阿波罗的客户](https://github.com/apollographql/apollo-client/releases) 用于我们的客户端浏览器开发工具。

### 配置

当您的应用程序处于开发模式时，devtools将在web浏览器检查器中显示为“Apollo”选项卡。要在生产环境中为应用程序启用devtools，请通过 `connectToDevTools: true` 到应用程序中的ApolloClient构造函数。通过 `connectToDevTools: false` 如果想手动禁用此功能。

“Apollo”选项卡将出现在您的web浏览器检查器中 `window.__APOLLO_CLIENT__` 对象存在于应用程序中。Apollo Client自动将此钩子添加到窗口，除非 `process.env.NODE_ENV === 'production'`． 如果您想在生产环境中使用devtools，请手动将您的Apollo Client实例附加到 `window.__APOLLO_CLIENT__` 或通过 `connectToDevTools: true` 构造函数。

如果您看到“阿波罗”选项卡，但仍然有问题，请跳到 [调试](https://npmcn.com/package/apollo-client-devtools/#readme-Debugging) 部分。

## 发展中

### 构建扩展

在构建扩展之前，您应该安装依赖项：

```sh
# Install dependencies
> npm install

# (Optional) build the extension for local use
> npm run build -- --env TARGET=chrome
# or
> npm run build -- --env TARGET=firefox

# Or generate zipped distributables (already includes the above build step)
> npm run dist:chrome
# or
> npm run dist:firefox
```

### 运行示例应用程序

[阅读更多](https://github.com/apollographql/apollo-client-devtools/wiki/Running-the-sample-application).

### 开发与web-ext和WebExtWebpackPlugin

[阅读更多](https://github.com/apollographql/apollo-client-devtools/wiki/Development-with-web%E2%80%90ext-&-WebExtWebpackPlugin).

### 测试

我们使用 [开玩笑](https://jestjs.io/) 和 [React测试库](https://testing-library.com/docs/react-testing-library/intro) 来编写和运行我们的测试。

对两者进行测试 `src` 和 `development`，执行如下命令：

```bash
npm run test
```

你也可以用 `--watch` 自动观察并重新运行测试：

```bash
npm run test:watch
```

### 文件夹结构

[阅读更多](https://github.com/apollographql/apollo-client-devtools/wiki/Folder-structure).

### 调试

[阅读更多](https://github.com/apollographql/apollo-client-devtools/wiki/Debugging).

### 本地测试

[阅读更多](https://github.com/apollographql/apollo-client-devtools/wiki/Testing-locally).

## 行为准则

这个项目是由 [阿波罗行为准则](https://www.apollographql.com/docs/community/code-of-conduct/).

## 阿波罗是谁？

[阿波罗](https://apollographql.com/) 构建开源软件和图形平台，在应用程序和服务中统一GraphQL。我们通过以下方式帮助您更快地发货：

-   [阿波罗工作室](https://www.apollographql.com/studio/develop/) -一个免费的端到端平台，用于管理GraphQL生命周期。在托管注册中心中跟踪GraphQL模式，为图中的所有内容创建一个事实来源。Studio提供了一个IDE (Apollo Explorer)，因此您可以浏览数据、协作查询、观察使用情况并安全地进行模式更改。
-   [阿波罗联盟](https://www.apollographql.com/apollo-federation) -行业标准的开放架构，用于构建分布式图。使用Apollo的网关从多个子图组成一个统一的图，确定查询计划，并跨服务路由请求。
-   [阿波罗的客户](https://www.apollographql.com/apollo-client/) -最流行的GraphQL客户端。阿波罗也建造和维护 [阿波罗iOS](https://github.com/apollographql/apollo-ios) 和 [阿波罗芬兰湾的科特林](https://github.com/apollographql/apollo-kotlin).
-   [阿波罗服务器](https://www.apollographql.com/docs/apollo-server/) -一个生产就绪的JavaScript GraphQL服务器，可以连接到任何微服务、API或数据库。与所有流行的JavaScript框架兼容，可部署在无服务器环境中。

## 学习如何建造阿波罗

请查看 [奥德赛](https://odyssey.apollographql.com/) 学习平台，通过视频和交互式代码挑战开始您的GraphQL之旅的完美场所。加入 [阿波罗社区](https://community.apollographql.com/) 与GraphQL社区进行交互并获得技术帮助。

## 维护人员

| 名字 | 用户名 |
| --- | --- |
| 杰夫•奥列马 | [@bignimbus](https://github.com/bignimbus) |
| Jerel米勒 | [@jerelmiller](https://github.com/jerelmiller) |
| 楞次Weber-Tronic | [@phryneas](https://github.com/phryneas) |

## 常见问题

### apollo-client-devtools 是什么？

用于Apollo Client的开发人员工具，具有Studio Explorer集成、缓存检查和查询监视。

### 如何安装 apollo-client-devtools？

在项目目录运行 npm install apollo-client-devtools，或使用 pnpm add / yarn add / bun add。

### apollo-client-devtools 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/apollo-client-devtools 是否存在。

### apollo-client-devtools 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### apollo-client-devtools 可以商用吗？

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

### apollo-client-devtools 还在维护吗？

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