# 自定义预览标签页（Custom Previewer Tab）

> 添加 Proxyman 自定义预览标签页（Custom Previewer Tab），将请求或响应正文显示为 JSON、Protobuf、HTML 或 MessagePack，或添加 Connection Log 标签页。

## 1. 这是什么？ {#1-whats-it}

自定义预览标签页可以在 Request 和 Response 面板中添加额外的标签页。每个标签页始终以同一种格式渲染内容。

这个实用工具适用于以下场景：

* 将正文格式化为 **JSON**，但 Content-Type 不是 `application/json`
* 将正文格式化为 **Protobuf**，但 Content-Type 不是 `application/x-protobuf`
* 在 Web View 中渲染 HTML 页面
* **美化**压缩过的文件（HTML、CSS、JS）
* Multipart/form-data 格式的正文
* 无论 `Content-Type` 如何，都尝试按所选类型格式化正文
* 将 MessagePack（msgpack）转换为 JSON
* [代码生成器](https://proxyman.com/docs/zh-cn/advanced-features/code-generator)，可生成 Swift、Node、JavaScript、cURL 等代码
* GraphQL 查询格式化（Prettier）
* [Connection Log](https://proxyman.com/docs/zh-cn/basic-features/connection-log)，用于查看 DNS、TCP、TLS 和 HTTP 详情

![Proxyman 自定义正文预览标签页窗口，勾选了 Request 和 Response 复选框，已勾选 Connection Log，并显示 Add Custom Tabs](https://proxyman.com/docs/assets/proxyman-custom-previewer-tab-window.jpg)

_为 Request / Response 面板选择自定义标签页_

> **备注:** 所选的自定义标签页会添加到 Request 或 Response 视图的右侧 

## 2. 如何使用？ {#2-how-to-use-it}

打开自定义预览标签页窗口的方法：

1. 点击 Request/Response 标签栏上的 "+" 按钮，或前往 **Tools** → **Custom Previewer Tab…**
2. 勾选或取消勾选复选框，以显示或隐藏自定义标签页
3. 新标签页会出现在 Request 或 Response 面板中 ✅

### 2.1 Server-Sent Events 与 OpenAI 标签页 {#21-server-sent-events-and-openai-tabs}

从 Proxyman 5.22.0 或更高版本开始，Proxyman 支持：

* **SSE** 标签页，用于查看来自 OpenAI 端点的 Server-Sent Events：自动美化每个 data 事件中的内联 JSON
* **OpenAI** 标签页：自动合并流式内容，并显示最终结果，类似于你在聊天视图中看到的输出。

### 2.2 Connection Log {#22-connection-log}

* **Connection Log** 显示所选请求的连接信息，包括 DNS 查询、TCP 连接、TLS 协商、证书和 HTTP 标头。
* 点击 Request 标签栏中的 **+**。在 **Request** 下，勾选 **Connection Log** 即可显示，取消勾选则隐藏。
* 该标签页会出现在 Request 面板中 **Summary** 的旁边。它默认启用，Proxyman 会记住你的选择。
* 查看示例日志请参阅 [HTTP/2 指南](https://proxyman.com/docs/zh-cn/basic-features/http2)，查看全部字段请参阅 [Connection Log 指南](https://proxyman.com/docs/zh-cn/basic-features/connection-log)。

## 3. ⚡️ 进阶：使用 Scripting 工具创建自定义标签页 {#3-️-advanced-create-a-custom-tab-with-the-scripting-tool}

* ✅ 在自己的标签页中显示自己的数据
* 适用于需要解码正文，或只在自己的标签页中显示部分正文的场景

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

1. 点击 Request/Response 标签栏上的 "+" 按钮，或前往 **Tools** → **Custom Previewer Tab…**
2. 点击 **Add Custom Tabs** 按钮
3. 选择 Request 或 Response 面板，并为标签页设置名称
4. 点击 "..." 按钮，显示 JavaScript 代码
5. 打开 **Scripting** → **Script List…**，新建一个[脚本](https://proxyman.com/docs/zh-cn/scripting/script)，并使用此代码显示你自己的数据

![Proxyman 脚本编辑器，在 onRequest 和 onResponse 中设置 customPreviewerTabs 的值](https://proxyman.com/docs/assets/343035431-1a336092-5c50-4e23-afbb-9a41f9679bb9.jpg)

_编写显示数据的代码_

6. 完成

![Proxyman 中的自定义正文和 json 标签页，已填入脚本生成的数据](https://proxyman.com/docs/assets/343035436-dc7e6346-9ac6-4601-b07a-8294de2c4a02.jpg)

_在新标签页中显示你的数据_

## 4. 示例 {#4-examples}

### 强制渲染 JSON TreeView {#force-render-json-treeview}

Proxyman 支持 JSON Tree View，可以更直观地查看数据。

你可以通过右键点击列标题，来显示或隐藏某一列。

### 强制渲染 HTML 页面 {#force-render-html-page}

在 Response 面板列表中勾选 **HTML Webview**，即可将 HTML 响应渲染为网页，而不是读取原始 HTML。

### 美化 JavaScript 文件 {#beautify-the-javascript-files}

在自定义预览标签页窗口底部勾选 **Auto beautify the minified content**。之后，Proxyman 会格式化压缩过的 HTML、CSS 和 JavaScript，方便你阅读。

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

* [使用 Proxyman 调试 OpenAI Server-Sent Events](https://proxyman.com/posts/debug-server-sent-event-openapi-endpoint-with-proxyman)
* [预览 HTTP 请求和响应中的 multipart/form-data 正文](https://proxyman.com/posts/2021-06-24-preview-multipart-formdata)