# GraphQL 调试

> 在 Proxyman 中调试 GraphQL 请求：按 GraphQL Query Name 匹配规则、美化查询、显示 Query Name 列，并通过脚本模拟（Mock）响应。

## 1. 在 GraphQL 请求上使用调试工具 {#1-use-debugging-tools-with-graphql-requests}

从 Proxyman 2.27.0 开始，你可以通过指定 GraphQL Query Name，在 GraphQL 请求上使用调试工具。

按 GraphQL QueryName 匹配适用于 Breakpoint、Map Local、Map Remote、Block List、Allow List 和 Scripting 工具。

### 使用方法 {#how-to-use}

1. 打开调试工具（例如 Breakpoint）
2. 创建新规则
3. 点击 **Use Wildcard** 下拉菜单 -> **Advanced** -> 勾选 **GraphQL QueryName**
4. 输入 GraphQL QueryName

调试工具会先匹配原有的匹配规则，然后再匹配 GraphQL QueryName。

![Proxyman Breakpoint 规则编辑器，已勾选 Use Wildcard > Advanced > GraphQL QueryName](https://proxyman.com/docs/assets/Screen_Shot_2021-05-26_at_15_46_13.png)

> **备注:** 从 build 3.0.0 开始，创建调试工具规则时，Proxyman 会自动填写 GraphQL Query Name。

## 2. GraphQL 查询美化 {#2-graphql-prettier}

从 Proxyman 2.33.0 开始，Proxyman 可以美化（格式化）GraphQL 查询。如需开启，请打开 **Tools** 菜单 -> **Custom Previewer Tab…**，然后勾选 **GraphQL** 复选框。

![Proxyman Request 面板中的 GraphQL 标签页，显示美化后的 GetUser 查询及其 GraphQL 变量](https://proxyman.com/docs/assets/proxyman-graphql-query-prettier.jpg)

_美化后的 GraphQL 查询_

## 3. 在主表格视图中显示 GraphQL Query Name {#3-show-graphql-query-name-on-the-main-table-view}

Proxyman 可以提取并显示每个 GraphQL 请求的 Query Name。在列标题上右键点击，然后启用 **Query Name** 列。

![Proxyman 主表格，包含 Query Name 列，显示 GetUser、ListPosts 和 CreatePost，旁边是 Comment 列](https://proxyman.com/docs/assets/proxyman-graphql-query-name-column.jpg)

_Query Name 列_

- [自定义标头列（Custom Header Column）](https://proxyman.com/docs/zh-cn/basic-features/custom-header-column)

## 4. 调试 GraphQL 请求（旧版 - Proxyman 2.26.0 及更早版本） {#4-debug-graphql-requests-legacy---proxyman-2260-and-below}

GraphQL 对不同的查询使用同一个 URL，因此基于 URL 的调试工具（例如 Map Local、Breakpoint、Map Remote）在这种情况下效果不佳。

不过，借助 Scripting 工具，你可以：

* 根据 QueryName 映射本地响应
* 修改 GraphQL 请求和响应的查询、Body 和 Header

### 使用 Scripting 工具进行 Map Local {#map-local-with-the-scripting-tool}

你可以使用 Scripting 工具将本地文件映射为响应：

1. 打开 Proxyman
2. 在 GraphQL 域名上启用 Enable SSL Proxying
3. 确保能看到来自该域名的 HTTPS 请求
4. 右键点击该请求 -> **Tools** -> **Scripting…**，为其 URL 创建脚本
5. 导入本地文件：点击 **More** 按钮 -> **Import JSON or Other File...** -> 选择你的文件
6. 以下脚本会将本地文件设置为 QueryName="user" 的 GraphQL 请求的响应

```javascript
// Import file from More Button -> Import JSON or Other files 
const file = require("@users/B02D96D5.default_message_32E64A5B.json");

function onRequest(context, url, request) {

  // 1. Extract the queryName from the request
  var queryName = request.body.query.match(/\S+/gi)[1].split('(').shift();
  
  // Or extract the operationName
  var operationName = request.body.operationName
  
  // 2. Save to sharedState
  sharedState.queryName = queryName
  sharedState.operationName = operationName
  
  // Done
  return request;
}

function onResponse(context, url, request, response) {

  // 3. Check if it's the request we need to map
  if (sharedState.queryName == "user") {
    
    // 4. Import the local file by Action Button -> Import
    // Get the local JSON file and set it as a body (like Map Local)
    response.headers["Content-Type"] = "application/json";
    response.body = file;
  }

  // Done
  return response;
}
```

### 修改 Header、Query、Body {#manipulate-headers-query-body}

1. 使用相同的代码，并修改 queryName
2. 使用[代码片段](https://proxyman.com/docs/zh-cn/scripting/snippet-code#2-common-on-request-and-response)修改对应的值

## 了解更多 {#learn-more}

* [如何为 GraphQL 请求映射本地响应](https://proxyman.com/posts/2021-01-24-How-To-Map_Response_For_GraphQL_Requests)
* [在 Proxyman 中显示 GraphQL 请求的 Query Name](https://proxyman.com/posts/2021-03-28-Display-QueryName-From_GraphQL-Request)
* [使用 Breakpoint 工具修改 GraphQL 请求](https://proxyman.com/posts/2023-03-16-GraphQL-Request-With-Breakpoint)