What is the Live Debug skill used for?

It is a specialized capability for Claude Code to automate Chrome browser interactions for debugging the live application at home.st44.no.

Can this skill capture visual evidence of bugs?

Yes, it can take high-resolution screenshots and record GIFs of user flows to document exactly how a bug occurs in the production environment.

Can I monitor API calls and console errors?

Absolutely. The skill includes tools to read network requests, filter by URL patterns, and capture console messages to identify failing backend calls or script errors.

Does it support authenticated sessions?

Yes, the skill can navigate to login pages, interact with form fields, and utilize existing browser sessions to debug authenticated areas of the site.

How do I find specific elements on the page?

You can use the 'find' tool to locate elements using natural language descriptions or use 'read_page' to view the full interactive accessibility tree of the site.

Live Production Debugger

Name: Live Production Debugger
Author: tidemann

bytidemann

Browser Automation

Debugs and inspects the live production environment of home.st44.no using automated Chrome browser tools.

About

The Live Debug skill provides a powerful suite of browser automation tools specifically tailored for troubleshooting the production environment at home.st44.no. It enables developers to capture visual state through screenshots and GIFs, inspect the accessibility tree, monitor live network requests, and execute JavaScript directly within the browser context. This skill is essential for reproducing production-only bugs, verifying deployments, and gaining a deep understanding of current UI behavior and data flow without leaving the Claude environment.

Key Features

Custom JavaScript execution for state and component analysis
Automated Chrome browser navigation and interaction
Natural language element searching and accessibility tree inspection
0 GitHub stars
Visual bug tracking with screenshots and GIF recording
Real-time monitoring of network requests and console logs

Use Cases

Verifying feature parity and successful deployment after shipping code
Analyzing live user flows and network activity to identify performance bottlenecks
Investigating and documenting visual discrepancies or UI bugs in production

About

Key Features

Custom JavaScript execution for state and component analysis
Automated Chrome browser navigation and interaction
Natural language element searching and accessibility tree inspection
0 GitHub stars
Visual bug tracking with screenshots and GIF recording
Real-time monitoring of network requests and console logs

Use Cases

Verifying feature parity and successful deployment after shipping code
Analyzing live user flows and network activity to identify performance bottlenecks
Investigating and documenting visual discrepancies or UI bugs in production