chrome-devtools

Automate browser control and debugging via the Chrome DevTools Protocol.

3|2|Updated Mar 23, 2026

Search Tags:#automation #performance #debugging #devtools #chrome #network #browser

Ready to run

npx skills add https://github.com/wesleyegberto/software-engineering-skills --skill chrome-devtools-wesleyegberto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/wesleyegberto/software-engineering-skills/tree/main/plugins/frontend/skills/chrome-devtools
Command: npx skills add https://github.com/wesleyegberto/software-engineering-skills --skill chrome-devtools-wesleyegberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Automates browser control for repetitive testing, debugging, and performance analysis, reducing manual effort and human error when working with web pages.

Core Features & Use Cases

Browser automation: open pages, navigate, interact with elements, and manage dialogs.
Debugging & inspection: capture console messages, inspect network activity, and evaluate scripts in the page context.
Performance profiling: start and stop traces, analyze bottlenecks, and optimize Core Web Vitals across sessions.

Quick Start

Open a Chrome DevTools MCP-enabled session, navigate to your target page, and start collecting performance and debugging data.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema

How do I automate browser navigation and interaction for web testing?▼

Browser automation for web testing is executed by connecting to the Chrome DevTools Protocol to navigate pages, interact with elements, and manage dialogs automatically. This reduces manual effort when working with repetitive web page tasks.

How do I capture network activity and console logs during web debugging?▼

Network activity and console logs are captured during web debugging by leveraging the Chrome DevTools Protocol to inspect network requests and evaluate scripts in the page context. This automates the collection of debugging data across web apps.

Can I profile Core Web Vitals and performance bottlenecks using Chrome DevTools?▼

Core Web Vitals and performance bottlenecks can be profiled using Chrome DevTools by starting and stopping traces across web sessions. This captures performance data to analyze and optimize web page loading and rendering issues.

Does browser automation for performance profiling require a specific environment setup?▼

Browser automation for performance profiling requires a Chrome DevTools MCP-enabled session to connect to the target page. Once the session is active, you can immediately start collecting traces and debugging data without additional dependencies.

What is the best way to inspect network requests and evaluate scripts in a page context?▼

The best way to inspect network requests and evaluate scripts in a page context is using the Chrome DevTools Protocol to directly monitor activity and execute scripts. This enables automated visual inspection and debugging of web pages.

Why automate visual inspection and screenshot capture for web pages?▼

Automating visual inspection and screenshot capture for web pages eliminates human error during repetitive testing. By using Chrome DevTools to capture screenshots automatically, you can consistently track visual changes and debug web apps across sessions.