Reading DevTools Data
Every check in Crosscheck can include DevTools data that was automatically captured by the extension during the session. This data is displayed in the DevTools panel of the check detail view, organized into three tabs: Console Logs, Network Requests, and User Actions.
Console Logs
The Console tab shows all messages logged to the browser console during the capture session. Each log entry includes a timestamp, the severity level, and the message content.
Color Coding
Log entries are color-coded by severity so you can quickly identify issues:
| Level | Color | Description |
|---|---|---|
| Error | Red | Runtime errors, uncaught exceptions, and failed assertions |
| Warning | Yellow | Deprecation notices, potential issues, and non-critical problems |
| Info | Blue | General informational messages and standard console.log output |
| Log | Gray | General-purpose log output from the application |
Filtering
Use the filter controls at the top of the Console tab to narrow down logs by severity level. You can toggle individual levels on or off to focus on what matters. For example, enable only errors and warnings to quickly triage problems without scrolling through informational messages.
Timestamps
Each log entry displays a relative timestamp showing when it occurred within the capture session. For video recordings, these timestamps correspond to the video timeline, so you can jump to the exact moment a log was emitted.
Console logs panel with color-coded entries and level filters
Network Requests
The Network tab lists every HTTP request made during the session. This is useful for identifying failed API calls, slow responses, or unexpected request patterns.
Request List
Each row in the request list displays:
- URL — the endpoint that was called, truncated for readability with the full URL visible on hover.
- Method — the HTTP method (GET, POST, PUT, DELETE, etc.).
- Status Code — the response status, color-coded green for 2xx, yellow for 3xx/4xx, and red for 5xx.
- Timing — how long the request took to complete, from initiation to response.
Expanded Details
Click on any request to expand it and view additional details including request headers, response headers, and the response body. This gives you the full picture of what was sent and received without needing to reproduce the issue in your own browser.
Keyboard Navigation
Navigate the network request list efficiently using keyboard shortcuts:
| Key | Action |
|---|---|
| Up / Down arrows | Move between requests in the list |
| Enter | Expand or collapse the selected request |
| Escape | Close the expanded detail panel |
User Actions
The Actions tab presents a timeline of everything the user did during the session. This gives reviewers a step-by-step account of the interactions that led to the captured behavior.
Tracked Interactions
| Action Type | What Is Recorded |
|---|---|
| Click | Element clicked, its text content, and CSS selector |
| Navigation | Page URL changes including hash and query parameter changes |
| Double Click | Element double-clicked, its text content, and CSS selector |
| Keypress | Keyboard interactions on the page |
Timestamps
Each action in the timeline includes a timestamp relative to the start of the capture. For screen recordings, clicking on an action timestamp will seek the video player to that moment, allowing you to see exactly what was on screen when the action occurred.