One of the best tricks Claude Code has on the server side is its ability to write its own debugging log entries, read those logs, and then iterate. It’s like watching a coder that never gets tired.
On the frontend? Not so much—at least not yet. Maybe someday Claude Code will be able to spin up a virtual browser, peek at logs, and even chew on screenshots. Until then, we’re stuck doing the grunt work ourselves.
When I first started with Claude Code, trying to describe frontend tweaks was maddening. Prompts like, “Make the submit button line up with the cancel button” sometimes worked, sometimes didn’t.
Screenshots make it a whole lot easier. Annotated screenshots—big red arrows, circles, whatever—make it clearer still. Skip the annotations and Claude Code will happily go “fix” things that weren’t broken in the first place.
Yes, it’s clunky. GitHub Copilot will let me just paste screenshots. Claude Code only reads files, so I have to capture, annotate, save, and then hand over the path. Too many steps, but it’s the best workflow I’ve got.
Claude Code devours logs, but manually copy-pasting browser logs into it gets old fast.
The fix? We rigged up a little reporting helper: app.report(<string>);
. It shoots a string to the backend (logger.[php|py]
) and into our standard app logs. Suddenly Claude Code can drop its own breadcrumbs, tell me to refresh, read the logs, and iterate without me babysitting. Huge win.
Bonus: this also lets us capture frontend errors directly inside our domain. We’ve used Rollbar before, but in healthcare—where firewalls are tighter than a drum—Rollbar often gets blocked. Our in-house reporting works everywhere our app does.