GraphQL developer tools

在开发者工具的 GraphQL 面板中查看页面发送的每项操作及其变量、响应、错误和标头。 GraphQL developer tools 在 Chrome 开发者工具中添加一个 GraphQL 标签页，相当于将网络面板限定为 GraphQL，并显示你实际需要查看的内容。 每项操作占一行：显示操作名称（匿名查询则显示第一个字段）、类型（query / mutation / subscription / persisted）、HTTP 状态及 GraphQL 错误数量、大小、耗时和 URL。失败的行（HTTP 错误或响应中包含“errors”数组）显示为红色。点击列标题即可排序；计数器汇总当前显示的行。 选择一行即可查看： • Query：带语法着色的文档；如果客户端发送的是压缩内容，会进行格式化（“as sent”显示原始内容），变量和扩展信息直接显示在下方。如果持久化查询的文档曾出现在相同哈希值的另一个请求中（Apollo 的 APQ 重试），则会显示该文档。 • Response：格式化的 JSON，错误消息显示在顶部。 • Headers：URL、方法、状态、计时阶段、Server-Timing、大小、请求和响应标头，以及“Copy as cURL”。 Resend 会从页面重新发送相同请求，包含其 Cookie 和标头，响应会作为新行出现；Edit & resend 可先修改文档或变量（mutation 会要求确认两次）。每个区块都有复制按钮。查询和 JSON 支持折叠：每个多行括号旁都有一个三角形，折叠后会显示隐藏的键或项目数量，− / + 可折叠或展开整个视图。 可按操作名称、URL、变量中的值或操作类型筛选，也可只显示错误；Group 将重复操作折叠成一行，显示次数、错误、总大小和平均耗时，是发现 N+1 问题的快捷方式；支持 Clear 清除记录，以及在页面导航后通过 Preserve log 保留日志。方向键可移动选中项，Cmd/Ctrl+F 可聚焦筛选框。打开开发者工具后记录的请求会在面板显示时立即出现。浅色和深色外观随开发者工具主题切换。 识别的请求形式包括：包含“query”的 JSON 请求体（不论 Content-Type 是什么）、批量请求（JSON 数组，每项操作一行）、查询位于 URL 中的 GET 请求、application/graphql、表单编码和 multipart 上传（“operations”字段），以及持久化查询，包括 Apollo 的 extensions.persistedQuery.sha256Hash、Relay 文档 ID、Instagram / Facebook 的 doc_id 和 query_hash、GitHub 和 X 自有的格式，均按操作名称列出。 隐私：面板仅在开发者工具打开时通过其网络 API 读取请求，并在开发者工具窗口中显示。它唯一会触发的请求是你通过 Resend 要求发送的请求，由页面自身发出。扩展程序本身不发出网络请求，不收集任何信息，没有分析、遥测或账号，也不请求任何权限。隐私政策：https://github.com/s12v/graphql-devtools/blob/master/PRIVACY.md 开源（MIT）：https://github.com/s12v/graphql-devtools — 无依赖、无需构建，大小为 34 KB。发布页面提供 Firefox 版本。 版本 1.3：分组显示重复操作；Resend 和 Edit & resend。 版本 1.2：格式化查询；持久化查询从 APQ 重试中获取文档；排序、类型筛选、错误筛选和汇总；计时阶段和 Server-Timing；GitHub 和 X 请求格式。 版本 1.1：查询、变量和响应视图中的折叠功能；Firefox 版本。 版本 1.0：针对 Manifest V3 重写。批量请求、GET、multipart 和持久化查询；表格中的操作名称和错误数量；深色主题；筛选、Clear 和 Preserve log；复制按钮；Copy as cURL。