Web Browser
FreeAutomate web page interactions with Chrome DevTools.
Free · Opens the source repo
What Web Browser does
The Web Browser skill allows users to automate and interact with web pages using Chrome or Chromium through the Chrome DevTools Protocol (CDP). This skill is particularly useful for developers and testers who need to navigate, click, fill forms, inspect content, and debug console or network activity in a real browser environment. It supports both headless and headed modes, making it versatile for various use cases, from automated testing to manual debugging.
Users can start Chrome in a headless mode, which is the recommended approach for most automated tasks, as it minimizes disruptions and allows for efficient navigation, evaluation of JavaScript, taking screenshots, and logging activities. The skill provides a range of scripts to perform common tasks, such as navigating to URLs, emulating mobile devices, evaluating JavaScript expressions, and taking screenshots of web pages in different formats.
For those who need to interact with the browser visually, the headed mode can be employed. This mode is essential for tasks that require user interaction, such as selecting elements on a page or handling cookie consent dialogs. The skill also includes functionality to log network responses and errors, which can be invaluable for debugging and performance analysis.
Overall, this skill is designed for developers and quality assurance professionals who require a robust tool to automate browser interactions and streamline their web testing processes. Its integration with the Chrome DevTools Protocol ensures that users can leverage the full capabilities of the Chrome browser in their automated workflows.
When to use it
Use this skill when you need to automate interactions with web pages, such as testing or scraping data.
When not to use it
This skill is not suitable for tasks that require extensive user interface manipulation in a non-browser environment.
What you can build with it
Automated Testing
Run automated tests on web applications by scripting interactions and capturing results.
Web Scraping
Extract data from websites by navigating and evaluating JavaScript on the loaded pages.
Mobile Device Emulation
Test responsive designs by emulating mobile devices and taking screenshots for verification.
How to install Web Browser
View source1. Install with the skills CLI
npx skills add mitsuhiko/agent-stuff/web-browser --agent claude-code2. Or install it manually
Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.
Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs
Inside SKILL.md
Written by mitsuhikoWeb Browser Skill
Minimal CDP tools for collaborative site exploration.
Start Chrome (Prefer Headless)
./scripts/start.js --headless # Recommended: isolated reusable profile
./scripts/start.js --headless --profile # Headless with a copy of your profile
./scripts/start.js # Visible browser window when needed
./scripts/start.js --headless --reset-profile # Clear cached profile before launch
Starts Chrome with remote debugging (default port :9222). Agents should use --headless by default because it is less disruptive and supports navigation, evaluation, screenshots, emulation, and logging. User extensions are disabled for headless launches; a copied profile still provides its cookies and other browser state, but extension-based features are unavailable. Headed launches continue to load extensions normally. Use headed mode only when a person needs to see or interact with the browser, such as for pick.js, manual authentication, or debugging a headless-specific difference.
The start script only reuses a running browser when its profile and launch settings match. Close the running skill browser before switching between headless and headed mode.
Profile behavior:
- Default mode uses:
~/.cache/agent-web/browser/fresh-profile --profilemode uses:~/.cache/agent-web/browser/profile-copy- The skill does not attach to your live Chrome profile directly
- If
:9222is already used by an unknown instance, start will fail instead of reusing it
If Chrome is installed in a non-standard location, set:
BROWSER_BIN=/path/to/chrome ./scripts/start.js --headless
Optional debug endpoint override:
BROWSER_DEBUG_PORT=9333 ./scripts/start.js --headless
Navigate
./scripts/nav.js https://example.com
./scripts/nav.js https://example.com --new
Navigate current tab or open new tab.
Device Emulation (Mobile)
./scripts/emulate.js --list
./scripts/emulate.js iphone-14
./scripts/emulate.js pixel-7 --landscape
./scripts/emulate.js --reset
Set an active device emulation preference (viewport, DPR, touch, UA) for browser skill commands. Use --reset to clear.
Commands like nav.js, eval.js, pick.js, dismiss-cookies.js, and screenshot.js automatically apply the active preference.
Evaluate JavaScript
./scripts/eval.js 'document.title'
./scripts/eval.js 'document.querySelectorAll("a").length'
./scripts/eval.js 'document.querySelector("button")?.click(); "clicked"'
./scripts/eval.js 'await Promise.resolve(document.title)'
./scripts/eval.js 'JSON.stringify(Array.from(document.querySelectorAll("a")).map(a => ({ text: a.textContent.trim(), href: a.href })).filter(link => !link.href.startsWith("https://")))'
Execute JavaScript in the active tab. Input can be an expression or statement list; the console-style completion value is printed and promises/top-level await are awaited. Be careful with string escaping, best to use single quotes.
Screenshot
./scripts/screenshot.js
./scripts/screenshot.js --full-page
./scripts/screenshot.js --device iphone-14
./scripts/screenshot.js --device pixel-7 --full-page
Takes a screenshot and returns a temp file path.
- Default: current viewport
--full-page: captures full document height--device <preset>: temporary mobile emulation for that screenshot only
Pick Elements
./scripts/pick.js "Click the submit button"
Interactive element picker. Click to select, Cmd/Ctrl+Click for multi-select, Enter to finish. This requires headed Chrome; launch start.js without --headless.
Dismiss Cookie Dialogs
./scripts/dismiss-cookies.js # Accept cookies
./scripts/dismiss-cookies.js --reject # Reject cookies (where possible)
Automatically dismisses EU cookie consent dialogs.
Run after navigating to a page:
./scripts/nav.js https://example.com && ./scripts/dismiss-cookies.js
Quick Mobile Debug Flow
./scripts/start.js --headless
./scripts/nav.js https://example.com
./scripts/emulate.js iphone-14
./scripts/nav.js https://example.com # reload with mobile UA
./scripts/dismiss-cookies.js
./scripts/screenshot.js --full-page
Background Logging (Console + Errors + Network)
Automatically started by start.js and writes JSONL logs to:
~/.cache/agent-web/logs/YYYY-MM-DD/<targetId>.jsonl
Manually start:
./scripts/watch.js
Tail latest log:
./scripts/logs-tail.js # dump current log and exit
./scripts/logs-tail.js --follow # keep following
Summarize network responses:
./scripts/net-summary.js
Frequently asked questions about Web Browser
Similar skills
Spring Boot Testing
Master testing techniques for Spring Boot 4 applications.
GitHub Issues
Manage GitHub issues efficiently with MCP tools.
Geofeed Tuner
Optimize your IP geolocation feeds in CSV format.
Batch Files
Master Windows batch scripting for automation and task management.
Adobe Illustrator Scripting
Automate your Illustrator workflows with ExtendScript.
Plugin Structure
Create and organize Claude Code plugins effectively.