Chrome Devtools
github/awesome-copilot
Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP.
A skill your agent uses when the user asks to "take a screenshot of a website", "navigate to a URL", "fill a form in the browser", "interact with Chrome", or when a chrome automation task is needed.
Install Chrome Devtools
The automated check flagged lines worth reading first. See the safety section below.
$ npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install aeroxy/chrome-devtools-cli chrome-devtools --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/aeroxy/chrome-devtools-cli.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skill/chrome-devtools .claude/skills/chrome-devtools && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "chrome-devtools" agent skill from https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtools into .claude/skills/chrome-devtools/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-devtools", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtoolsType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install aeroxy/chrome-devtools-cli chrome-devtools --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aeroxy/chrome-devtools-cli.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skill/chrome-devtools .agents/skills/chrome-devtools && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "chrome-devtools" agent skill from https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtools into .agents/skills/chrome-devtools/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-devtools", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install aeroxy/chrome-devtools-cli chrome-devtools --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aeroxy/chrome-devtools-cli.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skill/chrome-devtools .cursor/skills/chrome-devtools && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "chrome-devtools" agent skill from https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtools into .cursor/skills/chrome-devtools/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-devtools", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/aeroxy/chrome-devtools-cli.git --path skill/chrome-devtools--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install aeroxy/chrome-devtools-cli chrome-devtools --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aeroxy/chrome-devtools-cli.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skill/chrome-devtools .gemini/skills/chrome-devtools && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "chrome-devtools" agent skill from https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtools into .gemini/skills/chrome-devtools/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-devtools", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install aeroxy/chrome-devtools-cli chrome-devtoolsInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/aeroxy/chrome-devtools-cli.git skills-src && mkdir -p .github/skills && cp -r skills-src/skill/chrome-devtools .github/skills/chrome-devtools && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "chrome-devtools" agent skill from https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtools into .github/skills/chrome-devtools/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-devtools", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install aeroxy/chrome-devtools-cli chrome-devtools --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/aeroxy/chrome-devtools-cli.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skill/chrome-devtools .opencode/skills/chrome-devtools && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "chrome-devtools" agent skill from https://github.com/aeroxy/chrome-devtools-cli/tree/main/skill/chrome-devtools into .opencode/skills/chrome-devtools/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "chrome-devtools", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
chrome-devtools- GitHub stars
- 253
- Token cost
- ~9k tokens
- SKILL.md length
- 2,723 words
- Files
- 4
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
A skill your agent uses when the user asks to "take a screenshot of a website", "navigate to a URL", "fill a form in the browser", "interact with Chrome", or when a chrome automation task is needed.
- Works in 3 steps: Open Chrome (or Edge) → Go to chrome://inspect/#remote-debugging… → Enable the remote debugging server
- The user asks to take a screenshot of a website
- SKILL.md covers Prerequisites, ⚠️ Critical: How Page…, Core Capabilities and Standard Patterns, plus 1 more section
- Runs JavaScript scripts from its folder; reaches github.com and mail.google.com
What it does
Chrome Devtools is an agent skill from aeroxy/chrome-devtools-cli. Use when the user asks to "take a screenshot of a website", "navigate to a URL", "fill a form in the browser", "interact with Chrome", or when a chrome automation task is needed.
Its SKILL.md is about 9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files (for example `CUSTOM_SCRIPTING.md`, `examples/hn_adapter.js` and `examples/search_hn.js`).
It sits in Testing & QA, covering Browser testing and Browser automation. It works with Chrome DevTools. The repository describes itself as: A high-performance, developer and agent friendly CLI for interacting with Chrome via the DevTools Protocol (CDP).
When your agent uses it
- The user asks to take a screenshot of a website
- Navigate to a URL
- Fill a form in the browser
- Interact with Chrome
Example prompts
- “take a screenshot of a website”
- “navigate to a URL”
- “fill a form in the browser”
- “/chrome-devtools”
Requirements
- Node.js
Workflow steps
3 steps, taken from the first numbered list in SKILL.md.
- Open Chrome (or Edge)
- Go to chrome://inspect/#remote-debugging (Edge: edge://inspect/#remote-debugging)
- Enable the remote debugging server
What it can do on your machine
Read from SKILL.md and the folder at commit 746d5d6. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships script files (JavaScript), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
github.commail.google.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Chrome Devtools loads about 9k tokens when it runs. Until then it costs about 49 tokens; SKILL.md has 2,723 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check: warnings
The automated check found patterns that need a careful read before installing.
- WarningContains instruction-override wording (e.g. “without asking the user”)SKILL.md:636
*not** mean remote debugging is off, so do not tell the user to enable it.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 2,723 words (~9,000 tokens).
“A CLI that talks directly to your running Chrome via the DevTools Protocol.”
- name
- chrome-devtools
- user-invocable
- true
Files
SKILL.md and 3 other files in skill/chrome-devtools of aeroxy/chrome-devtools-cli.
- SKILL.md
- CUSTOM_SCRIPTING.md
- examples/hn_adapter.js
- examples/search_hn.js
Open the folder on GitHubat commit 746d5d6
Compare with similar skills
Chrome Devtools next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Chrome Devtools this skillaeroxy/chrome-devtools-cli | 253 | — | ~9k | Automated safety check: Warn | None | |
| Chrome Devtoolsgithub/awesome-copilot | 40k | 2 repos | ~1k | Automated safety check: Pass | MIT | |
| Browsingobra/superpowers-chrome | 356 | 1 repos | ~8k | Automated safety check: Pass | MIT | |
| Playwright Skilltech-leads-club/agent-skills | 7k | — | ~3.6k | Automated safety check: Pass | Custom licence | |
| AI Search Hubminsight-ai-info/AI-Search-Hub | 1.3k | — | ~1.3k | Automated safety check: Pass | None | |
| Superset Browser Controlsuperset-sh/superset | 15k | — | ~2.9k | Automated safety check: Pass | Custom licence |
Similar skills
- Official
Browsing
obra/superpowers-chrome
A skill your agent uses when you need direct browser control - teaches Chrome DevTools Protocol for controlling existing browser sessions, multi-tab management, form automation, and content…
Playwright Skill
tech-leads-club/agent-skills
Complete browser automation with Playwright. An agent skill from tech-leads-club/agent-skills.
AI Search Hub
minsight-ai-info/AI-Search-Hub
Run the AI Search Hub browser automation scripts for Yuanbao, LongCat, Doubao, Qwen, Gemini, Grok, and MiniMax.
Superset Browser Control
superset-sh/superset
Opens pages, takes screenshots, reads the console, clicks and types in the browser panes of a Superset workspace, with Browser Use as a fallback for other browsers.
Chrome Devtools
einverne/dotfiles
Browser automation, debugging, and performance analysis using Puppeteer CLI scripts.
Related
Works with
Questions about Chrome Devtools
What does Chrome Devtools do?
A skill your agent uses when the user asks to "take a screenshot of a website", "navigate to a URL", "fill a form in the browser", "interact with Chrome", or when a chrome automation task is needed. Chrome Devtools is an agent skill from aeroxy/chrome-devtools-cli. Use when the user asks to "take a screenshot of a website", "navigate to a URL", "fill a form in the browser", "interact with Chrome", or when a chrome automation task is needed.
When should I use Chrome Devtools?
Chrome Devtools fits situations like: the user asks to take a screenshot of a website; navigate to a URL; fill a form in the browser; interact with Chrome.
How do I install Chrome Devtools in Claude Code?
Run `npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a claude-code`. Or copy the skill folder (skill/chrome-devtools in aeroxy/chrome-devtools-cli) into .claude/skills/chrome-devtools in your project. Claude Code loads it when a task matches its description.
How do I install Chrome Devtools in Codex?
Run `npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a codex`. Or copy the skill folder (skill/chrome-devtools in aeroxy/chrome-devtools-cli) into .agents/skills/chrome-devtools in your project. Codex loads it when a task matches its description.
Can I use Chrome Devtools in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add aeroxy/chrome-devtools-cli --skill chrome-devtools -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/chrome-devtools, .gemini/skills/chrome-devtools, .github/skills/chrome-devtools and .opencode/skills/chrome-devtools in your project.
What does Chrome Devtools need to run?
Going by SKILL.md and its folder, Chrome Devtools needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Chrome Devtools access the network?
SKILL.md names 2 domains. In commands or code: github.com and mail.google.com; the agent is likely to contact these when it follows the instructions. This is read from the text; nothing was executed.
Is Chrome Devtools safe to install?
Our automated static check of SKILL.md flagged 1 warning(s): contains instruction-override wording (e.g. “without asking the user”). Read the flagged lines before installing; the check is not a guarantee either way.
What licence does Chrome Devtools use?
No licence was found for Chrome Devtools or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Chrome Devtools use?
About 9k tokens (SKILL.md is roughly 36k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Chrome Devtools?
Skills that share tags, products or a category with Chrome Devtools: Chrome Devtools (github/awesome-copilot, 40k stars), Browsing (obra/superpowers-chrome, 356 stars), Playwright Skill (tech-leads-club/agent-skills, 7k stars) and AI Search Hub (minsight-ai-info/AI-Search-Hub, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Chrome Devtools?
aeroxy (a GitHub user) maintains it in aeroxy/chrome-devtools-cli, which has 253 GitHub stars. The repository was last updated on October 6, 2026.
Source: aeroxy/chrome-devtools-cli on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.