# 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>