skills.rest
maplin-co
maplin-coOFFICIAL
Explore all skills by this author →
GitHub

chrome-devtools

Control and inspect a live Chrome browser via the Chrome DevTools Protocol.

Updated Jan 9, 2026
Search Tags:#automation#debugging#web development#devtools#browser control#chrome
One-click install
npx skills add https://github.com/maplin-co/ai-course --skill chrome-devtools-maplin-co
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: chrome-devtools
Source: https://github.com/maplin-co/ai-course/tree/main/.opencode/skill/chrome-devtools
Command: npx skills add https://github.com/maplin-co/ai-course --skill chrome-devtools-maplin-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a powerful interface to control and inspect a live Chrome browser, enabling detailed debugging, performance analysis, and browser automation tasks.

Core Features & Use Cases

  • Browser Control: Navigate pages, open new tabs, and manage existing ones.
  • Element Interaction: Click, fill text fields, and hover over elements using unique identifiers.
  • Inspection & Debugging: Capture screenshots and evaluate JavaScript within the page context.
  • Use Case: Debugging a web application by inspecting its accessibility tree, navigating to a specific page, filling out a form, and then taking a screenshot to document the state.

Quick Start

Use the chrome-devtools skill to take a snapshot of the current page to get element UIDs.

Frequently Asked Questions about chrome-devtools

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

FAQPage Schema
How do I debug a web application by inspecting the live Chrome browser?▼

You can debug a web application by controlling a live Chrome browser via the Chrome DevTools Protocol. This allows you to inspect the accessibility tree, navigate pages, and capture screenshots to document the application state.

What is the best way to automate browser interactions and fill out web forms?▼

Automating browser interactions is done by taking a page snapshot to retrieve element UIDs, then using those identifiers to deterministically click, hover, and fill text fields within the live browser environment.

Can I evaluate JavaScript and inspect network requests during browser automation?▼

Yes, you can evaluate JavaScript directly within the page context and inspect network requests. These features support detailed performance analysis and debugging alongside standard browser control operations.

How do I navigate pages and manage tabs when controlling Chrome?▼

You navigate pages and manage tabs by sending commands through the Chrome DevTools Protocol. This interface supports opening new tabs, managing existing ones, and executing deterministic page navigation.

Do I need specific element identifiers to click and interact with web pages?▼

Yes, you need unique element identifiers called UIDs to click, hover, and fill text fields. You retrieve these UIDs by taking a snapshot of the current page before executing interaction tasks.

Related Skills

Explore More Software Engineering Skills→
anbeimeanbeime
5.0k

chrome-automation

Automate Google Chrome browser control via Chrome DevTools Protocol.

Community
Advanced
rodrigorjsfrodrigorjsf
1

browser-testing-with-devtools

Inspect DOM, analyze console logs, monitor network requests, and capture screenshots via Chrome DevTools MCP.

Community
Advanced
finasfinas
58

browser-cli

Control Chrome sessions via DevTools Protocol for browser automation and debugging.

Community
Intermediate
qwibitaiqwibitai
30.5k

agent-browser

Launch and control a browser for automated web interactions.

Official
Intermediate