chrome-devtools
Expert-level browser automation, debugging, and performance analysis
by githubFree
Description
chrome-devtools is an agent skill from the github/awesome-copilot collection for controlling and inspecting a live Chrome browser through the chrome-devtools MCP server. It covers browser automation, visual inspection, debugging and performance analysis. The tools are grouped into four categories, covering navigation and page management, interaction, debugging and performance profiling, across more than 25 commands. The skill uses a snapshot-first workflow: it takes a text snapshot of the page, which gives each element a unique identifier, so the agent can target elements reliably, and it uses screenshots when a visual check is needed. For automation it can navigate, click elements, fill in forms and handle dialogs. For debugging it reads console messages, evaluates JavaScript in the page and analyzes network requests. For performance it records and analyzes traces to find bottlenecks and Core Web Vitals issues, and it can emulate viewport sizes and network or CPU conditions. The skill is useful for testing a web application, reproducing a bug, or measuring how a page performs. It drives a real browser, so it should be pointed only at sites and accounts the user is allowed to use, and it should not be used to submit forms or change data on a live site without the user's approval. The skill is installed with the skills CLI from the github/awesome-copilot repository. Its skills.sh page showed about 15.2K installs, with Gen Agent Trust Hub and Socket passing and Snyk showing a warning at the time of the scan.…
Highlights
- Browser automation through Chrome DevTools MCP
- Snapshot-first targeting with element identifiers
- Console, JavaScript and network debugging
- Performance traces and Core Web Vitals
- Viewport and network or CPU emulation
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate chrome-devtools.
People also visit
control-ui
Build or adapt a local browser/CDP harness to drive and inspect a web, IDE
memory-leak-debugging
Diagnoses and resolves memory leaks in JavaScript/Node.js applications
troubleshooting
Uses Chrome DevTools MCP and documentation to troubleshoot connection
chrome-devtools FAQ
What can it do in the browser?
Navigate, click, fill forms, handle dialogs, take screenshots, read console messages, evaluate JavaScript, analyze network requests and record performance traces.
What is the snapshot-first workflow?
A text snapshot of the page gives elements unique identifiers, so the agent can target them reliably before it acts.
Can it emulate slow connections?
Yes. It can emulate network and CPU conditions and resize the viewport.
Should it act on live sites?
Only sites and accounts the user is allowed to use, and changes to live data should be approved first.
How do I install it?
Run npx skills add https://github.com/github/awesome-copilot --skill chrome-devtools.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Warn. A Warn or Fail is worth reading before you install.
What are the best chrome-devtools alternatives?
Popular alternatives to chrome-devtools include chrome-devtools, control-ui and diagnosing-bugs. See all chrome-devtools alternatives