chrome-devtools-cli

安装量: 77
排名: #10137

安装

npx skills add https://github.com/chromedevtools/chrome-devtools-mcp --skill chrome-devtools-cli
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
Execute
Run tools directly (e.g.,
chrome-devtools list_pages
). The background server starts implicitly;
do not
run
start
/
status
/
stop
before each use.
Inspect
Use
take_snapshot
to get an element
.
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 ( 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

返回排行榜