Trace interactive boundaries

“Cannot reproduce.” Never again.

Tester marks a bug directly on your hosted app. Developer gets screenshot, console logs, network requests, DOM selector, and source mapping — instantly. AI writes the fix. One click opens the PR.

Get Started Free

bug

critical

/checkout

Submit button unresponsive on mobile viewport

full context: screenshot, logs, network, source — all auto-captured

DetailImagesConsoleNetworkAI Fix

Selectorform#checkout > button.submit

SourceCheckout.tsx:42:8

ConsoleTypeError: null is not an object

NetworkGET /api/user → 404

Sarah Chen · Guest · 375×667

The complete workflow.
From bug to fix.

Scroll through how Claron transforms the entire feedback loop — from the moment a tester spots a bug to the verified fix in production.

acme-web

Browse

Pointon

Area

Element

Marker

Spotlight

End

Viewport

Mobile

Tablet

Desktop

Host

acme-web.claron.dev/checkout

ACME STORE

Secure Checkout

Shipping AddressSarah Chen · 123 Developers Lane

Payment MethodCard ending in 4242

Total Order$129.00

Capturing: selector · screenshot · console · network

Mark It

Tester finds a bug.
Just marks it.

Your app is hosted on Claron for testers to test. They run it, they find a bug. Instead of writing a messy, context-less ticket with maybe a screenshot at best — they just mark it. Right there on the page. Click the element. Done.

Bug

Critical

/checkout

Submit button unresponsive on mobile viewport

Public

UI Issue

Status

Visibility

Assign

Timestamp: 10/24/2026, 10:42:15 AM
Updated: 10/24/2026, 11:15:02 AM
Session Replay: a8b9f2d1
Replay Timestamp: 01:14
Redirect Link: Open in Review
Original Page: /checkout
Reporter: Sarah Chen
Device: mobile
Marker: #0ea5e9

form#checkout-form > div.actions > button[type="submit"]

Viewport

375 × 667

Linked

Captcha failing to load on Safari

High

Credit card input masking issue

Normal

Missing hover state on submit button

Low

Full Context

Developer gets
everything.

The developer opens the annotation and gets it all. Screenshot. Console logs. Network requests. DOM selector. Source file mapping. The tester's exact interaction path. What didn't we capture?

bug

critical

/checkout

Payment card throws TypeError on mobile viewport

full context: screenshot, logs, network, source — all auto-captured

ACME STORE

Secure Checkout

Complete your order below.

Order Summary

Sarah Chen · Guest · 375×667

Take Me There

Claron It!
See The Bug, Live.

Every Claron bug report has a “Claron It!” button. Click it, and a spotlight overlay guides you step-by-step through the exact navigation path the tester took — menus they opened, buttons they clicked, pages they visited — until you land on the exact element that triggered the bug. No guessing. No “cannot reproduce.” Try the live demo below.

Submit button broken on mobile

LINEAR-842

HighOpen

Bi-directional Sync Active

Claron → LinearAnnotation created → Ticket filedjust now

Linear → ClaronStatus changed to In Progress2m ago

Comments synced

Dev · via Linear · 3m ago

Investigating — looks like a media query override. Fix incoming.

Auto-Sync

Ticket? Already
made.

The annotation auto-creates a ticket in Linear, Jira, or whatever your team uses. Change the status here? It changes there. Add a comment there? It shows up here in Claron. Fully synced, both ways.

Session Replay
production

session_8f4a2c89

Click

00:14 / 00:42

DevToolsinspector

Hover to highlight · Click to inspect

bodydiv#rootbutton.submit

1<html>

2<head>...</head>

4<bodyclass="bg-gray-50">

5<divid="root">

6<mainclass="dashboard">

7<header>...</header>

8<divclass="grid grid-cols-3">

9<divclass="card">...</div>

10<divclass="card"...</div>

11</div>

12<buttonclass="btn-primary submit">Submit Order</button>

13</main>

14</div>

15</body>

16</html>

claron · session replaypowered by claron

Session Replay

See exactly what
they did.

The entire session plays like a video. But unlike a video — pause it at any moment and inspect the full DOM tree. See what console logs fired. What network requests were made. What page transitions happened. All in sync.

AI Fix Suggestion

Claron AI Fixer

94% confidence

Submit button missing padding on mobile

The px-4 class is overridden by a media query. Appending sm:px-6 resolves spacing.

src/components/Button.tsx

src/components/Button.tsxtypescript

AddedRemoved

OldNew

Code

return (

− <button className="bg-blue-500 py-2">

+ <button className="bg-blue-500 py-2 px-4 sm:px-6">

);

AI Fix

Don't find the line.
We handle that.

Tired of hunting for the code you need to change? Our AI maps the bug to your source code and generates the exact fix. Use the CLI to apply it locally, or open a PR with one click.

claron-cli

or use one-click pr

PR #128 · fix mobile submit padding

claron/fix-ann-8f4a2c · checks passed

one click

Claron CLI

Terminal Cockpit.
Keyboard First.

Bring Claron directly into your command line. Inspecting annotations, triaging inbox issues, diffing code changes, and applying patches is a lightning-fast, keyboard-driven experience inside a beautiful local terminal cockpit.

rebuild · fix/ann-8f4a2c

Active

00 Webhook received: push to claron/fix-ann-8f4a2c
01 Pulling latest changes…
02 Changed file: src/components/Button.tsx
03 AI check: file relevant to annotation #ann_8f4a2c ✓
05✔Rebuild complete — 1.8s
06✔Taking after screenshot…
07✔✓ Pixel diff generated (element + page)

Visual Comparison

Before

After

Pixel diff: 3.2% changed

Visual fix verified

Auto-Rebuild

Fixed? We
auto-rebuild.

The developer pushed the fix. We auto-rebuild, pull the latest, and take an after screenshot — but only if the changed file is relevant to the annotation. AI helps us figure that out. Before screenshot. After screenshot. And the pixel diff between them. For both the element and the full page.

Guided Mode • Synced with Sarah (Tester)

localhost:3000

ℹ️

Synced with Sarah

Your view is locked to her actions. Click "Leave guided view" to explore independently.

charts.svg

metrics.svg

Submit Order

Sarah

Guided Mode Simulator

Syncing cursor, scroll, and viewport locks between Developer and Tester.

Fully Synced

Collaborate

Guide them.
Live.

Still not enough? Use Guided Mode and Spotlight to point things out directly on their screen. Same app. Same build. Same environment. Real-time collaboration on the actual running application.

production-build

bash

$ npm link claron-sdk
✓ SDK linked successfully
✓ Hashed sourcemaps uploaded
$ npm run build
✓ Production build instrumented

Extension

Claron extension active

00:00Completed

Detects your SDK instrumentation securely.

Navigate to production URL

00:12Completed

Use your own authenticated session.

Overlay injected

00:13Completed

Same annotation layer as hosted preview.

Annotate in harmony

00:14Active

Extension captures UI, SDK maps to original sources.

Hosted vs Production Features

FeatureHostedProd

Annotations

Screenshot

Console Logs

Network Logs

AI Fix

Session Replay

After Screenshot

Pixel Diff

Production

Production bug?
We've got you.

Use our SDK to build — we auto-upload hashed sourcemaps for you. Just npm link claron-sdk. Then use our extension to annotate. The extension captures the UI, and the SDK maps the production code back to your original sources in harmony. The only things you miss: pixel diff and after screenshots.

Beta — Free to startPreview live

How it works

Connect your repo

Push code. Preview is live in seconds.

preview · main

Active

01 Cloning github.com/acme/web…
03 Detected framework: Next.js 14.2
08 npm install — 847 packages
12✔Build complete — 2.1s
13✔Injecting Claron overlay…
14✔✓ Preview live at acme-web.claron.dev

Client clicks the bug

No account needed. No script tags.

Point

Critical

#ann_8f4a2c

Submit button broken on mobile

The submit button text is invisible on dark mode — white text on white background.

DOM Selector

form#checkout > div.actions > button[type="submit"]

Screenshot1024×768

Submit

Console2

TypeError: null is not an object

Warning: Each child should have a unique key

Network1

GET /api/user404

Sarah (client)

just now

Guest

One-click PR opened

Ticket, branch, commit, and PR stay linked.

AI Fix Suggestion

A.I.

94% confidence

Submit button missing padding on mobile

The `px-4` class is overridden by a media query. Appending `sm:px-6` resolves spacing.

AddedRemoved

OldNew

Code

− <button className="bg-blue-500 py-2">

+ <button className="bg-blue-500 py-2 px-4 sm:px-6">

Submit button broken on mobile

LINEAR-842

highOpen

PR #128 · fix mobile submit padding

claron/fix-ann-8f4a2c · checks passed

open

“Cannot reproduce.” Never again.

The complete workflow.
From bug to fix.

Secure Checkout

Tester finds a bug.
Just marks it.

Developer gets
everything.

Secure Checkout

Claron It!
See The Bug, Live.

Submit button broken on mobile

Ticket? Already
made.

Session Replay
production

See exactly what
they did.

Don't find the line.
We handle that.

Terminal Cockpit.
Keyboard First.

Fixed? We
auto-rebuild.

Guide them.
Live.

Production bug?
We've got you.

Connect your repo

Client clicks the bug

One-click PR opened

Plug into your stack.
Not the other way around.

Ticket Trackers

Project Tools

Notifications

“Cannot reproduce.” Never again.

The complete workflow.From bug to fix.

Secure Checkout

Tester finds a bug.Just marks it.

Developer getseverything.

Secure Checkout

Claron It!See The Bug, Live.

Submit button broken on mobile

Ticket? Alreadymade.

Session Replayproduction

See exactly whatthey did.

Don't find the line.We handle that.

Terminal Cockpit.Keyboard First.

Fixed? Weauto-rebuild.

Guide them.Live.

Production bug?We've got you.

Connect your repo

Client clicks the bug

One-click PR opened

Plug into your stack.Not the other way around.

Ticket Trackers

Project Tools

Notifications

The complete workflow.
From bug to fix.

Tester finds a bug.
Just marks it.

Developer gets
everything.

Claron It!
See The Bug, Live.

Ticket? Already
made.

Session Replay
production

See exactly what
they did.

Don't find the line.
We handle that.

Terminal Cockpit.
Keyboard First.

Fixed? We
auto-rebuild.

Guide them.
Live.

Production bug?
We've got you.

Plug into your stack.
Not the other way around.