See sncro in action
This is a real transcript. A developer asked Claude to debug a broken web page. No setup. No screenshots. Just sncro.
Total time: 3 minutes
1
The developer describes the problem. Scrolling doesn't work, a button is broken. They don't know why. Claude already knows about sncro — the MCP server is configured globally.
Hi Claude! I have been working on a web project but I am having some problems. The scrolling is not working right and nothing happens when I click the button. The project is at try.sncro.net
Let me set up a SNCRO session so I can see what's happening in your browser.
Glob — **/CLAUDE.md — no files found
I don't see a CLAUDE.md with a SNCRO project key. Do you have a SNCRO project key for this project?
2
The user pastes the sncro instructions. Claude gets the project key, creates a session, and gives back a clickable URL. The user just clicks it — no copy-paste needed.
OK, here are the instructions from sncro...
Got it! Let me create a session with that project key.
mcp__sncro__create_session — project_key: b7a20c0797d72596
Please paste this URL in your browser:
https://try.sncro.net/sncro/enable/fa940c...
Once you've done that, let me know and I'll start inspecting the page.
https://try.sncro.net/sncro/enable/fa940c...
Once you've done that, let me know and I'll start inspecting the page.
OK it's live
3
Claude is now looking at the user's actual browser. It grabs a page snapshot, checks console logs, and queries specific DOM elements — all in parallel. No screenshots, no back-and-forth.
mcp__sncro__get_page_snapshot
mcp__sncro__get_console_logs
No JS errors in the console. Let me inspect the scrolling container and the button.
mcp__sncro__query_element — main.container — styles: [overflow, overflow-y, height, max-height, position]
mcp__sncro__query_all — button
4
Found it. Claude read the computed CSS directly from the live DOM.
overflow: hidden on the container is clipping the page. No guessing, no "can you check the CSS?" — Claude sees the actual styles the browser computed.
Scrolling: The
Button: The "Refresh Scores" button exists. Let me check if it has an event listener issue.
main.container has overflow: hidden and a max-height: 773.84px — this is clipping the content and preventing scrolling.Button: The "Refresh Scores" button exists. Let me check if it has an event listener issue.
mcp__sncro__query_element — .refresh-btn — styles: [pointer-events, opacity, cursor, z-index]
The button calls
refreshScores() via an onclick attribute. No console errors were logged — the function might be defined but does nothing.5
The user clicks the broken button. Claude checks the console again and immediately sees the JS error. The error only appears after the click — sncro captured it in real time.
I just tried clicking the button. Nothing happened.
Let me check the console logs again after your click.
mcp__sncro__get_console_logs
There it is:
The function tries to use a variable called
ReferenceError: apiConfig is not defined at line 348 in refreshScores()The function tries to use a variable called
apiConfig that doesn't exist.6
Now the user wants to check mobile. Claude creates a separate session and offers a QR code. The user scans it with their phone. Within seconds, Claude is inspecting the actual mobile DOM at 320px.
It's also pretty crappy on mobile. Could you help with that too?
Sure! Let me create a separate session for your mobile device.
mcp__sncro__create_session — new session for mobile
Open this QR code URL on your desktop and scan it with your phone's camera:
https://try.sncro.net/sncro/enable/.../qrcode
https://try.sncro.net/sncro/enable/.../qrcode
OK the mobile is live.
mcp__sncro__get_page_snapshot — viewport: 320x493
mcp__sncro__query_element — main.container
mcp__sncro__query_element — .navbar
mcp__sncro__query_all — .score-card (limit: 3)
7
The full bug report. Five bugs found across desktop and mobile, with exact CSS properties and line numbers. In under 3 minutes. No screenshots. No "can you open DevTools?" No back-and-forth.
Summary of all issues across desktop and mobile:
| Issue | Cause |
|---|---|
| Can't scroll | overflow: hidden on .container |
| Refresh button broken | refreshScores() references undefined apiConfig |
| Cards off-screen on mobile | 3-column grid on 320px viewport, no responsive breakpoints |
| Navbar too tall on mobile | Nav links don't wrap, flex-wrap: nowrap |
| Excess padding on mobile | 32px padding on a 320px screen |
Want to try it yourself? This exact page is live at try.sncro.net with the same bugs. Or sign up and debug your own app.