GraphQL 是现在非常流行的一种 API 查询语言。作为一名前端工程师，在开发过程中不可避免地需要与 GraphQL 打交道。当你需要快速调试 GraphQL 查询时，一款好用的 GraphQL 查询调试工具是必不可少的。
GraphiQL
GraphiQL 是官方推荐的 GraphQL 查询调试工具。它提供了直接在浏览器中测试和交互的界面，让你更轻松地去理解和调试 GraphQL 请求，而且非常容易上手。
GraphiQL 中有三个主要的面板，用来管理查询、控制查询操作和显示结果。其中第一个面板是查询编辑器，它允许你编写和测试 GraphQL 查询。另外两个面板，一是查询变量编辑器，可以针对你的查询设置变量，二是查询结果面板，可以查看查询返回的结果。
下面是一个简单的 GraphQL 查询示例：
query {
user(id: 1) {
id
name
email
}
}当你使用 GraphiQL 工具时，将此查询粘贴到左侧编辑器中，然后按下运行按钮即可发送此查询。
GraphiQL 还提供了代码自动完成功能，可以帮你快速编写正确的 GraphQL 查询。另外，你还可以在查询编辑器设置断点，以便知道每个查询步骤例如类型结构、数据类型匹配等问题。
GraphQL Playground
GraphQL Playground 是一款 GraphQL 操作界面和开发助手的可视化调试工具，它的功能非常强大。与 GraphiQL 不同，GraphQL Playground 除了支持查询和变量设置之外，还为你的开发工作提供了更完整的环境。
这个工具不仅可以调试查询，还可以轻松地调试任何类型的请求、扫描 GraphQL API 和任何类型的 GraphQL 端点。GraphQL Playground 还支持 HTTP 头部设置、设置端点、设置别名、设置多个变量等其他特性，而它的界面友好度也更好，让你在开发时更容易理解你的查询。
下面是一个使用 GraphQL Playground 的示例：
GraphQL Playground 的代码自动完成功能也非常出色，它支持你编写多行查询、变量和其他内容，并具有自动注释和类型提示。
使用 VSCode 的 GraphQL 插件
如果你使用 VSCode 编辑器，那么安装一个 GraphQL 插件也是很棒的选择。GraphQL 插件可以帮助你优化 GraphQL 开发流程，包括语法检查、查询定义、文档化等等。
安装好插件后，你就可以通过通过 VSCode GraphQL 结合查询直接使用 GraphiQL 或者 GraphQL Playground，这个过程非常方便，并且能够学习 GraphQL 开发的更多知识。
总结
GraphQL 工具可谓是前端开发者的又一个得力助手，对查询调试等方面的支持大大提升了我们的开发效率。在开发过程中，使用优秀的 GraphQL 查询调试工具是必不可少的，尝试不同的工具能够帮助你更好地掌握 GraphQL 开发。
不管是使用 GraphiQL 或 GraphQL Playground 还是在 VSCode 中使用 GraphQL 插件，始终要想到一点：你使用的 GraphQL 工具越得心应手，开发起来就越快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64560cd0968c7c53b0955ff4