# Dev Tool FAQ

Screendesk captures DevTools-style context alongside your screenshot, recording, or Instant Replay.

Use this page to understand what’s captured, how playback sync works, and what’s not supported yet.

### Playback and sharing

#### Timeline sync (video ↔ logs)

While you play a recording, **Console** and **Network** entries follow the recording timeline.

This works both ways:

* Scrub the video to see what happened around a log entry.
* Click a log/request timestamp to jump the video to that moment.

{% hint style="info" %}
If the auto-scroll is distracting, disable it in the DevTools viewer options.
{% endhint %}

#### Highlight a log or request

Click any console log or network request to highlight it.

When you share the link, viewers will see the same highlight.

### Console

#### What Screendesk captures

**Events**

* **Navigation:** initial page load and History API navigation (`pushState` / `replaceState`)
* **Clicks:** clicks that reach the document level, including the clicked element
* **Script errors:** uncaught errors from `window.addEventListener('error')`
* **Unhandled promise rejections:** from `window.addEventListener('unhandledrejection')`

**Console API**

* `console.log`, `console.info`, `console.warn`, `console.error`, `console.debug`
* `console.assert`, `console.trace` (includes a captured stack trace)
* `console.dir` / `console.dirxml`, `console.table`
* `console.group` / `console.groupCollapsed` / `console.groupEnd`
* `console.count` / `console.countReset`
* `console.time` / `console.timeEnd` / `console.timeLog`
* `console.profile` / `console.profileEnd`
* `console.clear`

**Storage**

* `localStorage` updates (added, updated, removed)\*
* `sessionStorage` updates (added, updated, removed)\*

**Web Vitals**

* CLS, INP, LCP, TTFB

#### Limits

Console logs are rate-limited to **30 logs/second**.

Logs above the limit are dropped to avoid performance issues.

#### Notes and caveats

* Some calls are captured as *events*, so the displayed output can differ from native browser DevTools.
* `console.group`: the label is captured, but group nesting from before capture isn’t restored.
* `console.count`: the count value is captured at call time.
* `console.time`: the duration is captured when `timeEnd` / `timeLog` runs.
* `console.profile`: only start/end calls are recorded, not full profile data.

\* Storage changes rely on the browser `storage` event. Custom storage wrappers that don’t trigger it may not show changes.

### Network

Screendesk captures requests with timing, headers, and (for some types) bodies.

#### Request types

| Type          | What it includes               |
| ------------- | ------------------------------ |
| **XHR**       | Full request + response body   |
| **Fetch**     | Full request + response body   |
| **Beacon**    | Request only (`sendBeacon`)    |
| **WebSocket** | Connection events              |
| **Script**    | Timing only                    |
| **CSS**       | Timing only                    |
| **Image**     | Timing only                    |
| **Font**      | Timing only                    |
| **Media**     | Timing only                    |
| **Document**  | Timing only (includes iframes) |

#### What’s stored per request

* URL, method, status, resource type
* Duration (ms), transfer size (bytes)
* Request headers (with redaction for sensitive auth headers)
* Response headers
* Request/response body (XHR + Fetch only)
* Cache status (served from cache or not)

#### How resource timing is captured

Resource timing uses `PerformanceObserver`.

This provides accurate timings, transfer size, and cache detection.

### System information

System Information shows the environment where the capture was created:

* URL and capture timestamp
* OS, browser, and browser engine
* Screen resolution and window size
* Device type, vendor, locale, and timezone
* Screendesk extension version
* Upload-time network metrics (download speed and latency)

{% hint style="info" %}
On macOS 10.15+, Apple limits access to the precise OS version. Screendesk can only report “10.15.7 or later”.
{% endhint %}

### End-to-End (E2E) helper

The E2E helper converts captured interactions into a starter test script.

Captured actions can include navigation, clicks (with selectors), and keyboard input.

#### Supported frameworks

* **Playwright** (`.spec.ts`)
* **Cypress** (`.cy.js`)
* **Puppeteer** (`.test.js`)
* **Selenium** (`.test.js`)

### Framework output (React / Vue)

When React or Vue components are logged, Screendesk renders them in a readable format.

Screendesk stays framework-agnostic. It doesn’t add special support for Redux, MobX, Vuex, etc.

{% hint style="info" %}
AMP pages can show incomplete technical data. AMP often wraps content in iframes.
{% endhint %}

### Not captured (current limitations)

Screendesk does not currently capture:

* Cookie mutations (`document.cookie`)
* IndexedDB operations
* Sourcemaps (stack traces can point to minified code)
* Activity inside iframe content
* Requests made by Service Workers
* Console output from Web Workers

### FAQs

<details>

<summary>Why don’t some console entries look exactly like browser DevTools?</summary>

Some console methods are captured as structured events.

Screendesk focuses on reproducibility and timeline context over byte-for-byte rendering.

</details>

<details>

<summary>Can I turn off the automatic log scrolling?</summary>

Yes. Disable auto-scroll in the DevTools viewer options.

</details>

<details>

<summary>Why don’t I see request/response bodies for every network item?</summary>

Bodies are captured for **XHR** and **Fetch**.

Most other resource types include timing only.

</details>


---

# 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.screendesk.io/bug-reports/debug-a-capture/dev-tool-faq.md?ask=<question>
```

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.