全新的面板，专为 GraphQL 打造

Chrome DevTools 中的全新标签页，呈现你所需的信息，沿用你熟悉的界面。

添加到 Chrome 查看功能

为什么

你的所有请求都发往同一个端点

以前你只能看到一长串状态为 200 的 POST /graphql 请求。GraphQL Network 则直接呈现你真正关心的信息。

Chrome 网络面板

名称状态类型

graphql200fetch

第三个请求中的错误，只有打开它的响应才能看到。

GraphQL Network

名称状态类型

Gods成功query

CreateGod成功mutation

GetUser1 个错误query

GetEvents成功query

GodAction成功subscription

操作名称、类型和错误，一目了然。

载荷

查询、变量和文件，尽在一个视图

载荷标签页将操作与其变量和附件文件分开展示，并提供 GraphQL 语法高亮。

查询

1  mutation UploadFavicon($file: File!) {
2    uploadFavicon(file: $file) {
3      name
4      size
5      __typename
6    }
7  }

变量查看源码

file: null

文件

1favicon.ico· image/x-icon

耗时

分析每一毫秒

分解视图将请求的每个阶段分开显示。如果等待时间占主导，问题就出在 resolver 上。

CreateGodmutation · 184.6 ms

排队1.2 ms

初始连接6.8 ms

SSL12.4 ms

请求已发送0.6 ms

等待服务器响应148.2 ms

内容下载15.4 ms

实时

基于 WebSocket 和 SSE 的订阅

每条发送和接收的消息都会按顺序显示，并附带时间和大小。只要订阅处于活动状态，连接就会保持打开。

GodAction · subscription · ws已打开

{"type":"connection_init","payload":{}}12:04:0139 B

{"type":"connection_ack"}12:04:0125 B

{"id":"1","type":"subscribe","payload":{"query":"subscription GodAction…"}}12:04:01212 B

{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Hermes"}}}}12:04:09148 B

{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Athena"}}}}12:04:15148 B

{"id":"1","type":"next","payload":{"data":{"godAction":{"god":"Zeus"}}}}12:04:22146 B

界面

无需学习新工具

界面与 Chrome DevTools 保持一致：筛选器、瀑布图、详情面板和标签页都在原来的位置。打开 DevTools 就能开始调试。

已上架 Chrome 应用商店

减少使用 GraphQL 的摩擦，开始使用让工作更轻松的工具。

前往 Chrome 应用商店