跳到正文
cccskills
免费在 GitHub 公开

chrome-devtools-cli

Automate browser tasks from the terminal using the chrome-devtools-mcp CLI. Inspect page elements, click and fill forms, navigate tabs, capture screenshots, and investigate network requests, console messages, performance, and memory through shell commands.

中文简介正在准备中。当前显示英语简介。

原文查看原文说明

Use this to skill to write shell scripts or run shell commands to automate tasks in the browser or otherwise use Chrome DevTools via CLI.

实测评分 未实测

查看安装方法

适用场景

  • Automating form input and page navigation
  • Capturing page or element screenshots
  • Investigating network requests and console errors
  • Checking pages under different display and network conditions
  • Recording performance traces and running Lighthouse audits

包含的文件(2)

  • SKILL.md7.1 KB
  • references/installation.md879 B

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

The chrome-devtools-mcp CLI lets you interact with the browser from your terminal.

Setup

Note: If this is your very first time using the CLI, see references/installation.md for setup. Installation is a one-time prerequisite and is not part of the regular AI workflow.

AI Workflow

  1. Execute: Run tools directly (e.g., chrome-devtools list_pages). The background server starts implicitly; do not run start/status/stop before each use.
  2. Inspect: Use take_snapshot to get an element <uid>.
  3. Act: Use click, fill, etc. State persists across commands.

Snapshot example:

uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
  uid=1_1 heading "Example Domain" level="1"

Command Usage

chrome-devtools <tool> [arguments] [flags]

Use --help on any command. Output defaults to Markdown, use --output-format=json for JSON.

Input Automation (<uid> from snapshot)

chrome-devtools take_snapshot --help # Help message for commands, works for any command.
chrome-devtools take_snapshot # Take a text snapshot of the page to get UIDs for elements
chrome-devtools click "id" # Clicks on the provided element
chrome-devtools click "id" --dblClick true --includeSnapshot true # Double clicks and returns a snapshot
chrome-devtools drag "src" "dst" # Drag an element onto another element
chrome-devtools drag "src" "dst" --includeSnapshot true # Drag an element and return a snapshot
chrome-devtools fill "id" "text" # Type text into an input or select an option
chrome-devtools fill "id" "text" --includeSnapshot true # Fill an element and return a snapshot
chrome-devtools handle_dialog accept # Handle a browser dialog
chrome-devtools handle_dialog dismiss --promptText "hi" # Dismiss a dialog with prompt text
chrome-devtools hover "id" # Hover over the provided element
chrome-devtools hover "id" --includeSnapshot true # Hover over an element and return a snapshot
chrome-devtools press_key "Enter" # Press a key or key combination
chrome-devtools press_key "Control+A" --includeSnapshot true # Press a key and return a snapshot
chrome-devtools type_text "hello" # Type text using keyboard into a focused input
chrome-devtools type_text "hello" --submitKey "Enter" # Type text and press a submit key
chrome-devtools upload_file "id" "file.txt" # Upload a file through a provided element
chrome-devtools upload_file "id" "file.txt" --includeSnapshot true # Upload a file and return a snapshot

Navigation

chrome-devtools close_page 1 # Closes the page by its index
chrome-devtools list_pages # Get a list of pages open in the browser
chrome-devtools navigate_page --url "https://example.com" # Navigates the currently selected page to a URL
chrome-devtools navigate_page --type "reload" --ignoreCache true # Reload page ignoring cache
chrome-devtools navigate_page --url "https://example.com" --timeout 5000 # Navigate with a timeout
chrome-devtools navigate_page --handleBeforeUnload "accept" # Handle before unload dialog
chrome-devtools navigate_page --type "back" --initScript "foo()" # Navigate back and run an init script
chrome-devtools new_page "https://example.com" # Creates a new page
chrome-devtools new_page "https://example.com" --background true --timeout 5000 # Create new page in background
chrome-devtools new_page "https://example.com" --isolatedContext "ctx" # Create new page with isolated context
chrome-devtools select_page 1 # Select a page as a context for future tool calls
chrome-devtools select_page 1 --bringToFront true # Select a page and bring it to front

Emulation

chrome-devtools emulate --networkConditions "Offline" # Emulate network conditions
chrome-devtools emulate --cpuThrottlingRate 4 --geolocation "0,0" # Emulate CPU throttling and geolocation
chrome-devtools emulate --colorScheme "dark" --viewport "1920x1080" # Emulate color scheme and viewport
chrome-devtools emulate --userAgent "Mozilla/5.0..." # Emulate user agent
chrome-devtools resize_page 1920 1080 # Resizes the selected page's window

Performance

chrome-devtools performance_analyze_insight "1" "LCPBreakdown" # Get more details on a specific Performance Insight
chrome-devtools performance_start_trace true false # Starts a performance trace recording
chrome-devtools performance_start_trace true true --filePath t.gz # Start trace and save to a file
chrome-devtools performance_stop_trace # Stops the active performance trace
chrome-devtools performance_stop_trace --filePath "t.json" # Stop trace and save to a file
chrome-devtools take_memory_snapshot "./snap.heapsnapshot" # Capture a memory heapsnapshot

Network

chrome-devtools get_network_request # Get the currently selected network request
chrome-devtools get_network_request --reqid 1 --requestFilePath req.md # Get request by id and save to file
chrome-devtools get_network_request --responseFilePath res.md # Save response body to file
chrome-devtools list_network_requests # List all network requests
chrome-devtools list_network_requests --pageSize 50 --pageIdx 0 # List network requests with pagination
chrome-devtools list_network_requests --resourceTypes Fetch # Filter requests by resource type
chrome-devtools list_network_requests --includePreservedRequests true # Include preserved requests

Debugging & Inspection

chrome-devtools evaluate_script "() => document.title" # Evaluate a JavaScript function on the page
evaluate_script "(a) => a.innerText" --args 1_4 # Evaluate JS with UID arguments
chrome-devtools get_console_message 1 # Gets a console message by its ID
chrome-devtools lighthouse_audit --mode "navigation" # Run Lighthouse audit for navigation
chrome-devtools lighthouse_audit --mode "snapshot" --device "mobile" # Run Lighthouse audit for a snapshot on mobile
chrome-devtools lighthouse_audit --outputDirPath ./out # Run Lighthouse audit and save reports
chrome-devtools list_console_messages # List all console messages
chrome-devtools list_console_messages --pageSize 20 --pageIdx 1 # List console messages with pagination
chrome-devtools list_console_messages --types error --types info # Filter console messages by type
chrome-devtools list_console_messages --includePreservedMessages true # Include preserved messages
chrome-devtools take_screenshot # Take a screenshot of the page viewport
chrome-devtools take_screenshot --fullPage true --format "jpeg" --quality 80 # Take a full page screenshot as JPEG with quality
chrome-devtools take_screenshot --uid "id" --filePath "s.png" # Take a screenshot of an element
chrome-devtools take_snapshot # Take a text snapshot of the page from the a11y tree
chrome-devtools take_snapshot --verbose true --filePath "s.txt" # Take a verbose snapshot and save to file

Service Management

chrome-devtools start   # Start or restart chrome-devtools-mcp
chrome-devtools status  # Checks if chrome-devtools-mcp is running
chrome-devtools stop    # Stop chrome-devtools-mcp if any

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Automate website navigation, form entry, and clicks through a browser command line tool. Extract page text, capture screenshots, and compare page states to check interactions or test web app behavior across screen sizes.

中文简介正在准备中。当前显示英语简介。

  • Automate form entry and button clicks
  • Extract text from web pages
  • Save page screenshots and PDFs
humanlayer/humanlayer1.2万2026年10月23日 更新

Rewrite dense or ambiguous English into short, direct sentences using principles from ASD-STE100, a standard for clear technical English. It preserves facts and conditions, identifies writing issues, and shows the original and revised text side by side.

中文简介正在准备中。当前显示英语简介。

  • Clarifying English instructions for another agent
  • Simplifying English tool descriptions and error messages
  • Making English easier for non-native readers
humanlayer/humanlayer1.2万2026年10月23日 更新

Inspect GitHub pull requests, read review conversations, and investigate failed automated checks with dedicated scripts. Get consolidated status reports, unresolved discussion threads, and failing job or step logs, with full logs saved for further inspection.

中文简介正在准备中。当前显示英语简介。

  • Checking pull request status in one report
  • Reading unresolved review conversations
  • Investigating failed CI jobs and steps
humanlayer/humanlayer1.2万2026年10月23日 更新

Update release base versions for supported packages, keep matching version fields in sync, and verify generated versions. The workflow covers committing and pushing the changes, with guidance for release steps after merging.

中文简介正在准备中。当前显示英语简介。

  • Prepare a package version update for release
  • Synchronize version fields across related files
  • Verify generated versions before pushing
humanlayer/humanlayer1.2万2026年10月23日 更新

calldiff

免费

Compare function call structures across Git commits, branches, or working files to support code review. Display call trees and trace paths from an entry function to a target function, with support for 22 languages.

中文简介正在准备中。当前显示英语简介。

  • Compare function calls before and after a change
  • Review call structure changes between branches
  • Trace paths from an entry function to a target
humanlayer/humanlayer1.2万2026年10月23日 更新

ci-commit

免费

Review the changes made during a session and organize them into focused Git commits. The skill groups related files, writes messages explaining why changes were made, and stages specific files while excluding unrelated material.

中文简介正在准备中。当前显示英语简介。

  • Commit the work completed during a session
  • Split several changes into focused commits
  • Write commit messages that explain the reasons for changes
humanlayer/humanlayer1.2万2026年10月23日 更新

查看 humanlayer 的全部技能

报告此技能的问题