skills.rest
Cogni-AI-OU
Cogni-AI-OUOFFICIAL
Explore all skills by this author ā†’
Websiteš•@Cogni_AI_OUGitHub

chrome-devtools

Automate Chrome DevTools inspection, interaction, and performance tracing for web pages.

3|1|Updated Apr 12, 2026
Search Tags:#browser automation#mcp#chrome devtools#performance profiling#core web vitals#network inspection#dom debugging
One-click install
npx skills add https://github.com/Cogni-AI-OU/cogni-ai-agent-skills --skill chrome-devtools-cogni-ai-ou
Or copy as Structured Prompt for Agentā–¼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/Cogni-AI-OU/cogni-ai-agent-skills/tree/main/chrome-devtools
Command: npx skills add https://github.com/Cogni-AI-OU/cogni-ai-agent-skills --skill chrome-devtools-cogni-ai-ou

SYSTEM DOCUMENTATION & REQUIREMENTS

šŸ’” This Skill includes references (resource) components.

What problem does it solve?

It helps you accurately debug and optimize a live web page by inspecting the DOM, console, and network behavior and by running performance traces to pinpoint slow rendering and Core Web Vitals issues.

Core Features & Use Cases

  • Snapshot-first element identification: Use the accessibility snapshot to reliably obtain uid values for deterministic interactions like clicking and filling forms.
  • Troubleshooting across signals: Cross-check failures by reviewing console messages and network requests to find JavaScript errors and failing resources.
  • Performance profiling: Record traces and analyze insights to locate layout shifts and LCP bottlenecks for performance remediation.

Quick Start

Use the chrome-devtools skill to navigate to https://example.com, take a snapshot to identify the target element, and then click the element whose text contains "Learn more".

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I debug DOM elements in a single-page application using Chrome DevTools?ā–¼

Debug DOM elements in a single-page application by taking an accessibility snapshot to obtain reliable uid values, enabling deterministic interactions like clicking and filling forms for accurate DOM debugging.

How do I analyze Core Web Vitals and find LCP bottlenecks in a web page?ā–¼

Analyze Core Web Vitals by starting and stopping a performance trace to record web page behavior, then evaluate the resulting insights to pinpoint LCP bottlenecks and layout shift root causes for remediation.

Can I automate network inspection and console triage for complex web apps?ā–¼

Automate network inspection and console triage by cross-checking console messages and network requests to find JavaScript errors and failing resources across complex single-page applications.

What's the best way to automate form interactions in the browser without flaky selectors?ā–¼

Automate form interactions reliably by using a snapshot-first workflow to identify target elements via the accessibility tree, ensuring deterministic actions without relying on flaky CSS selectors.

Does browser automation with DevTools MCP support multi-page navigation workflows?ā–¼

Browser automation with DevTools MCP supports multi-page navigation by requiring a snapshot-first workflow using list_pages and select_page commands to identify and interact with target pages.

Why does my web page layout shift, and how can I trace the root cause?ā–¼

Trace layout shift root causes by running a DevTools performance trace to record rendering behavior, then analyze the generated insights to locate the specific elements causing the shifts.

Related Skills

Explore More Software Engineering Skillsā†’
eric-sabeeric-sabe
1

chrome-devtools

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

Community
Intermediate
david-driscolldavid-driscoll
1

web-perf

Analyze Core Web Vitals and trace insights from Chrome DevTools performance recordings.

Community
Advanced
yanochka11yanochka11

webapp-testing

Automate Playwright browser tests for local web applications.

Community
Intermediate
lem0n4idlem0n4id

chrome-devtools

Automate browser navigation, element interactions, and performance profiling via Chrome DevTools MCP.

Community
Advanced