# Devtools Interface Guide QTap DevTools provides a browser-based interface for inspecting HTTP/S traffic in real-time. The interface is organized into three tabs, each providing a different level of visibility into your system's network activity. Access DevTools at `http://localhost:10001/devtools` after enabling with `--enable-dev-tools` or `ENABLE_DEV_TOOLS=true`.
*** ### Global Controls The toolbar at the top of every tab includes three controls:
ControlIconFunction
Pause⏸Stops the real-time stream. New events are buffered but not displayed until you resume. Useful when you've captured the event you're looking for and want to inspect it without new entries pushing it down the list.
Clear Data🚫Wipes the current buffer and starts fresh. Helpful when you want a clean slate before reproducing a specific issue.
Filter🔽Opens the filter builder. Lets you narrow down to specific traffic patterns.
*** ### Filter System The filter UI uses a structured query builder with three components: **Key** → **Operator** → **Value** Select a key from the dropdown, choose an operator, and type a value to filter the current view. Multiple filters can be combined to narrow results further. #### Available Filter Keys by Tab **Requests Tab** | Key | Description | Example | | ----------- | ---------------------------- | ---------------------- | | `method` | HTTP method | GET, POST, PUT, DELETE | | `status` | HTTP status code | 200, 401, 404, 500 | | `endpoint` | Target domain | api.github.com | | `path` | URL path | /v1/users | | `direction` | Traffic direction | egress, ingress | | `process` | Binary that made the request | /usr/local/bin/ruby | **Connections Tab** | Key | Description | Example | | ---------------- | --------------------------------- | ------------------- | | `direction` | Traffic direction | egress, ingress | | `source` | Source IP address | 192.168.3.218 | | `destination` | Destination IP address | 140.82.112.5 | | `status` | Connection state | OPEN, CLOSED | | `socketProtocol` | Transport protocol | tcp | | `l7Protocol` | Application protocol | http1 | | `process` | Binary that opened the connection | /usr/local/bin/ruby | | `user` | System user | root, www-data | *** ### Processes Tab A real-time inventory of every process on the host.
#### Columns | Column | Description | | ------------- | ------------------------------------------------ | | **Timestamp** | When the process was observed | | **Status** | RUNNING (green) or EXITED (gray) | | **PID** | Process ID | | **Binary** | Executable name (python3.12, docker, ruby, etc.) | | **Path** | Full filesystem path to the binary | | **User** | Which system user is running the process | | **Container** | Container name, if applicable | | **Pod** | Kubernetes pod name, if applicable | | **Duration** | How long the process has been running | #### Detail Panel Click any process row to open the detail panel showing: * **Process Info**: Binary name, full path, hostname, PID * **User Info**: Username and UID #### Use Cases * See what's actually running on a host, especially in containerized environments * Identify unexpected processes * Correlate processes with network activity in other tabs *** ### Connections Tab Shows every network connection with process attribution.
#### Columns | Column | Description | | --------------- | -------------------------------------------- | | **Timestamp** | When the connection was observed | | **Direction** | Egress (outbound) or ingress (inbound) | | **Source** | Local IP:port | | **Destination** | Remote IP:port | | **Status** | OPEN (green) or CLOSED (gray) | | **Socket** | Transport protocol (tcp) | | **L7** | Detected application protocol (http1, http2) | | **Process** | Binary that opened the connection | | **Duration** | Connection lifetime | #### Detail Panel Click any connection to see: * **Connection Info**: Unique connection ID, resolved endpoint hostname (e.g., `api.mailgun.net`), creation timestamp * **Source**: IP address, hostname, executable path * **Destination**: Remote IP address * **System**: Hostname, agent type, agent instance ID * **TLS Detection**: Which TLS library was detected (openssl, gotls, nodetls, javassl) * **Tags**: Auto-generated metadata including binary, environment, host, protocol #### Use Cases * See which external services your application connects to * Identify unexpected outbound connections * Debug connection timeouts or failures * Understand connection duration patterns *** ### Requests Tab Individual HTTP transactions with full request and response details. This is the closest equivalent to Chrome DevTools' Network tab.
#### Columns | Column | Description | | ------------- | ------------------------------------------------------------------ | | **Timestamp** | When the request was made | | **Direction** | Egress or ingress | | **Endpoint** | Target domain (api.github.com, api.stripe.com) | | **Path** | URL path (/v1/customers, /rate\_limit) | | **Status** | HTTP status code, color-coded (green=2xx, yellow=3xx, red=4xx/5xx) | | **Method** | HTTP method (GET, POST, PUT, DELETE) | | **Type** | Response content type (application/json, text/html) | | **Process** | Binary that made the request | | **Size** | Response body size | | **Time** | Request duration in milliseconds | #### Detail Panel Click any request to see the full transaction details: **Header Bar** * Method and status code with timing * Full URL * Size, process path, and container name * Link to the underlying connection
**Tabs** | Tab | Contents | | ------------ | ------------------------------------------------------------------------------------------------ | | **Headers** | Complete request headers (including Authorization, cookies, custom headers) and response headers | | **Response** | Full response body | | **cURL** | Copy-pasteable cURL command to reproduce the request | #### Use Cases * Debug authentication failures by seeing the exact Authorization header sent * Inspect API error responses that your application logs don't capture * Compare request structure against API documentation * Export requests as cURL commands for testing *** ### Tips #### Debugging a Specific Issue 1. Click **Clear Data** to start with an empty buffer 2. Set up filters to isolate the traffic you care about (e.g., `endpoint = api.stripe.com`) 3. Reproduce the issue in your application 4. Click **Pause** once you see the relevant request 5. Click into the request to inspect headers and response #### Finding Unexpected Traffic 1. Filter by `process` to isolate a specific service 2. Look at the Connections tab to see all destinations 3. Check for connections to unexpected endpoints #### Investigating Slow Requests 1. Sort by the **Time** column to find slow requests 2. Check the detail panel for timing breakdown 3. Look at connection duration in the Connections tab to distinguish network latency from processing time *** ### Data Retention DevTools uses a ring buffer in your browser's memory. Data is ephemeral and cleared on page refresh. For permanent storage, configure S3-compatible object storage in your Qtap configuration. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.qpoint.io/guides/devtools-guides/devtools-interface-guide.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.