---
title: "Console, network and more"
description: "What each devtools tab in the Faylee viewer shows, from the console and network requests to the steps, the backend errors and the page's performance."
canonical: https://faylee.app/docs/viewer/devtools
---

# Console, network and more

The devtools panel holds what the browser saw while the bug happened. It has up to five tabs: Info, Console, Network, Actions and Backend. It opens on Info. The Console and Network tabs show a count when the capture has errors or failed requests.

Every list follows playback. The row for the current moment is highlighted, rows that come later are dimmed, and clicking a row seeks the player to it.

## Info

Info answers "what was this person using". It lists, in order:

- **Page**, or **Pages** with a count when the reporter moved between pages. Click a page to jump to when it opened.
- **App metadata**, the values your app passed to `window.faylee.metadata()`. See [App metadata](https://faylee.app/docs/capture/app-metadata.md). When there is none, workspace admins see a prompt that opens the snippet.
- **Linked sessions**, links to the same session in LogRocket, Fullstory, Sentry Replay, PostHog or Datadog RUM when the page ran one of them.
- **Device**: when it was captured, with the time zone, the system, the browser, the window size, and the network in words, such as "Fast · 10+ Mbps · 50 ms".
- **Backend errors**, when your workspace has connected Sentry but no errors matched yet. See [Backend](#backend).
- **More details**, folded, with the rest of the environment, such as the language, the screen and the color scheme.
- **Performance**. See [Performance](#performance).

## Console

Console lists everything the page logged, plus uncaught errors.

The level filter shows **All**, **Errors**, **Warnings**, **Info** or **Verbose**. Beside it, three toggles add page events to the list, so you can read the log in context:

- **Page navigations**
- **Network errors**, on by default
- **User activity**

The **Filter** box matches the text of each line. Expand an entry to see its full arguments and its stack.

### Original stack traces

A production page usually throws from a minified bundle, so its stack reads like `main.4f3a.js:1:20931`. After a recording is uploaded, Faylee looks for the source maps of the scripts in each stack and resolves the frames to your original source, the way browser devtools do.

On the recording page, an uncaught error then shows its original file and line, and an expanded stack opens on the original frames, such as `at submit (src/checkout/CheckoutForm.tsx:14:17)`. A switch above the stack goes between **Original source** and **Minified**. Frames that could not be resolved stay minified and are dimmed.

Faylee finds a map the way a browser does: from the `SourceMap` or `X-SourceMap` response header, then the `//# sourceMappingURL=` comment at the end of the script, then the script's address with `.map` added. This covers uncaught errors and `console.error` calls that carried a stack.

:::caution[Limits]
- Only maps your site serves publicly are found. Many production sites don't publish source maps. Scripts or maps behind a login, a VPN or an address allowlist can't be reached, and their frames stay minified.
- The script is fetched after upload, not at the moment the page was recorded. If you deploy in between and the script keeps the same address, the frames can resolve against the new build. Bundles with a content hash in their file name are not affected.
- The function name is a best guess from the map. It can name the wrong function when a minifier reused short names in nested scopes. File, line and column are exact.
- You can't upload private source maps to Faylee yet.
- Original stacks show to workspace members on the recording page. Share and embed pages show the stacks as the browser wrote them.
:::

## Network

Network lists every request the page made, with these columns: number, status, method, name, domain, type, size, duration, a waterfall and the time. On a narrow panel, domain, type and size are hidden. The playhead runs through the waterfall.

The type filter shows **All**, **Fetch/XHR**, **WS/SSE**, **JS**, **CSS**, **Media**, **Font**, **Doc** or **Other**. **Errors only** keeps the requests that failed, whether they failed in transport, returned an error status, or returned GraphQL errors. The filter box matches the URL or the GraphQL operation name.

### Request details

Click a request to open its details under the list. The top of the details shows:

- The status, method and resource type.
- The full URL, with a button to copy it.
- Why it failed, when the request never got a response, using the reason the browser reported.
- **Blocked by CORS**, with the reason, when Faylee can tell from the headers that a cross-origin request or its preflight was refused.
- The GraphQL operation and any GraphQL errors, for GraphQL requests.

Three tabs follow:

- **Headers**: the request and response headers. When a header carries a trace id, a **Backend trace** section lists it first with a copy button.
- **Payload**: the request body. For GraphQL, the query and its variables are shown apart.
- **Response**: the response body.

:::note
Request and response bodies are captured only for requests the page made with `fetch` or `XMLHttpRequest`. Other requests, such as scripts, images and documents, have headers and timing but no body. Secrets in headers and bodies are hidden before upload. See [Privacy and redaction](https://faylee.app/docs/workspace/privacy.md).
:::

### Trace ids

Faylee reads trace ids from these request and response headers, so you can find the same request in your backend's logs:

| Header | System |
|---|---|
| `traceparent` | W3C trace context |
| `x-request-id`, `x-correlation-id` | Request id |
| `x-amzn-trace-id` | AWS |
| `sentry-trace` | Sentry |
| `x-datadog-trace-id` | Datadog |
| `cf-ray` | Cloudflare |

### Copy as cURL and HAR export

**cURL** in the request details copies the request as a `curl` command, so you can run it again from a terminal. **HAR** at the top of the panel downloads every request in the recording as a HAR file, which browser devtools and proxy tools can open. The **Download** menu in the player controls offers the same HAR file.

### WebSockets and EventSource

Choose **WS/SSE** to see WebSocket and EventSource connections. When the capture has any, the list changes to a connection list on the left and that connection's messages on the right, each on the recording's clock. You can show **All**, **Sent** or **Received** messages and filter them by text.

A message's text is clipped to 4 KB, and binary frames are described by their size. Faylee keeps up to 1000 messages per connection. When a connection had more, the oldest are left out and the panel says how many.

## Actions

Actions lists every click, key, input and page change as numbered steps to reproduce, such as `Click the "Pay" button` or `Go to /checkout`. Typing into a hidden field reads as `Type a hidden value into` the field, without the value.

- **Copy** copies the steps as a numbered list, ready to paste into a ticket.
- **Playwright** copies a Playwright test that repeats the actions.

Hover a step to copy its element as a **CSS selector**, a **Playwright locator**, or its **test id** when the element has one.

## Backend

When your workspace has connected Sentry, Faylee looks up the errors your backend reported for the recording's failed requests. It matches requests by their `traceparent` or `sentry-trace` header, so requests without one of those can't be matched.

The Backend tab appears only when Sentry returned errors for the recording. Click an error's time to jump to that moment. **Look up again** asks Sentry once more, for example when the error arrived in Sentry late. When nothing matched, the **Backend errors** row in Info says so and offers the same button.

See [Sentry](https://faylee.app/docs/integrations/sentry.md) for connecting it.

## Performance

The end of the Info tab shows how fast the page was for the reporter and what blocked it.

| Card | Metric |
|---|---|
| Largest paint | LCP |
| Slowest interaction | INP |
| Layout shift | CLS |
| First paint | FCP |
| Server response | TTFB |
| Peak memory | The most memory the page used, in MB |

Each Web Vital is colored by Google's thresholds as good, needs improvement or poor. A dash means the browser did not report that metric during the capture.

**Long tasks** lists every time the main thread was blocked for 50 ms or more, with its length. Click one to jump to it. When there were none, the section says that nothing blocked the main thread.

## Related

- [The viewer](https://faylee.app/docs/viewer/overview.md)
- [App metadata](https://faylee.app/docs/capture/app-metadata.md)
- [Sentry](https://faylee.app/docs/integrations/sentry.md)