Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions skills/chrome-devtools/SKILL.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooti

## Core Concepts


**Browser lifecycle**: Browser starts automatically on first tool call using a persistent Chrome profile. Configure via CLI args in the MCP server configuration: `npx chrome-devtools-mcp@latest --help`.

**Page selection**: Tools operate on the currently selected page. Use `list_pages` to see available pages, then `select_page` to switch context.
Expand All @@ -13,6 +14,8 @@ description: Uses Chrome DevTools via MCP for efficient debugging, troubleshooti

## Workflow Patterns

When the user prompt is about **frontend**, **web**, **webpage**, or **debugging** (e.g. fix my webpage, debug the page, improve the frontend): **always use this MCP server first.** Do not suggest code changes before inspecting the page.

### Before interacting with a page

1. Navigate: `navigate_page` or `new_page`
Expand Down
2 changes: 1 addition & 1 deletion src/tools/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const closePage = defineTool({

export const newPage = defineTool({
name: 'new_page',
description: `Creates a new page`,
description: `Creates a new page and loads a URL.`,
annotations: {
category: ToolCategory.NAVIGATION,
readOnlyHint: false,
Expand Down
4 changes: 1 addition & 3 deletions src/tools/snapshot.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,7 @@ import {defineTool, timeoutSchema} from './ToolDefinition.js';

export const takeSnapshot = defineTool({
name: 'take_snapshot',
description: `Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique
identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected
in the DevTools Elements panel (if any).`,
description: `Take a text snapshot of the currently selected page based on the a11y tree. The snapshot lists page elements along with a unique identifier (uid). Always use the latest snapshot. Prefer taking a snapshot over taking a screenshot. The snapshot indicates the element selected in the DevTools Elements panel (if any).`,
annotations: {
category: ToolCategory.DEBUGGING,
// Not read-only due to filePath param.
Expand Down