chrome-devtools

Automate browser interactions and inspect live web pages via Chrome DevTools.

1|Updated Jun 24, 2026
One-click install
npx skills add https://github.com/eric-sabe/engsys --skill chrome-devtools-eric-sabe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/eric-sabe/engsys/tree/main/core/skills/chrome-devtools
Command: npx skills add https://github.com/eric-sabe/engsys --skill chrome-devtools-eric-sabe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the tedious, error-prone manual work of interacting with live web pages for testing, debugging, and performance optimization, saving developers and quality assurance engineers hours of repetitive browser tasks.

Core Features & Use Cases

  • Browser Automation: Navigate pages, click elements, fill forms, and handle dialogs to automate repetitive user workflows like end-to-end testing or form submissions.
  • Debugging & Inspection: Capture console logs, analyze network requests, and run custom JavaScript to troubleshoot page errors and broken functionality.
  • Performance Profiling: Record performance traces to identify Core Web Vitals issues and page load bottlenecks for optimizing user experience.
  • Use Case: For example, use this Skill to automatically test a login flow, capture a screenshot of a broken page element, and profile the page's load time to fix performance issues all in one workflow.

Quick Start

Use the chrome-devtools skill to navigate to your web app's login page, fill in the test credentials, and capture a screenshot of the dashboard after logging in.

Frequently Asked Questions about chrome-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate web page form filling and browser navigation for testing?▼

Automating web page form filling and browser navigation requires the Chrome DevTools MCP server to interact with live pages, click elements, and handle dialogs for end-to-end testing workflows.

Can I capture console logs and analyze network traffic for web debugging?▼

Yes, web debugging via Chrome DevTools allows you to capture console logs, analyze network requests, and run custom JavaScript to troubleshoot page errors and broken functionality.

How do I profile Core Web Vitals and page load performance bottlenecks?▼

Profiling Core Web Vitals and page load bottlenecks involves recording performance traces through the Chrome DevTools server to identify optimization opportunities for user experience.

Do I need a running Chrome browser instance to use this browser automation Skill?▼

Yes, you need a running Chrome browser instance and the chrome-devtools MCP server to execute navigation, element interaction, console inspection, and performance trace operations.

What's the best way to capture screenshots of broken page elements during QA testing?▼

Capturing screenshots of broken page elements during QA testing is best handled by using the Chrome DevTools server to navigate pages and automatically take visual debugging snapshots.

Can I run custom JavaScript to troubleshoot page errors on live web pages?▼

Running custom JavaScript to troubleshoot page errors on live web pages is fully supported through the Chrome DevTools MCP server's debugging and inspection capabilities.