skills.rest
lzc0901
lzc0901COMMUNITY
Explore all skills by this author →
GitHub

chrome-devtools

Automate Chrome browser sessions for navigation, network inspection, and performance tracing.

Updated Aug 27, 2026
Search Tags:#debugging#screenshots#web-testing#chrome-devtools#browser-automation#network-analysis#performance-analysis
One-click install
npx skills add https://github.com/lzc0901/vibe_coding_template --skill chrome-devtools-lzc0901
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/lzc0901/vibe_coding_template/tree/main/skills/design-visualization/chrome-devtools
Command: npx skills add https://github.com/lzc0901/vibe_coding_template --skill chrome-devtools-lzc0901

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables programmatic control of a live Chrome browser for testing, debugging, and performance analysis, reducing repetitive manual work.

Core Features & Use Cases

  • Automated browser control: open pages, navigate, click elements, fill forms, and handle dialogs.
  • Debugging and inspection: capture console logs, evaluate scripts, and inspect network activity.
  • Performance profiling: start/stop traces, analyze results, and identify bottlenecks.
  • Visual verification: take screenshots and compare visual states across pages.
  • Use Case: Run automated tests on a web application, collect performance traces, and generate a report.

Quick Start

  • Ensure the Chrome DevTools MCP server is running and accessible.
  • Create a new page and navigate to a URL, then capture a screenshot and inspect network activity.
  • Example workflow: new_page; navigate_page(url='https://example.com'); take_screenshot; list_network_requests; performance_start_trace; performance_stop_trace.

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 tasks and take screenshots for web testing?▼

Automate browser tasks by controlling a live Chrome session to navigate pages, take screenshots, and handle dialogs for web testing. This reduces repetitive manual work by programmatically managing browser actions and capturing visual states across pages.

Can I inspect network activity and capture console logs during browser automation?▼

Yes, you can inspect network activity and capture console logs during browser automation. The tool evaluates scripts and lists network requests within a live Chrome session to assist with debugging and detailed inspection of web applications.

Do I need a Chrome DevTools MCP setup to run performance profiling?▼

Yes, a Chrome DevTools MCP setup is required to run performance profiling. You must have the MCP server running and accessible to start and stop traces, analyze results, and identify performance bottlenecks across web pages.

What is the best way to identify performance bottlenecks in a web application?▼

The best way to identify performance bottlenecks is using performance profiling to start and stop traces on a live Chrome session. This analyzes results directly during automated navigation and network inspection to pinpoint application slowdowns.

How to run automated tests on a web application and generate a performance report?▼

Run automated tests by creating a new page, navigating to a URL, taking a screenshot, and listing network requests. Follow this with performance_start_trace and performance_stop_trace to collect data and generate a comprehensive performance report.

Related Skills

Explore More Software Engineering Skills→
SternrasslerSternrassler
1

Chrome DevTools MCP Skill

Automate browser interactions and testing via the Chrome DevTools MCP Server.

Official
Advanced
dropseeddropseed
1.0k

plain-optimize

Analyze observer request traces to identify and fix web performance bottlenecks.

Official
Intermediate
xxihxxih
1

browser

Automate Chrome navigation, JavaScript execution, screenshots, and DOM selection via the Chrome DevTools Protocol on port 9222.

Community
Intermediate
beel-collabbeel-collab
1

chrome-devtools

Automate browser interactions and debugging via Chrome DevTools MCP.

Community
Advanced