chrome-devtools

Name: chrome-devtools
Author: github

14kinstalls4.6kforks

How to install chrome-devtools?

github/awesome-copilot/chrome-devtools

$npx -y skills add github/awesome-copilot --skill chrome-devtools

Installs into the current project.

Summary

Expert-level browser automation, debugging, and performance analysis using Chrome DevTools MCP. Use for interacting with web pages, capturing screenshots, analyzing network traffic, and profiling performance.

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools Agent
2
3	## Overview
4
5	A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the `chrome-devtools` MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.
6
7	## When to Use
8
9	Use this skill when:
10
11	- Browser Automation: Navigating pages, clicking elements, filling forms, and handling dialogs.
12	- Visual Inspection: Taking screenshots or text snapshots of web pages.
13	- Debugging: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.
14	- Performance Analysis: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.
15	- Emulation: Resizing the viewport or emulating network/CPU conditions.
16
17	## Tool Categories
18
19	### 1. Navigation & Page Management
20
21	- `new_page`: Open a new tab/page.
22	- `navigate_page`: Go to a specific URL, reload, or navigate history.
23	- `select_page`: Switch context between open pages.
24	- `list_pages`: See all open pages and their IDs.
25	- `close_page`: Close a specific page.
26	- `wait_for`: Wait for specific text to appear on the page.
27
28	### 2. Input & Interaction
29
30	- `click`: Click on an element (use `uid` from snapshot).
31	- `fill` / `fill_form`: Type text into inputs or fill multiple fields at once.
32	- `hover`: Move the mouse over an element.
33	- `press_key`: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").
34	- `drag`: Drag and drop elements.
35	- `handle_dialog`: Accept or dismiss browser alerts/prompts.
36	- `upload_file`: Upload a file through a file input.
37
38	### 3. Debugging & Inspection
39
40	- `take_snapshot`: Get a text-based accessibility tree (best for identifying elements).
41	- `take_screenshot`: Capture a visual representation of the page or a specific element.
42	- `list_console_messages` / `get_console_message`: Inspect the page's console output.
43	- `evaluate_script`: Run custom JavaScript in the page context.
44	- `list_network_requests` / `get_network_request`: Analyze network traffic and request details.
45
46	### 4. Emulation & Performance
47
48	- `resize_page`: Change the viewport dimensions.
49	- `emulate`: Throttling CPU/Network or emulating geolocation.
50	- `performance_start_trace`: Start recording a performance profile.
51	- `performance_stop_trace`: Stop recording and save the trace.
52	- `performance_analyze_insight`: Get detailed analysis from recorded performance data.
53
54	## Workflow Patterns
55
56	### Pattern A: Identifying Elements (Snapshot-First)
57
58	Always prefer `take_snapshot` over `take_screenshot` for finding elements. The snapshot provides `uid` values which are required by interaction tools.
59
60	```markdown
61	1. `take_snapshot` to get the current page structure.
62	2. Find the `uid` of the target element.
63	3. Use `click(uid=...)` or `fill(uid=..., value=...)`.
64	```
65
66	### Pattern B: Troubleshooting Errors
67
68	When a page is failing, check both console logs and network requests.
69
70	```markdown
71	1. `list_console_messages` to check for JavaScript errors.
72	2. `list_network_requests` to identify failed (4xx/5xx) resources.
73	3. `evaluate_script` to check the value of specific DOM elements or global variables.
74	```
75
76	### Pattern C: Performance Profiling
77
78	Identify why a page is slow.
79
80	```markdown
81	1. `performance_start_trace(reload=true, autoStop=true)`
82	2. Wait for the page to load/trace to finish.
83	3. `performance_analyze_insight` to find LCP issues or layout shifts.
84	```
85
86	## Best Practices
87
88	- Context Awareness: Always run `list_pages` and `select_page` if you are unsure which tab is currently active.
89	- Snapshots: Take a new snapshot after any major navigation or DOM change, as `uid` values may change.
90	- Timeouts: Use reasonable timeouts for `wait_for` to avoid hanging on slow-loading elements.
91	- Screenshots: Use `take_screenshot` sparingly for visual verification, but rely on `take_snapshot` for logic.

People who liked this also viewed

6 picks

Type

chrome-devtools

14kinstalls4.6kforks

View on GitHub

How to install chrome-devtools?

github/awesome-copilot/chrome-devtools

$npx -y skills add github/awesome-copilot --skill chrome-devtools

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Chrome DevTools Agent
2
3	## Overview
4
5	A specialized skill for controlling and inspecting a live Chrome browser. This skill leverages the `chrome-devtools` MCP server to perform a wide range of browser-related tasks, from simple navigation to complex performance profiling.
6
7	## When to Use
8
9	Use this skill when:
10
11	- Browser Automation: Navigating pages, clicking elements, filling forms, and handling dialogs.
12	- Visual Inspection: Taking screenshots or text snapshots of web pages.
13	- Debugging: Inspecting console messages, evaluating JavaScript in the page context, and analyzing network requests.
14	- Performance Analysis: Recording and analyzing performance traces to identify bottlenecks and Core Web Vital issues.
15	- Emulation: Resizing the viewport or emulating network/CPU conditions.
16
17	## Tool Categories
18
19	### 1. Navigation & Page Management
20
21	- `new_page`: Open a new tab/page.
22	- `navigate_page`: Go to a specific URL, reload, or navigate history.
23	- `select_page`: Switch context between open pages.
24	- `list_pages`: See all open pages and their IDs.
25	- `close_page`: Close a specific page.
26	- `wait_for`: Wait for specific text to appear on the page.
27
28	### 2. Input & Interaction
29
30	- `click`: Click on an element (use `uid` from snapshot).
31	- `fill` / `fill_form`: Type text into inputs or fill multiple fields at once.
32	- `hover`: Move the mouse over an element.
33	- `press_key`: Send keyboard shortcuts or special keys (e.g., "Enter", "Control+C").
34	- `drag`: Drag and drop elements.
35	- `handle_dialog`: Accept or dismiss browser alerts/prompts.
36	- `upload_file`: Upload a file through a file input.
37
38	### 3. Debugging & Inspection
39
40	- `take_snapshot`: Get a text-based accessibility tree (best for identifying elements).
41	- `take_screenshot`: Capture a visual representation of the page or a specific element.
42	- `list_console_messages` / `get_console_message`: Inspect the page's console output.
43	- `evaluate_script`: Run custom JavaScript in the page context.
44	- `list_network_requests` / `get_network_request`: Analyze network traffic and request details.
45
46	### 4. Emulation & Performance
47
48	- `resize_page`: Change the viewport dimensions.
49	- `emulate`: Throttling CPU/Network or emulating geolocation.
50	- `performance_start_trace`: Start recording a performance profile.
51	- `performance_stop_trace`: Stop recording and save the trace.
52	- `performance_analyze_insight`: Get detailed analysis from recorded performance data.
53
54	## Workflow Patterns
55
56	### Pattern A: Identifying Elements (Snapshot-First)
57
58	Always prefer `take_snapshot` over `take_screenshot` for finding elements. The snapshot provides `uid` values which are required by interaction tools.
59
60	```markdown
61	1. `take_snapshot` to get the current page structure.
62	2. Find the `uid` of the target element.
63	3. Use `click(uid=...)` or `fill(uid=..., value=...)`.
64	```
65
66	### Pattern B: Troubleshooting Errors
67
68	When a page is failing, check both console logs and network requests.
69
70	```markdown
71	1. `list_console_messages` to check for JavaScript errors.
72	2. `list_network_requests` to identify failed (4xx/5xx) resources.
73	3. `evaluate_script` to check the value of specific DOM elements or global variables.
74	```
75
76	### Pattern C: Performance Profiling
77
78	Identify why a page is slow.
79
80	```markdown
81	1. `performance_start_trace(reload=true, autoStop=true)`
82	2. Wait for the page to load/trace to finish.
83	3. `performance_analyze_insight` to find LCP issues or layout shifts.
84	```
85
86	## Best Practices
87
88	- Context Awareness: Always run `list_pages` and `select_page` if you are unsure which tab is currently active.
89	- Snapshots: Take a new snapshot after any major navigation or DOM change, as `uid` values may change.
90	- Timeouts: Use reasonable timeouts for `wait_for` to avoid hanging on slow-loading elements.
91	- Screenshots: Use `take_screenshot` sparingly for visual verification, but rely on `take_snapshot` for logic.

People who liked this also viewed

6 picks

Type