# Pestaña de vista previa personalizada

> Añade Custom Previewer Tabs de Proxyman para mostrar el cuerpo de una solicitud o respuesta como JSON, Protobuf, HTML o MessagePack, o para añadir la pestaña Connection Log.

## 1. ¿Qué es? {#1-whats-it}

Las pestañas de vista previa personalizada te permiten añadir pestañas extra a los paneles Request y Response. Cada pestaña muestra siempre el contenido en un único formato.

Esta herramienta resulta muy útil en los siguientes casos:

* Dar formato al BODY como **JSON**, aunque el Content-Type no sea `application/json`
* Dar formato al cuerpo como **Protobuf**, aunque el Content-Type no sea `application/x-protobuf`
* Mostrar una página HTML en una vista web
* **Formatear** los archivos minificados (HTML, CSS, JS)
* Multipart/form-data
* Intentar dar formato al cuerpo con el tipo seleccionado, independientemente del `Content-Type`
* Convertir MessagePack (msgpack) a JSON
* [Code Generator](https://proxyman.com/docs/es/advanced-features/code-generator) a Swift, Node, Javascript, cURL, ...
* Formateador de GraphQL Query
* [Connection Log](https://proxyman.com/docs/es/basic-features/connection-log) para inspeccionar los detalles de DNS, TCP, TLS y HTTP

![Ventana Custom Body Previewer Tabs de Proxyman con las casillas Request y Response, Connection Log marcada y el botón Add Custom Tabs](https://proxyman.com/docs/assets/proxyman-custom-previewer-tab-window.jpg)

_Selecciona Custom Tabs para el panel Request / Response_

> **Nota:** Las pestañas personalizadas seleccionadas se añaden a la derecha de la vista Request o Response 

## 2. ¿Cómo se usa? {#2-how-to-use-it}

Para abrir la ventana Custom Previewer Tab:

1. Haz clic en el botón "+" de la barra de pestañas de Request/Response o ve a **Tools** → **Custom Previewer Tab…**
2. Marca o desmarca una casilla para mostrar u ocultar tu pestaña personalizada
3. La nueva pestaña aparece en el panel Request o Response ✅

### 2.1 Pestañas Server-Sent Events y OpenAI {#21-server-sent-events-and-openai-tabs}

Desde Proxyman 5.22.0 o posterior, Proxyman admite:

* Pestaña **SSE** para Server-Sent Events de los endpoints de OpenAI: formatea automáticamente el JSON en línea de cada evento de datos
* Pestaña **OpenAI**: combina automáticamente el contenido recibido en streaming y muestra el resultado final, similar a la salida de tu vista de chat.

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

* **Connection Log** muestra la información de conexión de la solicitud seleccionada, incluidas las búsquedas DNS, las conexiones TCP, la negociación TLS, los certificados y los encabezados HTTP.
* Haz clic en **+** en la barra de pestañas de Request. En **Request**, marca **Connection Log** para mostrarla o desmárcala para ocultarla.
* La pestaña aparece junto a **Summary** en el panel Request. Está activada de forma predeterminada, y Proxyman recuerda tu elección.
* Consulta la [guía de HTTP/2](https://proxyman.com/docs/es/basic-features/http2) para ver un registro de ejemplo, o la [guía de Connection Log](https://proxyman.com/docs/es/basic-features/connection-log) para conocer todos los campos.

## 3. ⚡️ Avanzado: crea una pestaña personalizada con la herramienta Scripting {#3-️-advanced-create-a-custom-tab-with-the-scripting-tool}

* ✅ Muestra tus propios datos en la pestaña
* Útil cuando quieras decodificar el cuerpo o mostrar una parte de él en tu propia pestaña

### Cómo se usa {#how-to-use}

1. Haz clic en el botón "+" de la barra de pestañas de Request/Response o ve a **Tools** → **Custom Previewer Tab…**
2. Haz clic en el botón **Add Custom Tabs**
3. Selecciona el panel Request o Response y asigna un nombre a tu pestaña
4. Haz clic en el botón "..." para mostrar el código JavaScript
5. Abre **Scripting** → **Script List…**, crea un [script](https://proxyman.com/docs/es/scripting/script) nuevo y usa este código para mostrar tus propios datos

![Editor de scripts de Proxyman configurando los valores de customPreviewerTabs en onRequest y onResponse](https://proxyman.com/docs/assets/343035431-1a336092-5c50-4e23-afbb-9a41f9679bb9.jpg)

_Escribe tu código para mostrar los datos_

6. Listo

![Proxyman mostrando las pestañas custom body y json con datos de un script](https://proxyman.com/docs/assets/343035436-dc7e6346-9ac6-4601-b07a-8294de2c4a02.jpg)

_Muestra tus datos en una pestaña nueva_

## 4. Ejemplos {#4-examples}

### Forzar el renderizado de JSON TreeView {#force-render-json-treeview}

Proxyman admite la vista en árbol de JSON (JSON Tree View) para visualizar mejor los datos.

Puedes mostrar u ocultar una columna haciendo clic con el botón derecho en su encabezado.

### Forzar el renderizado de página HTML {#force-render-html-page}

Marca **HTML Webview** en la lista del panel Response para mostrar una respuesta HTML como página web, en lugar de leer el HTML sin procesar.

### Formatear los archivos JavaScript {#beautify-the-javascript-files}

Marca **Auto beautify the minified content** en la parte inferior de la ventana Custom Previewer Tab. Proxyman formatea entonces el HTML, CSS y JavaScript minificados para que puedas leerlos.

## Más información {#learn-more}

* [Depura Server-Sent Events de OpenAI con Proxyman](https://proxyman.com/posts/debug-server-sent-event-openapi-endpoint-with-proxyman)
* [Previsualiza los cuerpos multipart/form-data de las solicitudes y respuestas HTTP](https://proxyman.com/posts/2021-06-24-preview-multipart-formdata)