> For the complete documentation index, see [llms.txt](https://docs.proxyman.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.proxyman.com/basic-features/request-response-viewer.md).

# Request / Response Previewer

After installing the [Certificate](/debug-devices/macos.md) and enable [HTTP Response](/basic-features/ssl-proxying.md) on domains or clients, your network traffic would show up immediately inside the Proxyman window, separated into three main areas:

* The Source List on the left panel
* The Flow List on the middle panel
* The Flow Content on the right panel

![](/files/-M5kcU0AOTr014EyiUPT)

### Body Content Previewer

Depend on what the content of the Request or Response is: Proxyman will automatically show in separate tabs:

* **Header**: All headers (key-value table)
* **Cookies**: **Cookie** key in the header
* **Set-Cookie** for the Set-Cookie Header in the Response
* **Auth**: **Authentication** key in the header
* **Body**: The body of the message: Proxyman automatically formats and beautifies the body content depends on the **Content-Type,** such as JSON, PNG, GIF, Raw Data, ...
* **Query**: If the request has a query, all queries are presented.
* **Raw**: The RAW HTTP message.
* Protobuf Message
* MessagePack
* Multipart/form-data

### Custom Previewer Tab

It's possible to customize which Previewer Tab you would like to see

* Custom tabs will persistent on the Request/Response Panel
* Attempt to decode and beautify the content

{% content-ref url="/pages/-MBw3pBhnWE-Wwq3Vs7-" %}
[Custom Previewer Tab](/basic-features/custom-previewer-tab.md)
{% endcontent-ref %}

![Custom Previewer Tab](/files/-Md01URMXqWeaY7AsRN1)

### Layout mode

There are two way to order the Request / Response Panel: Vertical or Horizontal layout

![Request/ Response Panel](/files/-LmSVFKeUuNPwG6HpV-Y)

![Previewer in Horizontal Layout](/files/-M5kdG7Ych9_JbU82Mm7)

![Previewer in Vertical layout](/files/-M5kdOeUJerSyTDQLo45)

### Customize Workspace

You can use custom layout buttons on the top right corner of the app to display content as your preference

1. Collapse/Expand Source List Panel
2. Open Request/ Response Panel in new window
3. Display Request/Response Panel in Horizontal layout
4. Display Request/Response Panel in Vertical layout

![](/files/-M5khQdFnInkcHQX-Ci_)

### Shortcuts

All sections are support **Copy (⌘C)** and multiple selections

![](/files/-LmSXLCTr7qnOJvQv4rH)

Read more at our [Proxyman Keyboard Shortcuts](https://proxyman.io/blog/2019/08/Proxyman-keyboard-shortcuts.html) blog

### **Body Previewer**

Body previewer automatically beautifies the content as well as offering handy minor features:

* **Tree View**: Represent the JSON in Tree View mode
* **Hex**: Show the body in Hex format
* **Export only body**: Able to export your body content to file. Suitable for Raw Data or binary data
* **Open With**: You can open the Body content with your favorite Editor. **Sublime Text** is mime 😍

![](/files/-LmSXeS1vqgVfomWgdCG)

### JSON Tree View mode

Proxyman supports native JSON Tree View mode, which displays a JSON Body. It allows the developer to:

* Search JSON by [JSON Path](/basic-features/jsonpaths.md)
* Copy JSON Node like Google Developer Tool does.

![](/files/0ssVu2P5Z1QY9hb03MQ1)