Browser Tools
Automates Chrome browsers using the DevTools Protocol to test, verify, and interact with web applications through agent-assisted scripts.
The source repository doesn't declare a license. Check its terms before reusing the code.
Key features
- Integrated screenshot capture and console log streaming for debugging
- Persistent browser profile management to maintain authentication states
- Interactive element selection with a visual overlay for precise DOM targeting
- Remote debugging and automation via Chrome DevTools Protocol
- Asynchronous JavaScript execution and DOM inspection within active tabs
Use cases
- Web scraping and data extraction from dynamic, JavaScript-heavy pages
- Automated end-to-end testing and verification of web application features
- Debugging authentication flows and session-related issues using cookie management
FAQ
What is the Browser Tools skill for Claude Code?
The Browser Tools skill is a specialized capability that allows Claude to control a Chrome browser via the DevTools Protocol. It enables the agent to navigate websites, execute JavaScript, capture screenshots, and interact with DOM elements to perform complex web-based tasks.
How does the interactive element picker work?
The 'browser-pick' script launches a visual overlay on the active browser tab. This allows you to manually select specific elements (buttons, inputs, divs) which Claude then analyzes to get precise CSS selectors and HTML attributes for further automation.
Can I maintain login sessions with this skill?
Yes. By using the 'browser-start --profile' command, Claude uses a persistent browser profile. This allows you to maintain authentication states, cookies, and session data across different interactions.
When should I use the Browser Tools skill?
You should use this skill whenever you need Claude to verify frontend changes, debug web application errors, automate repetitive browser tasks, scrape data from a page, or perform end-to-end testing on a local or remote web server.
How does this skill improve my development workflow?
It creates a closed-loop development environment where Claude can write code and immediately verify the results in a real browser. It can catch console errors, verify UI layouts via screenshots, and ensure that feature implementations work as expected without manual clicking.