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

1. Execute: Run tools directly. If you don't know the target page's ID, run chrome-devtools list_pages to find it. The background server starts implicitly; do not run start/status/stop before each use.
2. Inspect: Use chrome-devtools take_snapshot <pageId> to get an element <uid>.
3. Act: Use chrome-devtools click <pageId> <uid>, chrome-devtools fill <pageId> <uid> <value>, 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"

Permissions & File Access

By default, the CLI has full filesystem access (--allowUnrestrictedPaths=true), allowing file-saving parameters (--filePath, --outputDirPath) and upload_file to access files anywhere on the system. Pass --allowUnrestrictedPaths=false if you want to restrict file access to the OS temp directory.

Command Usage

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

• Required arguments are passed positionally; optional arguments use flags.
• Use --help on any command for usage details.
• Output defaults to plain Markdown-like text; pass --output-format=json for JSON.

Input Automation ( from snapshot)

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