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

Ready to run

npx skills add https://github.com/maplin-co/ai-course --skill chrome-devtools-maplin-co

💬 Prompt for ChatGPT / Claude Chat▼

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.