chrome-cdp-cli 2.1.0 β 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +380 -955
- package/dist/cli/EnhancedCLIInterface.js +48 -38
- package/dist/cli/OutputFormatter.js +77 -75
- package/dist/cli/OutputManager.js +20 -20
- package/dist/client/index.js +0 -1
- package/dist/handlers/EvaluateScriptHandler.js +74 -270
- package/package.json +1 -1
- package/dist/client/ProxyClient.js +0 -278
- package/dist/handlers/RestartProxyHandler.js +0 -97
- package/dist/proxy/ProxyManager.js +0 -270
- package/dist/proxy/index.js +0 -60
- package/dist/proxy/server/CDPEventMonitor.js +0 -263
- package/dist/proxy/server/CDPProxyServer.js +0 -441
- package/dist/proxy/server/CommandExecutionService.js +0 -297
- package/dist/proxy/server/ConnectionPool.js +0 -437
- package/dist/proxy/server/FileSystemSecurity.js +0 -358
- package/dist/proxy/server/HealthMonitor.js +0 -242
- package/dist/proxy/server/MessageStore.js +0 -291
- package/dist/proxy/server/PerformanceMonitor.js +0 -277
- package/dist/proxy/server/ProxyAPIServer.js +0 -1125
- package/dist/proxy/server/SecurityManager.js +0 -337
- package/dist/proxy/server/WSProxy.js +0 -468
- package/dist/proxy/types/ProxyTypes.js +0 -2
package/README.md
CHANGED
|
@@ -1,938 +1,408 @@
|
|
|
1
|
-
# Chrome DevTools CLI
|
|
1
|
+
# CDP β Chrome DevTools Protocol CLI
|
|
2
2
|
|
|
3
|
-
A command-line tool for browser automation via Chrome DevTools Protocol
|
|
3
|
+
A command-line tool for browser automation via Chrome DevTools Protocol. Designed for developers and AI assistants who need reliable, scriptable browser control with dedicated commands for common tasks and unlimited flexibility through JavaScript execution.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- π§ **Advanced Configuration Management**: YAML/JSON config files with profiles and precedence handling
|
|
10
|
-
- βοΈ **Enhanced Argument Parser**: Consistent option handling with validation and schema support
|
|
11
|
-
- π **Comprehensive Help System**: Contextual help, advanced topics, and detailed examples
|
|
12
|
-
- π― **Standardized Output**: JSON/text formats with quiet/verbose modes and custom templates
|
|
13
|
-
- π **Command Aliasing**: Built-in and custom aliases for efficient workflows
|
|
14
|
-
- π§© **Plugin Architecture**: Extensible system for custom commands and functionality
|
|
15
|
-
- π₯οΈ **Interactive Mode**: Command prompt with tab completion and session management
|
|
16
|
-
- β‘ **Performance Optimizations**: Configuration caching and connection reuse
|
|
17
|
-
|
|
18
|
-
## π€ Why This Tool Exists
|
|
19
|
-
|
|
20
|
-
**The honest story:** I started using `chrome-devtools-mcp` like everyone else. It worked great... until it didn't. One day it just stopped working - Cursor showed 26 tools available, everything looked normal, but every single tool call threw errors. Classic black box problem: you can't debug what you can't see inside.
|
|
21
|
-
|
|
22
|
-
**The MCP reality check:** Model Context Protocol sounded promising, but let's be real - it's not exactly taking the world by storm. Meanwhile, Anthropic introduced the SKILL concept, which actually makes sense for how LLMs work. And what pairs perfectly with Skills? Good old-fashioned command-line tools. They're debuggable, efficient, and you can actually see what's happening when things go wrong.
|
|
23
|
-
|
|
24
|
-
**The pragmatic solution:** Instead of wrestling with mysterious MCP failures, why not build a CLI that just works? One that you can debug, extend, and actually understand. Plus, when your AI assistant needs to automate a browser, it can just write the command and execute it - no black boxes, no mysterious failures, just straightforward automation.
|
|
25
|
-
|
|
26
|
-
**The result:** A tool that's both powerful enough for complex automation and simple enough that you (and your AI assistant) can actually use it without pulling your hair out.
|
|
27
|
-
|
|
28
|
-
## Implementation Status
|
|
29
|
-
|
|
30
|
-
### β
Fully Implemented Features
|
|
31
|
-
|
|
32
|
-
- π **Connection Management**: Connect to local or remote Chrome instances with auto-discovery
|
|
33
|
-
- β‘ **JavaScript Execution**: Execute JavaScript code in browser context with full async support and file execution
|
|
34
|
-
- πΈ **Visual Capture**: Take screenshots and capture complete DOM snapshots with layout information
|
|
35
|
-
- π **Console Monitoring**: Real-time console message capture with filtering and storage
|
|
36
|
-
- π **Network Monitoring**: Real-time network request/response monitoring with comprehensive filtering
|
|
37
|
-
- π±οΈ **Element Interaction**: Complete native interaction commands (click, hover, fill, drag, press_key, upload_file, wait_for, handle_dialog)
|
|
38
|
-
- π **Proxy Management**: Restart proxy server to refresh stale console and network logs
|
|
39
|
-
- π§ **CLI Interface**: Full command-line interface with argument parsing and routing
|
|
40
|
-
- π οΈ **IDE Integration**: Install Cursor commands and Claude skills with directory validation and --force option
|
|
41
|
-
- π¦ **Build System**: Complete TypeScript build pipeline with testing framework
|
|
42
|
-
|
|
43
|
-
### π§ Available via JavaScript Execution
|
|
44
|
-
|
|
45
|
-
For maximum flexibility, many advanced features are available through the `eval` command. This approach is particularly powerful for AI assistants and complex automation scenarios:
|
|
46
|
-
|
|
47
|
-
- π **Page Navigation**: `eval "window.location.href = 'https://example.com'"`
|
|
48
|
-
- π **Performance Data**: `eval "performance.now()"` or `eval "performance.getEntriesByType('navigation')"`
|
|
49
|
-
- π± **User Agent**: `eval "navigator.userAgent"`
|
|
50
|
-
- π **Network Requests**: `eval "fetch('/api').then(r => r.json())"`
|
|
51
|
-
|
|
52
|
-
**Why JavaScript execution is powerful:**
|
|
53
|
-
|
|
54
|
-
1. **Universal capability**: Any browser API, any complexity level, any scenario
|
|
55
|
-
2. **Rapid prototyping**: Write β Execute β See Results β Refine
|
|
56
|
-
3. **AI-friendly**: Perfect for AI assistants that excel at JavaScript
|
|
57
|
-
4. **No waiting**: Accomplish tasks immediately without waiting for feature implementations
|
|
58
|
-
5. **Maximum flexibility**: Handle edge cases and custom scenarios easily
|
|
59
|
-
|
|
60
|
-
**This provides both dedicated commands for common tasks and unlimited flexibility through JavaScript execution.**
|
|
61
|
-
|
|
62
|
-
### π― IDE Integration - Built for Modern Development
|
|
63
|
-
|
|
64
|
-
**Why we support Cursor Commands & Claude Skills:**
|
|
65
|
-
|
|
66
|
-
This tool integrates seamlessly with modern AI-powered development environments. The IDE integrations (`install-cursor-command` and `install-claude-skill`) bring browser automation directly into your workflow:
|
|
67
|
-
|
|
68
|
-
- **π Seamless Workflow**: AI assistants can write and execute browser automation scripts directly in your IDE
|
|
69
|
-
- **π§ Natural Integration**: JavaScript execution means AI can accomplish any browser task
|
|
70
|
-
- **β‘ Instant Execution**: Write scripts β execute via commands β see results β refine in real-time
|
|
71
|
-
- **π Context-Aware**: AI understands your project context and generates relevant automation
|
|
72
|
-
- **π― Natural Language β Automation**: Ask "click the submit button" β AI generates and executes the solution
|
|
73
|
-
- **π€ Perfect for AI Assistants**: Claude and Cursor can use browser automation as part of their toolset
|
|
5
|
+
```bash
|
|
6
|
+
npm install -g chrome-cdp-cli
|
|
7
|
+
cdp eval "document.title"
|
|
8
|
+
```
|
|
74
9
|
|
|
75
|
-
|
|
10
|
+
## Why This Tool Exists
|
|
76
11
|
|
|
77
|
-
|
|
12
|
+
**The honest story:** I started using `chrome-devtools-mcp` like everyone else. It worked greatβ¦ until it didn't. One day it just stopped working β Cursor showed 26 tools available, everything looked normal, but every tool call threw errors. Classic black box problem: you can't debug what you can't see inside.
|
|
78
13
|
|
|
79
|
-
|
|
80
|
-
- π **Performance Analysis**: Native performance profiling and metrics collection
|
|
81
|
-
- π± **Device Emulation**: Native device and network condition simulation
|
|
82
|
-
- π **Output Formatting**: Advanced JSON/text formatting with quiet/verbose modes
|
|
14
|
+
Meanwhile, Anthropic introduced the SKILL concept, which makes much more sense for how LLMs work. And what pairs perfectly with Skills? Good old-fashioned command-line tools. They're debuggable, composable, and you can actually see what's happening when things go wrong.
|
|
83
15
|
|
|
84
|
-
|
|
16
|
+
**The result:** A tool that's both powerful enough for complex automation and simple enough that you (and your AI assistant) can use it without pulling your hair out.
|
|
85
17
|
|
|
86
|
-
|
|
87
|
-
- β‘ **JavaScript Execution**: Execute JavaScript code in browser context with full async support
|
|
88
|
-
- πΈ **Visual Capture**: Take screenshots and capture HTML content
|
|
89
|
-
- π **Monitoring**: Monitor console messages and network requests in real-time
|
|
90
|
-
- π±οΈ **Element Interaction**: Complete native interaction commands (click, hover, fill, drag, press_key, upload_file, wait_for, handle_dialog)
|
|
91
|
-
- π **Form Automation**: Single field and batch form filling with comprehensive options
|
|
92
|
-
- π **Proxy Management**: Restart proxy server to refresh stale logs
|
|
93
|
-
- π§ **Flexible Output**: Support for JSON and human-readable text output formats
|
|
94
|
-
- π§ **Eval Workarounds**: Many advanced features available through JavaScript execution
|
|
18
|
+
---
|
|
95
19
|
|
|
96
20
|
## Installation
|
|
97
21
|
|
|
98
|
-
### From npm (Recommended)
|
|
99
|
-
|
|
100
22
|
```bash
|
|
23
|
+
# Install globally
|
|
101
24
|
npm install -g chrome-cdp-cli
|
|
102
|
-
```
|
|
103
25
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
```bash
|
|
107
|
-
# Run directly with npx
|
|
26
|
+
# Use without installing
|
|
108
27
|
npx chrome-cdp-cli eval "document.title"
|
|
109
|
-
|
|
110
|
-
# All commands work with npx
|
|
111
|
-
npx chrome-cdp-cli eval "Math.PI * 2"
|
|
112
|
-
npx chrome-cdp-cli eval --file script.js
|
|
113
|
-
npx chrome-cdp-cli --help
|
|
114
28
|
```
|
|
115
29
|
|
|
116
|
-
|
|
30
|
+
After installation, both `cdp` and `chrome-cdp-cli` are available as entry points:
|
|
117
31
|
|
|
118
32
|
```bash
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
npm install
|
|
122
|
-
npm run build
|
|
123
|
-
npm link
|
|
33
|
+
cdp eval "document.title"
|
|
34
|
+
chrome-cdp-cli eval "document.title" # backward-compatible alias
|
|
124
35
|
```
|
|
125
36
|
|
|
37
|
+
---
|
|
38
|
+
|
|
126
39
|
## Prerequisites
|
|
127
40
|
|
|
128
|
-
- **Node.js
|
|
129
|
-
- **Chrome
|
|
130
|
-
- **Chrome DevTools**: Must be enabled with remote debugging
|
|
41
|
+
- **Node.js** 18.0.0 or higher
|
|
42
|
+
- **Chrome** with remote debugging enabled
|
|
131
43
|
|
|
132
|
-
### Starting Chrome with
|
|
44
|
+
### Starting Chrome with Remote Debugging
|
|
133
45
|
|
|
134
|
-
|
|
46
|
+
**From Chrome 136, `--user-data-dir` is required** alongside `--remote-debugging-port`. See [Chrome's announcement](https://developer.chrome.com/blog/remote-debugging-port).
|
|
135
47
|
|
|
136
48
|
```bash
|
|
137
|
-
#
|
|
138
|
-
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
|
|
139
|
-
|
|
140
|
-
# Custom port
|
|
141
|
-
chrome --remote-debugging-port=9223 --user-data-dir=/tmp/chrome-debug-profile
|
|
49
|
+
# Standard launch (use a dedicated profile directory)
|
|
50
|
+
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
|
|
142
51
|
|
|
143
|
-
# Headless
|
|
144
|
-
chrome --headless --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
|
|
52
|
+
# Headless
|
|
53
|
+
chrome --headless --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
|
|
145
54
|
|
|
146
|
-
#
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
# macOS example with full path and logging
|
|
150
|
-
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/Users/$USER/chrome-profile-debug > /tmp/chrome.log 2>&1 &
|
|
55
|
+
# macOS full path
|
|
56
|
+
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
|
|
57
|
+
--remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug &
|
|
151
58
|
```
|
|
152
59
|
|
|
153
|
-
|
|
154
|
-
- **Always use `--user-data-dir`**: This is **required for security**. Chrome will not enable the debugging port without a specified user data directory to prevent unauthorized access to your default profile
|
|
155
|
-
- **Choose a dedicated directory**: Use a path like `/tmp/chrome-debug-profile` or `/Users/$USER/chrome-profile-debug`
|
|
156
|
-
- **Security requirement**: Without `--user-data-dir`, Chrome will refuse to enable remote debugging to protect your default browser profile
|
|
157
|
-
|
|
158
|
-
For more details, see the [Chrome Remote Debugging documentation](https://developer.chrome.com/blog/remote-debugging-port).
|
|
60
|
+
---
|
|
159
61
|
|
|
160
62
|
## Quick Start
|
|
161
63
|
|
|
162
64
|
```bash
|
|
163
|
-
#
|
|
164
|
-
|
|
65
|
+
# Execute JavaScript in the browser
|
|
66
|
+
cdp eval "document.title"
|
|
67
|
+
cdp eval "window.location.href = 'https://example.com'"
|
|
165
68
|
|
|
166
|
-
#
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
# Navigate to a website (via eval)
|
|
170
|
-
chrome-cdp-cli eval "window.location.href = 'https://example.com'"
|
|
69
|
+
# Take a screenshot (saves to file)
|
|
70
|
+
cdp screenshot --filename page.png
|
|
171
71
|
|
|
172
|
-
#
|
|
173
|
-
|
|
72
|
+
# Screenshot to stdout (pipe to another tool)
|
|
73
|
+
cdp screenshot | feh -
|
|
174
74
|
|
|
175
|
-
# Capture DOM snapshot
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
# Element interactions
|
|
179
|
-
chrome-cdp-cli click "#submit-button"
|
|
180
|
-
chrome-cdp-cli hover ".menu-item"
|
|
181
|
-
chrome-cdp-cli fill "#email" "user@example.com"
|
|
75
|
+
# Capture DOM snapshot
|
|
76
|
+
cdp dom --filename dom.txt
|
|
182
77
|
|
|
183
|
-
#
|
|
184
|
-
|
|
185
|
-
chrome-cdp-cli press_key "Enter"
|
|
186
|
-
chrome-cdp-cli press_key "a" --modifiers Ctrl
|
|
187
|
-
chrome-cdp-cli upload_file "input[type='file']" "./document.pdf"
|
|
188
|
-
chrome-cdp-cli wait_for "#loading" --condition hidden
|
|
189
|
-
chrome-cdp-cli handle_dialog accept
|
|
78
|
+
# Follow console logs in real time (like tail -f)
|
|
79
|
+
cdp log -f
|
|
190
80
|
|
|
191
|
-
#
|
|
192
|
-
|
|
81
|
+
# Follow network requests in real time
|
|
82
|
+
cdp network -f
|
|
193
83
|
|
|
194
|
-
#
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
# Restart proxy server when logs are stale
|
|
199
|
-
chrome-cdp-cli restart
|
|
200
|
-
|
|
201
|
-
# Install IDE integrations
|
|
202
|
-
chrome-cdp-cli install_cursor_command
|
|
203
|
-
chrome-cdp-cli install_claude_skill --skill-type personal
|
|
204
|
-
|
|
205
|
-
# Get help for all commands
|
|
206
|
-
chrome-cdp-cli --help
|
|
207
|
-
|
|
208
|
-
# Get help for a specific command
|
|
209
|
-
chrome-cdp-cli eval --help
|
|
84
|
+
# Element interactions
|
|
85
|
+
cdp click "#submit-button"
|
|
86
|
+
cdp fill "#email" "user@example.com"
|
|
87
|
+
cdp hover ".menu-item"
|
|
210
88
|
```
|
|
211
89
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
### Connection Options
|
|
90
|
+
---
|
|
215
91
|
|
|
216
|
-
|
|
92
|
+
## Global Options
|
|
217
93
|
|
|
218
|
-
|
|
219
|
-
- `--port <port>`: DevTools port (default: 9222)
|
|
220
|
-
- `--timeout <ms>`: Command timeout in milliseconds (default: 30000)
|
|
94
|
+
All commands accept these options, which can appear **before or after** the command name:
|
|
221
95
|
|
|
222
|
-
|
|
96
|
+
| Option | Short | Default | Description |
|
|
97
|
+
|--------|-------|---------|-------------|
|
|
98
|
+
| `--host` | `-h` | `localhost` | Chrome host |
|
|
99
|
+
| `--port` | `-p` | `9222` | DevTools port |
|
|
100
|
+
| `--format` | `-f` | `text` | Output format: `json` or `text` |
|
|
101
|
+
| `--timeout` | `-t` | `30000` | Command timeout (ms) |
|
|
102
|
+
| `--target-index` | `-i` | β | Select Chrome page by index (1-based) |
|
|
103
|
+
| `--verbose` | `-v` | `false` | Enable verbose logging |
|
|
104
|
+
| `--quiet` | `-q` | `false` | Suppress non-essential output |
|
|
105
|
+
| `--debug` | `-d` | `false` | Enable debug logging |
|
|
106
|
+
| `--config` | `-c` | β | Configuration file path |
|
|
223
107
|
|
|
224
|
-
|
|
225
|
-
- `--quiet`: Suppress non-essential output
|
|
226
|
-
- `--verbose`: Enable detailed logging
|
|
108
|
+
### Selecting a Chrome Page
|
|
227
109
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
### Connection Options
|
|
231
|
-
|
|
232
|
-
All commands support these connection options:
|
|
233
|
-
|
|
234
|
-
- `--host <host>`: Chrome host (default: localhost)
|
|
235
|
-
- `--port <port>`: DevTools port (default: 9222)
|
|
236
|
-
- `--timeout <ms>`: Command timeout in milliseconds (default: 30000)
|
|
110
|
+
When multiple Chrome pages are open, CDP shows an interactive selector:
|
|
237
111
|
|
|
238
|
-
### Output Options
|
|
239
|
-
|
|
240
|
-
- `--format <format>`: Output format - 'json' or 'text' (default: text)
|
|
241
|
-
- `--quiet`: Suppress non-essential output
|
|
242
|
-
- `--verbose`: Enable detailed logging
|
|
243
|
-
|
|
244
|
-
### β
Implemented Commands
|
|
245
|
-
|
|
246
|
-
#### JavaScript Execution
|
|
247
|
-
```bash
|
|
248
|
-
# Execute JavaScript expression
|
|
249
|
-
chrome-cdp-cli eval "console.log('Hello World')"
|
|
250
|
-
|
|
251
|
-
# Execute from file
|
|
252
|
-
chrome-cdp-cli eval --file script.js
|
|
253
|
-
|
|
254
|
-
# Execute with timeout
|
|
255
|
-
chrome-cdp-cli eval "await new Promise(r => setTimeout(r, 5000))" --timeout 10000
|
|
256
|
-
|
|
257
|
-
# Using npx (no installation required)
|
|
258
|
-
npx chrome-cdp-cli eval "document.title"
|
|
259
|
-
npx chrome-cdp-cli eval --file script.js
|
|
260
112
|
```
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
# DOM snapshot with complete layout information (default: text format)
|
|
271
|
-
chrome-cdp-cli snapshot --filename dom-snapshot.txt
|
|
272
|
-
|
|
273
|
-
# Custom dimensions
|
|
274
|
-
chrome-cdp-cli screenshot --width 1920 --height 1080 --filename custom.png
|
|
113
|
+
Select a Chrome page (ββ navigate, Enter select, q quit)
|
|
114
|
+
ββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
115
|
+
β― [1] My App
|
|
116
|
+
http://localhost:3000/
|
|
117
|
+
[2] GitHub
|
|
118
|
+
https://github.com/
|
|
119
|
+
ββββββββββββββββββββββββββββββββββββββββββββββββββββββ
|
|
120
|
+
Tip: skip this prompt with cdp -i <number> <command>
|
|
121
|
+
or close other tabs until only one remains.
|
|
275
122
|
```
|
|
276
123
|
|
|
277
|
-
|
|
278
|
-
```bash
|
|
279
|
-
# Click on an element using CSS selector
|
|
280
|
-
chrome-cdp-cli click "#submit-button"
|
|
281
|
-
|
|
282
|
-
# Click with custom timeout
|
|
283
|
-
chrome-cdp-cli click ".slow-loading-button" --timeout 10000
|
|
284
|
-
|
|
285
|
-
# Click without waiting for element (fail immediately if not found)
|
|
286
|
-
chrome-cdp-cli click "#optional-element" --no-wait
|
|
287
|
-
|
|
288
|
-
# Hover over an element
|
|
289
|
-
chrome-cdp-cli hover "#menu-item"
|
|
290
|
-
|
|
291
|
-
# Hover over a dropdown trigger
|
|
292
|
-
chrome-cdp-cli hover ".dropdown-trigger"
|
|
293
|
-
|
|
294
|
-
# Fill a single form field
|
|
295
|
-
chrome-cdp-cli fill "#username" "john@example.com"
|
|
124
|
+
Use arrow keys to navigate, Enter to select, `q`/ESC/Ctrl+C to cancel (exits cleanly with code 0).
|
|
296
125
|
|
|
297
|
-
|
|
298
|
-
chrome-cdp-cli fill "input[type='password']" "secret123"
|
|
299
|
-
|
|
300
|
-
# Fill a textarea
|
|
301
|
-
chrome-cdp-cli fill "#message" "Hello, this is a test message"
|
|
302
|
-
|
|
303
|
-
# Select an option in a dropdown (by value or text)
|
|
304
|
-
chrome-cdp-cli fill "#country" "US"
|
|
305
|
-
chrome-cdp-cli fill "#country" "United States"
|
|
306
|
-
|
|
307
|
-
# Fill without clearing existing content
|
|
308
|
-
chrome-cdp-cli fill "#notes" " - Additional note" --no-clear
|
|
309
|
-
|
|
310
|
-
# Fill multiple form fields in batch
|
|
311
|
-
chrome-cdp-cli fill_form --fields '[
|
|
312
|
-
{"selector":"#username","value":"john@example.com"},
|
|
313
|
-
{"selector":"#password","value":"secret123"},
|
|
314
|
-
{"selector":"#country","value":"United States"}
|
|
315
|
-
]'
|
|
316
|
-
|
|
317
|
-
# Fill form from JSON file
|
|
318
|
-
echo '[
|
|
319
|
-
{"selector":"#firstName","value":"John"},
|
|
320
|
-
{"selector":"#lastName","value":"Doe"},
|
|
321
|
-
{"selector":"#email","value":"john.doe@example.com"}
|
|
322
|
-
]' > form-data.json
|
|
323
|
-
chrome-cdp-cli fill_form --fields-file form-data.json
|
|
324
|
-
|
|
325
|
-
# Fill form with custom options
|
|
326
|
-
chrome-cdp-cli fill_form --fields '[
|
|
327
|
-
{"selector":"#notes","value":"Additional information"}
|
|
328
|
-
]' --no-clear --timeout 10000 --stop-on-error
|
|
329
|
-
|
|
330
|
-
# Fill form and continue on errors (default behavior)
|
|
331
|
-
chrome-cdp-cli fill_form --fields '[
|
|
332
|
-
{"selector":"#field1","value":"value1"},
|
|
333
|
-
{"selector":"#nonexistent","value":"value2"},
|
|
334
|
-
{"selector":"#field3","value":"value3"}
|
|
335
|
-
]' --continue-on-error
|
|
336
|
-
```
|
|
126
|
+
To skip the prompt, pass `-i` before or after the command:
|
|
337
127
|
|
|
338
|
-
#### Advanced Interactions
|
|
339
128
|
```bash
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
# Drag with custom timeout
|
|
344
|
-
chrome-cdp-cli drag ".file-item" ".upload-area" --timeout 10000
|
|
345
|
-
|
|
346
|
-
# Keyboard input simulation
|
|
347
|
-
chrome-cdp-cli press_key "Enter"
|
|
348
|
-
chrome-cdp-cli press_key "Escape"
|
|
349
|
-
chrome-cdp-cli press_key "Tab"
|
|
350
|
-
|
|
351
|
-
# Keyboard input with modifiers
|
|
352
|
-
chrome-cdp-cli press_key "a" --modifiers Ctrl # Ctrl+A (Select All)
|
|
353
|
-
chrome-cdp-cli press_key "s" --modifiers Ctrl # Ctrl+S (Save)
|
|
354
|
-
chrome-cdp-cli press_key "c" --modifiers Ctrl,Shift # Ctrl+Shift+C
|
|
355
|
-
|
|
356
|
-
# Target specific elements for keyboard input
|
|
357
|
-
chrome-cdp-cli press_key "Enter" --selector "#search-input"
|
|
358
|
-
chrome-cdp-cli press_key "ArrowDown" --selector "#dropdown"
|
|
359
|
-
|
|
360
|
-
# File upload to file input elements
|
|
361
|
-
chrome-cdp-cli upload_file "input[type='file']" "./document.pdf"
|
|
362
|
-
chrome-cdp-cli upload_file "#file-input" "/path/to/image.jpg"
|
|
363
|
-
chrome-cdp-cli upload_file ".upload-field" "./test-data.csv"
|
|
364
|
-
|
|
365
|
-
# Wait for elements to appear or meet conditions
|
|
366
|
-
chrome-cdp-cli wait_for "#loading-spinner" # Wait for element to exist
|
|
367
|
-
chrome-cdp-cli wait_for "#modal" --condition visible # Wait for element to be visible
|
|
368
|
-
chrome-cdp-cli wait_for "#loading" --condition hidden # Wait for element to be hidden
|
|
369
|
-
chrome-cdp-cli wait_for "#submit-btn" --condition enabled # Wait for element to be enabled
|
|
370
|
-
chrome-cdp-cli wait_for "#processing-btn" --condition disabled # Wait for element to be disabled
|
|
371
|
-
chrome-cdp-cli wait_for "#slow-element" --timeout 30000 # Custom timeout
|
|
372
|
-
|
|
373
|
-
# Handle browser dialogs (alert, confirm, prompt)
|
|
374
|
-
chrome-cdp-cli handle_dialog accept # Accept dialog
|
|
375
|
-
chrome-cdp-cli handle_dialog dismiss # Dismiss dialog
|
|
376
|
-
chrome-cdp-cli handle_dialog accept --text "John Doe" # Handle prompt with text input
|
|
377
|
-
chrome-cdp-cli handle_dialog accept --text "" # Handle prompt with empty input
|
|
378
|
-
chrome-cdp-cli handle_dialog accept --timeout 10000 # Wait for dialog to appear
|
|
129
|
+
cdp -i 1 eval "document.title"
|
|
130
|
+
cdp eval "document.title" -i 1 # also works
|
|
379
131
|
```
|
|
380
132
|
|
|
381
|
-
|
|
382
|
-
```bash
|
|
383
|
-
# Get latest console message
|
|
384
|
-
chrome-cdp-cli console --latest
|
|
133
|
+
---
|
|
385
134
|
|
|
386
|
-
|
|
387
|
-
chrome-cdp-cli console
|
|
135
|
+
## Command Reference
|
|
388
136
|
|
|
389
|
-
|
|
390
|
-
chrome-cdp-cli console --types error,warn
|
|
137
|
+
### `eval` β JavaScript Execution
|
|
391
138
|
|
|
392
|
-
|
|
393
|
-
chrome-cdp-cli console --textPattern "error|warning"
|
|
139
|
+
Execute any JavaScript in the browser context.
|
|
394
140
|
|
|
395
|
-
|
|
396
|
-
|
|
141
|
+
```bash
|
|
142
|
+
cdp eval "document.title"
|
|
143
|
+
cdp eval "window.location.href"
|
|
144
|
+
cdp eval --file script.js
|
|
145
|
+
cdp eval "await fetch('/api').then(r => r.json())"
|
|
146
|
+
cdp eval "await new Promise(r => setTimeout(r, 5000))" --timeout 10000
|
|
397
147
|
```
|
|
398
148
|
|
|
399
|
-
|
|
149
|
+
### `screenshot` β Take Screenshots
|
|
400
150
|
|
|
401
151
|
```bash
|
|
402
|
-
#
|
|
403
|
-
|
|
152
|
+
# Save to file
|
|
153
|
+
cdp screenshot --filename page.png
|
|
154
|
+
cdp screenshot --filename page.jpg --image-format jpeg --quality 85
|
|
155
|
+
cdp screenshot --full-page --filename fullpage.png
|
|
156
|
+
cdp screenshot --width 1920 --height 1080 --filename custom.png
|
|
404
157
|
|
|
405
|
-
#
|
|
406
|
-
|
|
158
|
+
# Output raw binary to stdout (pipe to another tool)
|
|
159
|
+
cdp screenshot > page.png
|
|
160
|
+
cdp screenshot | open -f -a Preview # macOS
|
|
161
|
+
cdp screenshot | display # Linux (ImageMagick)
|
|
162
|
+
cdp -i 2 screenshot | feh - # second tab, pipe to feh
|
|
407
163
|
```
|
|
408
164
|
|
|
409
|
-
|
|
165
|
+
> **Note:** `--image-format` controls the image encoding (`png`/`jpeg`). The global `--format` flag (`json`/`text`) does not apply to screenshot output.
|
|
410
166
|
|
|
411
|
-
|
|
412
|
-
```bash
|
|
413
|
-
# Get latest network request
|
|
414
|
-
chrome-cdp-cli network --latest
|
|
167
|
+
> **Warning:** Running `cdp screenshot` without `--filename` in a terminal will print binary data to your terminal. The CLI detects this and shows an error instead.
|
|
415
168
|
|
|
416
|
-
|
|
417
|
-
chrome-cdp-cli network
|
|
169
|
+
### `dom` β DOM Snapshot (alias: `snapshot`)
|
|
418
170
|
|
|
419
|
-
|
|
420
|
-
chrome-cdp-cli network --filter '{"methods":["POST"],"statusCodes":[200,201]}'
|
|
421
|
-
```
|
|
171
|
+
Capture a full DOM snapshot with layout information.
|
|
422
172
|
|
|
423
|
-
#### Proxy Management
|
|
424
173
|
```bash
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
# Force restart even if proxy is healthy
|
|
429
|
-
chrome-cdp-cli restart --force
|
|
174
|
+
cdp dom --filename dom.txt
|
|
175
|
+
cdp dom --filename dom.json --format json
|
|
176
|
+
cdp snapshot --filename dom.txt # alias
|
|
430
177
|
```
|
|
431
178
|
|
|
432
|
-
|
|
433
|
-
```bash
|
|
434
|
-
# Install Cursor command (creates .cursor/commands/cdp-cli.md)
|
|
435
|
-
chrome-cdp-cli install_cursor_command
|
|
436
|
-
|
|
437
|
-
# Install Cursor command with --force (bypasses directory validation)
|
|
438
|
-
chrome-cdp-cli install_cursor_command --force
|
|
439
|
-
|
|
440
|
-
# Install Claude skill for project (creates .claude/skills/cdp-cli/SKILL.md)
|
|
441
|
-
chrome-cdp-cli install_claude_skill
|
|
442
|
-
|
|
443
|
-
# Install Claude skill for personal use (creates ~/.claude/skills/cdp-cli/SKILL.md)
|
|
444
|
-
chrome-cdp-cli install_claude_skill --skill-type personal
|
|
179
|
+
### `log` β Follow Console Messages (alias: `console`)
|
|
445
180
|
|
|
446
|
-
|
|
447
|
-
chrome-cdp-cli install_claude_skill --include-examples --include-references
|
|
448
|
-
|
|
449
|
-
# Install with custom directory
|
|
450
|
-
chrome-cdp-cli install_cursor_command --target-directory /custom/path/.cursor/commands
|
|
451
|
-
chrome-cdp-cli install_claude_skill --target-directory /custom/path/.claude/skills
|
|
452
|
-
|
|
453
|
-
# Force install (bypasses directory validation)
|
|
454
|
-
chrome-cdp-cli install_cursor_command --force
|
|
455
|
-
chrome-cdp-cli install_claude_skill --force
|
|
456
|
-
```
|
|
181
|
+
Stream console messages in real time directly from the browser. This command runs until you press Ctrl+C.
|
|
457
182
|
|
|
458
|
-
### π§ Available via JavaScript Execution
|
|
459
|
-
|
|
460
|
-
#### Page Management
|
|
461
183
|
```bash
|
|
462
|
-
#
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
# Get current URL
|
|
466
|
-
chrome-cdp-cli eval "window.location.href"
|
|
184
|
+
# Follow all console messages
|
|
185
|
+
cdp log -f
|
|
467
186
|
|
|
468
|
-
#
|
|
469
|
-
|
|
187
|
+
# Filter by message type
|
|
188
|
+
cdp log -f --types error,warn
|
|
470
189
|
|
|
471
|
-
#
|
|
472
|
-
|
|
190
|
+
# Filter by text pattern (regex)
|
|
191
|
+
cdp log -f --text-pattern "api|fetch"
|
|
473
192
|
|
|
474
|
-
#
|
|
475
|
-
|
|
193
|
+
# Output as JSON
|
|
194
|
+
cdp log -f --format json
|
|
476
195
|
```
|
|
477
196
|
|
|
478
|
-
|
|
479
|
-
```bash
|
|
480
|
-
# Native commands (recommended)
|
|
481
|
-
chrome-cdp-cli click "#button"
|
|
482
|
-
chrome-cdp-cli hover ".menu-item"
|
|
483
|
-
chrome-cdp-cli fill "#email" "user@example.com"
|
|
197
|
+
> **Note:** `log` streams events directly via CDP β no background process required. Since it follows live events, historical messages (before the command started) are not shown.
|
|
484
198
|
|
|
485
|
-
|
|
486
|
-
chrome-cdp-cli eval "document.querySelector('#button').click()"
|
|
487
|
-
chrome-cdp-cli eval "document.querySelector('.menu-item').dispatchEvent(new MouseEvent('mouseover'))"
|
|
488
|
-
chrome-cdp-cli eval "document.querySelector('#email').value = 'user@example.com'"
|
|
199
|
+
**Filter options:**
|
|
489
200
|
|
|
490
|
-
|
|
491
|
-
|
|
201
|
+
| Option | Description |
|
|
202
|
+
|--------|-------------|
|
|
203
|
+
| `--types <list>` | Comma-separated types: `log,info,warn,error,debug` |
|
|
204
|
+
| `--text-pattern <regex>` | Filter messages matching this pattern |
|
|
492
205
|
|
|
493
|
-
|
|
494
|
-
chrome-cdp-cli eval "document.querySelector('#element').textContent"
|
|
206
|
+
### `network` β Follow Network Requests (alias: `net`)
|
|
495
207
|
|
|
496
|
-
|
|
497
|
-
chrome-cdp-cli eval "document.querySelector('#element').getAttribute('class')"
|
|
498
|
-
```
|
|
208
|
+
Stream network requests in real time directly from the browser. Runs until Ctrl+C.
|
|
499
209
|
|
|
500
|
-
#### Form Handling
|
|
501
210
|
```bash
|
|
502
|
-
#
|
|
503
|
-
|
|
504
|
-
{"selector":"#name","value":"John Doe"},
|
|
505
|
-
{"selector":"#email","value":"john@example.com"},
|
|
506
|
-
{"selector":"#phone","value":"123-456-7890"}
|
|
507
|
-
]'
|
|
508
|
-
|
|
509
|
-
# Native single field filling
|
|
510
|
-
chrome-cdp-cli fill "#name" "John Doe"
|
|
511
|
-
chrome-cdp-cli fill "#email" "john@example.com"
|
|
211
|
+
# Follow all requests
|
|
212
|
+
cdp network -f
|
|
512
213
|
|
|
513
|
-
#
|
|
514
|
-
|
|
515
|
-
document.querySelector('#name').value = 'John Doe';
|
|
516
|
-
document.querySelector('#email').value = 'john@example.com';
|
|
517
|
-
document.querySelector('#phone').value = '123-456-7890';
|
|
518
|
-
"
|
|
214
|
+
# Filter by HTTP method
|
|
215
|
+
cdp network -f --methods POST,PUT
|
|
519
216
|
|
|
520
|
-
#
|
|
521
|
-
|
|
217
|
+
# Filter by URL pattern (regex)
|
|
218
|
+
cdp network -f --url-pattern "api|graphql"
|
|
522
219
|
|
|
523
|
-
#
|
|
524
|
-
|
|
220
|
+
# Filter by status code
|
|
221
|
+
cdp network -f --status-codes 200,201,404
|
|
525
222
|
|
|
526
|
-
#
|
|
527
|
-
|
|
223
|
+
# Combine filters
|
|
224
|
+
cdp network -f --methods POST --url-pattern "/api" --status-codes 200,201
|
|
528
225
|
|
|
529
|
-
#
|
|
530
|
-
|
|
226
|
+
# JSON output
|
|
227
|
+
cdp network -f --format json
|
|
531
228
|
```
|
|
532
229
|
|
|
533
|
-
|
|
534
|
-
```bash
|
|
535
|
-
# Get page HTML
|
|
536
|
-
chrome-cdp-cli eval "document.documentElement.outerHTML"
|
|
537
|
-
|
|
538
|
-
# Get page title
|
|
539
|
-
chrome-cdp-cli eval "document.title"
|
|
230
|
+
**Filter options:**
|
|
540
231
|
|
|
541
|
-
|
|
542
|
-
|
|
232
|
+
| Option | Description |
|
|
233
|
+
|--------|-------------|
|
|
234
|
+
| `--methods <list>` | Comma-separated HTTP methods: `GET,POST,PUT,DELETE,β¦` |
|
|
235
|
+
| `--url-pattern <regex>` | Filter URLs matching this pattern |
|
|
236
|
+
| `--status-codes <list>` | Comma-separated status codes: `200,404,500` |
|
|
543
237
|
|
|
544
|
-
|
|
545
|
-
chrome-cdp-cli eval "Array.from(document.querySelectorAll('img')).map(img => img.src)"
|
|
238
|
+
### `click` β Click an Element
|
|
546
239
|
|
|
547
|
-
# Extract table data
|
|
548
|
-
chrome-cdp-cli eval "Array.from(document.querySelectorAll('table tr')).map(row => Array.from(row.cells).map(cell => cell.textContent))"
|
|
549
|
-
```
|
|
550
|
-
|
|
551
|
-
#### Performance Monitoring
|
|
552
240
|
```bash
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
# Get navigation entries
|
|
557
|
-
chrome-cdp-cli eval "performance.getEntriesByType('navigation')"
|
|
558
|
-
|
|
559
|
-
# Get resource entries
|
|
560
|
-
chrome-cdp-cli eval "performance.getEntriesByType('resource')"
|
|
561
|
-
|
|
562
|
-
# Get current timestamp
|
|
563
|
-
chrome-cdp-cli eval "performance.now()"
|
|
564
|
-
|
|
565
|
-
# Measure performance
|
|
566
|
-
chrome-cdp-cli eval "
|
|
567
|
-
performance.mark('start');
|
|
568
|
-
// ... some operation ...
|
|
569
|
-
performance.mark('end');
|
|
570
|
-
performance.measure('operation', 'start', 'end');
|
|
571
|
-
performance.getEntriesByName('operation')[0].duration;
|
|
572
|
-
"
|
|
241
|
+
cdp click "#submit-button"
|
|
242
|
+
cdp click ".slow-button" --timeout 10000
|
|
243
|
+
cdp click "#optional" --no-wait
|
|
573
244
|
```
|
|
574
245
|
|
|
575
|
-
|
|
576
|
-
```bash
|
|
577
|
-
# Make HTTP request
|
|
578
|
-
chrome-cdp-cli eval "fetch('/api/data').then(r => r.json())"
|
|
246
|
+
### `hover` β Hover over an Element
|
|
579
247
|
|
|
580
|
-
# POST data
|
|
581
|
-
chrome-cdp-cli eval "
|
|
582
|
-
fetch('/api/users', {
|
|
583
|
-
method: 'POST',
|
|
584
|
-
headers: {'Content-Type': 'application/json'},
|
|
585
|
-
body: JSON.stringify({name: 'John', email: 'john@example.com'})
|
|
586
|
-
}).then(r => r.json())
|
|
587
|
-
"
|
|
588
|
-
|
|
589
|
-
# Check network connectivity
|
|
590
|
-
chrome-cdp-cli eval "navigator.onLine"
|
|
591
|
-
```
|
|
592
|
-
|
|
593
|
-
#### Browser Information
|
|
594
248
|
```bash
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
# Get viewport size
|
|
599
|
-
chrome-cdp-cli eval "{width: window.innerWidth, height: window.innerHeight}"
|
|
600
|
-
|
|
601
|
-
# Get screen resolution
|
|
602
|
-
chrome-cdp-cli eval "{width: screen.width, height: screen.height}"
|
|
603
|
-
|
|
604
|
-
# Get browser language
|
|
605
|
-
chrome-cdp-cli eval "navigator.language"
|
|
606
|
-
|
|
607
|
-
# Get cookies
|
|
608
|
-
chrome-cdp-cli eval "document.cookie"
|
|
249
|
+
cdp hover "#menu-item"
|
|
250
|
+
cdp hover ".dropdown-trigger"
|
|
609
251
|
```
|
|
610
252
|
|
|
611
|
-
###
|
|
612
|
-
|
|
613
|
-
These features require dedicated handlers and are not yet available:
|
|
614
|
-
|
|
615
|
-
- Native page management commands (new_page, close_page, list_pages, select_page)
|
|
616
|
-
- Native performance profiling commands
|
|
617
|
-
- Native device emulation commands
|
|
618
|
-
- Advanced output formatting options
|
|
253
|
+
### `fill` β Fill a Form Field
|
|
619
254
|
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
The `eval` command is the most powerful feature of this CLI tool. It allows you to execute any JavaScript code in the browser context, making it possible to achieve almost any browser automation task. Here are some advanced examples:
|
|
623
|
-
|
|
624
|
-
### Advanced Automation Examples
|
|
255
|
+
Works with text inputs, email inputs, password inputs, textareas, and `<select>` dropdowns (matches by value or visible text).
|
|
625
256
|
|
|
626
257
|
```bash
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
if (element) resolve(element.textContent);
|
|
633
|
-
else setTimeout(check, 100);
|
|
634
|
-
};
|
|
635
|
-
check();
|
|
636
|
-
})
|
|
637
|
-
"
|
|
638
|
-
|
|
639
|
-
# Scroll to element
|
|
640
|
-
chrome-cdp-cli eval "
|
|
641
|
-
document.querySelector('#target').scrollIntoView({behavior: 'smooth'});
|
|
642
|
-
"
|
|
643
|
-
|
|
644
|
-
# Take element screenshot (get element bounds for screenshot)
|
|
645
|
-
chrome-cdp-cli eval "
|
|
646
|
-
const element = document.querySelector('#target');
|
|
647
|
-
const rect = element.getBoundingClientRect();
|
|
648
|
-
({x: rect.x, y: rect.y, width: rect.width, height: rect.height})
|
|
649
|
-
"
|
|
650
|
-
|
|
651
|
-
# Simulate complex user interactions
|
|
652
|
-
chrome-cdp-cli eval "
|
|
653
|
-
const element = document.querySelector('#button');
|
|
654
|
-
element.dispatchEvent(new MouseEvent('mousedown'));
|
|
655
|
-
setTimeout(() => element.dispatchEvent(new MouseEvent('mouseup')), 100);
|
|
656
|
-
"
|
|
657
|
-
|
|
658
|
-
# Extract structured data
|
|
659
|
-
chrome-cdp-cli eval "
|
|
660
|
-
Array.from(document.querySelectorAll('.product')).map(product => ({
|
|
661
|
-
name: product.querySelector('.name').textContent,
|
|
662
|
-
price: product.querySelector('.price').textContent,
|
|
663
|
-
image: product.querySelector('img').src
|
|
664
|
-
}))
|
|
665
|
-
"
|
|
666
|
-
|
|
667
|
-
# Monitor page changes
|
|
668
|
-
chrome-cdp-cli eval "
|
|
669
|
-
new Promise(resolve => {
|
|
670
|
-
const observer = new MutationObserver(mutations => {
|
|
671
|
-
resolve(mutations.length + ' changes detected');
|
|
672
|
-
observer.disconnect();
|
|
673
|
-
});
|
|
674
|
-
observer.observe(document.body, {childList: true, subtree: true});
|
|
675
|
-
setTimeout(() => {
|
|
676
|
-
observer.disconnect();
|
|
677
|
-
resolve('No changes in 5 seconds');
|
|
678
|
-
}, 5000);
|
|
679
|
-
})
|
|
680
|
-
"
|
|
258
|
+
cdp fill "#username" "john@example.com"
|
|
259
|
+
cdp fill "input[type='password']" "secret123"
|
|
260
|
+
cdp fill "#country" "United States" # select dropdown by text
|
|
261
|
+
cdp fill "#country" "US" # select dropdown by value
|
|
262
|
+
cdp fill "#notes" " - extra" --no-clear # append, don't clear first
|
|
681
263
|
```
|
|
682
264
|
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
### Current Limitations
|
|
686
|
-
|
|
687
|
-
- **No native page management**: Creating, closing, and switching between tabs requires manual implementation
|
|
688
|
-
- **No performance profiling**: Advanced performance analysis requires manual JavaScript
|
|
689
|
-
- **No device emulation**: Mobile/tablet simulation not yet implemented
|
|
690
|
-
- **Basic output formatting**: Advanced JSON/text formatting options not available
|
|
691
|
-
|
|
692
|
-
### Upcoming Features
|
|
693
|
-
|
|
694
|
-
1. **Native Page Management Commands**
|
|
695
|
-
- `new_page`, `close_page`, `list_pages`, `select_page`
|
|
696
|
-
- Direct CDP Target domain integration
|
|
697
|
-
|
|
698
|
-
2. **Performance Analysis**
|
|
699
|
-
- `performance_start_trace`, `performance_stop_trace`
|
|
700
|
-
- Built-in performance metrics and analysis
|
|
701
|
-
|
|
702
|
-
3. **Device Emulation**
|
|
703
|
-
- `emulate` command for device simulation
|
|
704
|
-
- Network condition simulation
|
|
705
|
-
|
|
706
|
-
4. **Advanced Output Formatting**
|
|
707
|
-
- Enhanced JSON/text formatting
|
|
708
|
-
- Quiet and verbose modes
|
|
709
|
-
- Custom output templates
|
|
710
|
-
|
|
711
|
-
### Why JavaScript Execution? (Built for Modern Development)
|
|
712
|
-
|
|
713
|
-
**This is not a workaround - it's a core design philosophy optimized for modern development workflows:**
|
|
714
|
-
|
|
715
|
-
1. **π§ Universal Language**: JavaScript is the language of the web. Developers and AI assistants alike excel at writing JavaScript for browser automation.
|
|
716
|
-
|
|
717
|
-
2. **β‘ Rapid Prototyping**: The perfect workflow: Write JavaScript β Execute β See Results β Refine. This iterative loop is ideal for both human developers and AI assistants.
|
|
718
|
-
|
|
719
|
-
3. **π Maximum Flexibility**: Any browser task, any complexity, any scenario - all through JavaScript. No waiting for specific command implementations.
|
|
720
|
-
|
|
721
|
-
4. **π€ AI-Native Workflow**: When you ask Claude or Cursor to automate something, they naturally write JavaScript - exactly what the `eval` command executes.
|
|
722
|
-
|
|
723
|
-
5. **π Natural Language β Automation**: "Click the submit button" β AI generates `document.querySelector('#submit').click()` β Executes instantly.
|
|
724
|
-
|
|
725
|
-
6. **π― Context-Aware**: AI understands your project and can write automation scripts that fit your specific needs.
|
|
726
|
-
|
|
727
|
-
7. **β‘ Instant Iteration**: Both developers and AI can adjust scripts based on results immediately - no need to wait for feature releases.
|
|
728
|
-
|
|
729
|
-
**This tool bridges the gap between dedicated commands for common tasks and unlimited flexibility through JavaScript execution, making it perfect for both traditional development and AI-assisted workflows.**
|
|
730
|
-
|
|
731
|
-
## Form Filling & Element Interaction
|
|
732
|
-
|
|
733
|
-
The CLI now includes native commands for element interaction and form filling, designed to work seamlessly with both simple and complex automation scenarios.
|
|
734
|
-
|
|
735
|
-
### Single Field Filling
|
|
265
|
+
### `fill_form` β Batch Form Fill
|
|
736
266
|
|
|
737
267
|
```bash
|
|
738
|
-
#
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
# Fill a password field
|
|
742
|
-
chrome-cdp-cli fill "input[type='password']" "secret123"
|
|
743
|
-
|
|
744
|
-
# Fill a textarea
|
|
745
|
-
chrome-cdp-cli fill "#message" "Hello, this is a test message"
|
|
746
|
-
|
|
747
|
-
# Select dropdown option (by value or text)
|
|
748
|
-
chrome-cdp-cli fill "#country" "US"
|
|
749
|
-
chrome-cdp-cli fill "#country" "United States"
|
|
750
|
-
|
|
751
|
-
# Fill without clearing existing content
|
|
752
|
-
chrome-cdp-cli fill "#notes" " - Additional note" --no-clear
|
|
753
|
-
|
|
754
|
-
# Fill with custom timeout
|
|
755
|
-
chrome-cdp-cli fill ".slow-loading-field" "value" --timeout 10000
|
|
756
|
-
```
|
|
757
|
-
|
|
758
|
-
### Batch Form Filling
|
|
759
|
-
|
|
760
|
-
```bash
|
|
761
|
-
# Fill multiple fields at once
|
|
762
|
-
chrome-cdp-cli fill_form --fields '[
|
|
268
|
+
# Inline JSON
|
|
269
|
+
cdp fill_form --fields '[
|
|
763
270
|
{"selector":"#firstName","value":"John"},
|
|
764
271
|
{"selector":"#lastName","value":"Doe"},
|
|
765
|
-
{"selector":"#email","value":"john
|
|
766
|
-
{"selector":"#country","value":"United States"}
|
|
272
|
+
{"selector":"#email","value":"john@example.com"}
|
|
767
273
|
]'
|
|
768
274
|
|
|
769
|
-
#
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
]' > login-form.json
|
|
775
|
-
chrome-cdp-cli fill_form --fields-file login-form.json
|
|
776
|
-
|
|
777
|
-
# Advanced options
|
|
778
|
-
chrome-cdp-cli fill_form --fields '[
|
|
779
|
-
{"selector":"#field1","value":"value1"},
|
|
780
|
-
{"selector":"#field2","value":"value2"}
|
|
781
|
-
]' --no-clear --timeout 15000 --stop-on-error
|
|
275
|
+
# From JSON file
|
|
276
|
+
cdp fill_form --fields-file form-data.json
|
|
277
|
+
|
|
278
|
+
# Stop on first error (default: continue on error)
|
|
279
|
+
cdp fill_form --fields '[...]' --stop-on-error
|
|
782
280
|
```
|
|
783
281
|
|
|
784
|
-
###
|
|
282
|
+
### `drag` β Drag and Drop
|
|
785
283
|
|
|
786
284
|
```bash
|
|
787
|
-
#
|
|
788
|
-
|
|
789
|
-
chrome-cdp-cli click ".menu-item" --timeout 5000
|
|
790
|
-
|
|
791
|
-
# Hover over elements
|
|
792
|
-
chrome-cdp-cli hover "#dropdown-trigger"
|
|
793
|
-
chrome-cdp-cli hover ".tooltip-element" --no-wait
|
|
285
|
+
cdp drag "#draggable-item" "#drop-zone"
|
|
286
|
+
cdp drag ".file-item" ".upload-area" --timeout 10000
|
|
794
287
|
```
|
|
795
288
|
|
|
796
|
-
###
|
|
797
|
-
|
|
798
|
-
**Single Field Options (`fill` command):**
|
|
799
|
-
- `--wait-for-element` / `--no-wait`: Wait for element to appear (default: true)
|
|
800
|
-
- `--timeout <ms>`: Timeout for waiting (default: 5000ms)
|
|
801
|
-
- `--clear-first` / `--no-clear`: Clear field before filling (default: true)
|
|
802
|
-
|
|
803
|
-
**Batch Form Options (`fill_form` command):**
|
|
804
|
-
- `--fields <json>`: JSON array of field objects
|
|
805
|
-
- `--fields-file <file>`: JSON file containing field array
|
|
806
|
-
- `--wait-for-elements` / `--no-wait`: Wait for all elements (default: true)
|
|
807
|
-
- `--timeout <ms>`: Timeout for each field (default: 5000ms)
|
|
808
|
-
- `--clear-first` / `--no-clear`: Clear all fields before filling (default: true)
|
|
809
|
-
- `--continue-on-error` / `--stop-on-error`: Continue if field fails (default: continue)
|
|
810
|
-
|
|
811
|
-
### Supported Form Elements
|
|
289
|
+
### `press_key` β Keyboard Input
|
|
812
290
|
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
291
|
+
```bash
|
|
292
|
+
cdp press_key "Enter"
|
|
293
|
+
cdp press_key "Escape"
|
|
294
|
+
cdp press_key "Tab"
|
|
295
|
+
cdp press_key "a" --modifiers Ctrl # Ctrl+A
|
|
296
|
+
cdp press_key "s" --modifiers Ctrl # Ctrl+S
|
|
297
|
+
cdp press_key "c" --modifiers Ctrl,Shift # Ctrl+Shift+C
|
|
298
|
+
cdp press_key "ArrowDown" --selector "#dropdown"
|
|
299
|
+
```
|
|
820
300
|
|
|
821
|
-
|
|
822
|
-
- Textareas (`<textarea>`)
|
|
823
|
-
- Select dropdowns (`<select>`) - matches by value or text content
|
|
301
|
+
### `upload_file` β File Upload
|
|
824
302
|
|
|
825
|
-
|
|
303
|
+
```bash
|
|
304
|
+
cdp upload_file "input[type='file']" "./document.pdf"
|
|
305
|
+
cdp upload_file "#file-input" "/path/to/image.jpg"
|
|
306
|
+
```
|
|
826
307
|
|
|
827
|
-
|
|
308
|
+
### `wait_for` β Wait for Element State
|
|
828
309
|
|
|
829
310
|
```bash
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
# Stop on first error
|
|
838
|
-
chrome-cdp-cli fill_form --fields '[
|
|
839
|
-
{"selector":"#field1","value":"value1"},
|
|
840
|
-
{"selector":"#nonexistent","value":"value2"}
|
|
841
|
-
]' --stop-on-error
|
|
311
|
+
cdp wait_for "#loading-spinner" # exists
|
|
312
|
+
cdp wait_for "#modal" --condition visible
|
|
313
|
+
cdp wait_for "#loading" --condition hidden
|
|
314
|
+
cdp wait_for "#submit-btn" --condition enabled
|
|
315
|
+
cdp wait_for "#processing" --condition disabled
|
|
316
|
+
cdp wait_for "#slow-element" --timeout 30000
|
|
842
317
|
```
|
|
843
318
|
|
|
844
|
-
###
|
|
845
|
-
|
|
846
|
-
For complex scenarios, combine native commands with eval:
|
|
319
|
+
### `handle_dialog` β Handle Browser Dialogs
|
|
847
320
|
|
|
848
321
|
```bash
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
# Use eval for complex validation or custom logic
|
|
854
|
-
chrome-cdp-cli eval "
|
|
855
|
-
// Validate form before submission
|
|
856
|
-
const username = document.querySelector('#username').value;
|
|
857
|
-
const password = document.querySelector('#password').value;
|
|
858
|
-
if (username && password && password.length >= 8) {
|
|
859
|
-
document.querySelector('#submit').click();
|
|
860
|
-
return 'Form submitted successfully';
|
|
861
|
-
} else {
|
|
862
|
-
return 'Validation failed';
|
|
863
|
-
}
|
|
864
|
-
"
|
|
322
|
+
cdp handle_dialog accept
|
|
323
|
+
cdp handle_dialog dismiss
|
|
324
|
+
cdp handle_dialog accept --text "John Doe" # prompt with text
|
|
325
|
+
cdp handle_dialog accept --timeout 10000
|
|
865
326
|
```
|
|
866
327
|
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
### Form Filling Commands
|
|
328
|
+
### `install_cursor_command` β Install Cursor Integration
|
|
870
329
|
|
|
871
330
|
```bash
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
# Batch form filling
|
|
877
|
-
chrome-cdp-cli fill_form --fields '[
|
|
878
|
-
{"selector":"#username","value":"john"},
|
|
879
|
-
{"selector":"#password","value":"secret"}
|
|
880
|
-
]'
|
|
881
|
-
|
|
882
|
-
# From JSON file
|
|
883
|
-
chrome-cdp-cli fill_form --fields-file form-data.json
|
|
331
|
+
cdp install_cursor_command
|
|
332
|
+
cdp install_cursor_command --force
|
|
333
|
+
cdp install_cursor_command --target-directory /custom/.cursor/commands
|
|
884
334
|
```
|
|
885
335
|
|
|
886
|
-
###
|
|
336
|
+
### `install_claude_skill` β Install Claude Skill
|
|
887
337
|
|
|
888
338
|
```bash
|
|
889
|
-
#
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
# With options
|
|
894
|
-
chrome-cdp-cli fill "#field" "value" --timeout 10000 --no-clear
|
|
895
|
-
chrome-cdp-cli click "#button" --no-wait
|
|
339
|
+
cdp install_claude_skill # project scope
|
|
340
|
+
cdp install_claude_skill --skill-type personal # user home scope
|
|
341
|
+
cdp install_claude_skill --include-examples --include-references
|
|
896
342
|
```
|
|
897
343
|
|
|
898
|
-
|
|
344
|
+
---
|
|
345
|
+
|
|
346
|
+
## The Power of `eval`
|
|
347
|
+
|
|
348
|
+
`eval` is the most powerful command β it runs any JavaScript in the browser, making virtually any automation task possible without waiting for dedicated command implementations.
|
|
899
349
|
|
|
900
350
|
```bash
|
|
901
|
-
#
|
|
902
|
-
|
|
903
|
-
|
|
351
|
+
# Navigation
|
|
352
|
+
cdp eval "window.location.href = 'https://example.com'"
|
|
353
|
+
cdp eval "window.history.back()"
|
|
354
|
+
cdp eval "window.location.reload()"
|
|
355
|
+
|
|
356
|
+
# Content extraction
|
|
357
|
+
cdp eval "document.title"
|
|
358
|
+
cdp eval "Array.from(document.querySelectorAll('a')).map(a => a.href)"
|
|
359
|
+
cdp eval "Array.from(document.querySelectorAll('.product')).map(p => ({
|
|
360
|
+
name: p.querySelector('.name').textContent,
|
|
361
|
+
price: p.querySelector('.price').textContent
|
|
362
|
+
}))"
|
|
363
|
+
|
|
364
|
+
# Wait for dynamic content
|
|
365
|
+
cdp eval "new Promise(resolve => {
|
|
366
|
+
const check = () => {
|
|
367
|
+
const el = document.querySelector('#dynamic-content');
|
|
368
|
+
if (el) resolve(el.textContent);
|
|
369
|
+
else setTimeout(check, 100);
|
|
370
|
+
};
|
|
371
|
+
check();
|
|
372
|
+
})"
|
|
904
373
|
|
|
905
|
-
#
|
|
906
|
-
|
|
907
|
-
|
|
374
|
+
# Make HTTP requests from browser context
|
|
375
|
+
cdp eval "fetch('/api/data').then(r => r.json())"
|
|
376
|
+
cdp eval "fetch('/api/users', {
|
|
377
|
+
method: 'POST',
|
|
378
|
+
headers: {'Content-Type': 'application/json'},
|
|
379
|
+
body: JSON.stringify({name: 'John'})
|
|
380
|
+
}).then(r => r.json())"
|
|
908
381
|
|
|
909
|
-
#
|
|
910
|
-
|
|
911
|
-
|
|
382
|
+
# Performance data
|
|
383
|
+
cdp eval "performance.getEntriesByType('navigation')"
|
|
384
|
+
cdp eval "performance.getEntriesByType('resource').length"
|
|
912
385
|
|
|
913
|
-
#
|
|
914
|
-
|
|
386
|
+
# Browser info
|
|
387
|
+
cdp eval "navigator.userAgent"
|
|
388
|
+
cdp eval "{width: window.innerWidth, height: window.innerHeight}"
|
|
915
389
|
```
|
|
916
390
|
|
|
917
|
-
|
|
391
|
+
---
|
|
918
392
|
|
|
919
393
|
## Configuration
|
|
920
394
|
|
|
921
|
-
|
|
395
|
+
### Config File
|
|
922
396
|
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
Create a `.chrome-cdp-cli.yaml` file in your project root or home directory:
|
|
397
|
+
Create `.chrome-cdp-cli.yaml` in your project root or home directory:
|
|
926
398
|
|
|
927
399
|
```yaml
|
|
928
|
-
# Basic configuration
|
|
929
400
|
host: localhost
|
|
930
401
|
port: 9222
|
|
931
402
|
timeout: 30000
|
|
932
403
|
outputFormat: text
|
|
933
404
|
verbose: false
|
|
934
405
|
|
|
935
|
-
# Profiles for different environments
|
|
936
406
|
profiles:
|
|
937
407
|
development:
|
|
938
408
|
debug: true
|
|
@@ -941,18 +411,9 @@ profiles:
|
|
|
941
411
|
quiet: true
|
|
942
412
|
outputFormat: json
|
|
943
413
|
|
|
944
|
-
# Command aliases
|
|
945
414
|
aliases:
|
|
946
415
|
ss: screenshot
|
|
947
416
|
js: eval
|
|
948
|
-
health: eval "document.readyState === 'complete'"
|
|
949
|
-
|
|
950
|
-
# Command-specific defaults
|
|
951
|
-
commands:
|
|
952
|
-
screenshot:
|
|
953
|
-
defaults:
|
|
954
|
-
format: png
|
|
955
|
-
quality: 90
|
|
956
417
|
```
|
|
957
418
|
|
|
958
419
|
### Environment Variables
|
|
@@ -962,248 +423,212 @@ export CHROME_CDP_CLI_HOST=localhost
|
|
|
962
423
|
export CHROME_CDP_CLI_PORT=9222
|
|
963
424
|
export CHROME_CDP_CLI_TIMEOUT=30000
|
|
964
425
|
export CHROME_CDP_CLI_VERBOSE=true
|
|
965
|
-
export CHROME_CDP_CLI_PROFILE=development
|
|
966
426
|
```
|
|
967
427
|
|
|
968
|
-
###
|
|
969
|
-
|
|
970
|
-
Configuration values are resolved in order (highest to lowest priority):
|
|
971
|
-
1. **Command-line arguments** (highest)
|
|
972
|
-
2. **Environment variables**
|
|
973
|
-
3. **Configuration files** (profile-specific, then default)
|
|
974
|
-
4. **Default values** (lowest)
|
|
428
|
+
### Precedence
|
|
975
429
|
|
|
976
|
-
|
|
430
|
+
1. Command-line arguments (highest)
|
|
431
|
+
2. Environment variables
|
|
432
|
+
3. Config file values
|
|
433
|
+
4. Built-in defaults (lowest)
|
|
977
434
|
|
|
978
|
-
|
|
435
|
+
---
|
|
979
436
|
|
|
980
|
-
##
|
|
981
|
-
|
|
982
|
-
The CLI includes a comprehensive help system with contextual assistance:
|
|
437
|
+
## Help System
|
|
983
438
|
|
|
984
439
|
```bash
|
|
985
|
-
#
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
chrome-cdp-cli help topic configuration
|
|
994
|
-
chrome-cdp-cli help topic selectors
|
|
995
|
-
chrome-cdp-cli help topic automation
|
|
996
|
-
chrome-cdp-cli help topic debugging
|
|
997
|
-
|
|
998
|
-
# Contextual help (shown automatically on errors)
|
|
999
|
-
chrome-cdp-cli click "#nonexistent" # Shows selector help
|
|
440
|
+
cdp help # all commands, categorized
|
|
441
|
+
cdp help eval # command-specific help with examples
|
|
442
|
+
cdp help screenshot
|
|
443
|
+
cdp help log
|
|
444
|
+
cdp help network
|
|
445
|
+
cdp help topic configuration
|
|
446
|
+
cdp help topic selectors
|
|
447
|
+
cdp help topic automation
|
|
1000
448
|
```
|
|
1001
449
|
|
|
1002
|
-
|
|
450
|
+
---
|
|
1003
451
|
|
|
1004
|
-
|
|
452
|
+
## Scripting & Automation
|
|
1005
453
|
|
|
1006
|
-
|
|
1007
|
-
# Install plugins
|
|
1008
|
-
npm install -g chrome-cdp-cli-plugin-form-automation
|
|
454
|
+
### Shell Pipelines
|
|
1009
455
|
|
|
1010
|
-
|
|
1011
|
-
|
|
456
|
+
```bash
|
|
457
|
+
# Screenshot to file via redirect
|
|
458
|
+
cdp screenshot > page.png
|
|
1012
459
|
|
|
1013
|
-
#
|
|
1014
|
-
|
|
1015
|
-
```
|
|
460
|
+
# Get page title as plain text
|
|
461
|
+
cdp eval "document.title" --format text
|
|
1016
462
|
|
|
1017
|
-
|
|
463
|
+
# Extract data as JSON for processing
|
|
464
|
+
cdp eval "Array.from(document.links).map(l => l.href)" --format json | jq '.[]'
|
|
1018
465
|
|
|
1019
|
-
|
|
466
|
+
# Capture logs from a specific tab
|
|
467
|
+
cdp -i 2 log -f --types error 2>&1 | tee errors.log
|
|
468
|
+
```
|
|
1020
469
|
|
|
1021
|
-
###
|
|
470
|
+
### Scripting with Multiple Commands
|
|
1022
471
|
|
|
1023
472
|
```bash
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
# Run in development mode
|
|
1032
|
-
npm run dev -- eval "console.log('Development mode')"
|
|
473
|
+
#!/bin/bash
|
|
474
|
+
# Navigate and capture
|
|
475
|
+
cdp eval "window.location.href = 'https://example.com'"
|
|
476
|
+
sleep 1
|
|
477
|
+
cdp screenshot --filename after-nav.png
|
|
478
|
+
cdp dom --filename after-nav.txt
|
|
1033
479
|
```
|
|
1034
480
|
|
|
1035
|
-
###
|
|
481
|
+
### Exit Codes
|
|
1036
482
|
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
483
|
+
| Code | Meaning |
|
|
484
|
+
|------|---------|
|
|
485
|
+
| `0` | Success (including user-cancelled interactive selector) |
|
|
486
|
+
| `1` | General error |
|
|
487
|
+
| `3` | Chrome connection error |
|
|
488
|
+
| `8` | Invalid arguments |
|
|
1040
489
|
|
|
1041
|
-
|
|
1042
|
-
npm run build:prod
|
|
490
|
+
---
|
|
1043
491
|
|
|
1044
|
-
|
|
1045
|
-
npm run build:watch
|
|
492
|
+
## Troubleshooting
|
|
1046
493
|
|
|
1047
|
-
|
|
1048
|
-
npm run clean
|
|
1049
|
-
```
|
|
494
|
+
### Chrome Won't Enable Remote Debugging
|
|
1050
495
|
|
|
1051
|
-
|
|
496
|
+
**Most common cause:** missing `--user-data-dir`.
|
|
1052
497
|
|
|
1053
498
|
```bash
|
|
1054
|
-
#
|
|
1055
|
-
|
|
499
|
+
# Wrong (Chrome 136+ will ignore this)
|
|
500
|
+
chrome --remote-debugging-port=9222
|
|
1056
501
|
|
|
1057
|
-
#
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
# Generate coverage report
|
|
1061
|
-
npm run test:coverage
|
|
1062
|
-
|
|
1063
|
-
# Run tests for CI (no watch, with coverage)
|
|
1064
|
-
npm run test:ci
|
|
502
|
+
# Correct
|
|
503
|
+
chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug
|
|
1065
504
|
```
|
|
1066
505
|
|
|
1067
|
-
|
|
506
|
+
See [Chrome's announcement](https://developer.chrome.com/blog/remote-debugging-port) for details.
|
|
1068
507
|
|
|
1069
|
-
|
|
1070
|
-
# Lint code
|
|
1071
|
-
npm run lint
|
|
508
|
+
### Connection Refused
|
|
1072
509
|
|
|
1073
|
-
|
|
1074
|
-
|
|
510
|
+
- Verify Chrome is running with the correct flags
|
|
511
|
+
- Check the port matches (`--port` option, default 9222)
|
|
512
|
+
- Ensure no firewall is blocking the port
|
|
1075
513
|
|
|
1076
|
-
|
|
1077
|
-
npm run verify
|
|
1078
|
-
```
|
|
514
|
+
### Multiple Pages / Tab Selector Appears
|
|
1079
515
|
|
|
1080
|
-
|
|
516
|
+
If you have multiple Chrome tabs open, CDP shows an interactive selector. To avoid it:
|
|
1081
517
|
|
|
1082
518
|
```bash
|
|
1083
|
-
#
|
|
1084
|
-
npm run package
|
|
1085
|
-
|
|
1086
|
-
# Prepare for publishing
|
|
1087
|
-
npm run prepublishOnly
|
|
519
|
+
cdp -i 1 eval "document.title" # select tab by index
|
|
1088
520
|
```
|
|
1089
521
|
|
|
1090
|
-
|
|
522
|
+
Or close unneeded tabs, leaving only the one you want to automate.
|
|
1091
523
|
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
β βββ client/ # CDP client implementation
|
|
1097
|
-
β βββ connection/ # Connection management
|
|
1098
|
-
β βββ handlers/ # Command handlers
|
|
1099
|
-
β βββ interfaces/ # TypeScript interfaces
|
|
1100
|
-
β βββ types/ # Type definitions
|
|
1101
|
-
β βββ utils/ # Utility functions
|
|
1102
|
-
β βββ test/ # Test setup and utilities
|
|
1103
|
-
β βββ index.ts # Main entry point
|
|
1104
|
-
βββ scripts/ # Build and utility scripts
|
|
1105
|
-
βββ dist/ # Compiled JavaScript output
|
|
1106
|
-
βββ coverage/ # Test coverage reports
|
|
1107
|
-
βββ tsconfig.json # TypeScript configuration
|
|
1108
|
-
βββ tsconfig.prod.json # Production TypeScript config
|
|
1109
|
-
βββ jest.config.js # Jest test configuration
|
|
1110
|
-
βββ package.json # Package configuration
|
|
1111
|
-
βββ README.md # This file
|
|
524
|
+
### Command Timeout
|
|
525
|
+
|
|
526
|
+
```bash
|
|
527
|
+
cdp eval "await longOperation()" --timeout 60000
|
|
1112
528
|
```
|
|
1113
529
|
|
|
1114
|
-
|
|
530
|
+
### Element Not Found
|
|
1115
531
|
|
|
1116
|
-
|
|
532
|
+
```bash
|
|
533
|
+
cdp wait_for "#dynamic-element" --timeout 10000
|
|
534
|
+
cdp click "#dynamic-element"
|
|
535
|
+
```
|
|
1117
536
|
|
|
1118
|
-
|
|
537
|
+
### Debug Mode
|
|
1119
538
|
|
|
1120
|
-
```
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
CommandResult,
|
|
1124
|
-
CLIConfig,
|
|
1125
|
-
BrowserTarget
|
|
1126
|
-
} from 'chrome-cdp-cli';
|
|
539
|
+
```bash
|
|
540
|
+
cdp --debug eval "document.title"
|
|
541
|
+
cdp --verbose screenshot --filename page.png
|
|
1127
542
|
```
|
|
1128
543
|
|
|
1129
|
-
|
|
544
|
+
---
|
|
1130
545
|
|
|
1131
|
-
|
|
1132
|
-
import { CLIApplication } from 'chrome-cdp-cli';
|
|
546
|
+
## Development
|
|
1133
547
|
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
548
|
+
```bash
|
|
549
|
+
git clone https://github.com/nicoster/chrome-devtools-cli.git
|
|
550
|
+
cd chrome-devtools-cli
|
|
551
|
+
npm install
|
|
1138
552
|
|
|
1139
|
-
|
|
553
|
+
# Development run
|
|
554
|
+
npm run dev -- eval "document.title"
|
|
1140
555
|
|
|
1141
|
-
|
|
556
|
+
# Build
|
|
557
|
+
npm run build # development (with source maps)
|
|
558
|
+
npm run build:prod # production (optimized)
|
|
559
|
+
npm run build:watch # watch mode
|
|
1142
560
|
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
- Verify no other Chrome instances are using the same debugging port
|
|
561
|
+
# Test
|
|
562
|
+
npm test
|
|
563
|
+
npm run test:watch
|
|
564
|
+
npm run test:ci # CI mode with coverage
|
|
1148
565
|
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
- **Why needed**: Chrome requires `--user-data-dir` for security - it will not enable the debugging port without it to protect your default browser profile
|
|
1153
|
-
- See [Chrome Remote Debugging documentation](https://developer.chrome.com/blog/remote-debugging-port) for details
|
|
566
|
+
# Lint
|
|
567
|
+
npm run lint
|
|
568
|
+
npm run lint:fix
|
|
1154
569
|
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
570
|
+
# Verify everything
|
|
571
|
+
npm run verify
|
|
572
|
+
```
|
|
1158
573
|
|
|
1159
|
-
|
|
1160
|
-
- Verify CSS selectors are correct
|
|
1161
|
-
- Use `wait_for` command to wait for dynamic elements
|
|
574
|
+
### Project Structure
|
|
1162
575
|
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
576
|
+
```
|
|
577
|
+
chrome-devtools-cli/
|
|
578
|
+
βββ src/
|
|
579
|
+
β βββ cli/ # ArgumentParser, CommandRouter, HelpSystem, CLIApplication
|
|
580
|
+
β βββ client/ # CDP client
|
|
581
|
+
β βββ connection/ # Connection management & target discovery
|
|
582
|
+
β βββ handlers/ # One file per command
|
|
583
|
+
β βββ monitors/ # ConsoleMonitor, NetworkMonitor (real-time event streams)
|
|
584
|
+
β βββ proxy/ # Background proxy server (used by IDE integrations)
|
|
585
|
+
β βββ config/ # Configuration management
|
|
586
|
+
β βββ index.ts # Entry point
|
|
587
|
+
βββ dist/ # Compiled output
|
|
588
|
+
βββ package.json
|
|
589
|
+
```
|
|
1166
590
|
|
|
1167
|
-
|
|
591
|
+
---
|
|
1168
592
|
|
|
1169
|
-
|
|
593
|
+
## Changelog
|
|
1170
594
|
|
|
1171
|
-
|
|
1172
|
-
chrome-cdp-cli --verbose eval "console.log('debug')"
|
|
1173
|
-
```
|
|
595
|
+
### v2.1.0
|
|
1174
596
|
|
|
1175
|
-
|
|
597
|
+
- **`cdp` alias**: `cdp` is now the primary command name (`chrome-cdp-cli` still works)
|
|
598
|
+
- **`log` command**: renamed from `console` (`console` kept as alias); follow-only real-time streaming via CDP, no background proxy required
|
|
599
|
+
- **`network` command**: follow-only real-time streaming; filter flags (`--methods`, `--url-pattern`, `--status-codes`) are now top-level instead of nested under `--filter`
|
|
600
|
+
- **`dom` command**: renamed from `snapshot` (`snapshot` kept as alias)
|
|
601
|
+
- **`screenshot` binary output**: omit `--filename` to write raw PNG/JPEG bytes to stdout for piping; `--format` renamed to `--image-format` to avoid conflict with the global `--format`
|
|
602
|
+
- **Interactive target selector**: when multiple Chrome pages are open, an arrow-key menu lets you pick one; pass `-i <n>` to skip it
|
|
603
|
+
- **`-i` global option**: `--target-index` / `-i` now works before or after the command name
|
|
604
|
+
- **Removed `restart` command**: proxy-based log collection has been removed entirely
|
|
605
|
+
- **Better error messages**: connection errors now include the `--user-data-dir` tip and a link to Chrome's announcement
|
|
1176
606
|
|
|
1177
|
-
|
|
1178
|
-
# Create npm package
|
|
1179
|
-
npm run package
|
|
607
|
+
### v2.0.x
|
|
1180
608
|
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
609
|
+
- Enhanced argument parser with schema validation
|
|
610
|
+
- Comprehensive help system with contextual assistance
|
|
611
|
+
- Configuration management with YAML/JSON support and profiles
|
|
612
|
+
- Standardized output formatting (JSON/text)
|
|
613
|
+
- Full element interaction suite: click, hover, fill, drag, press_key, upload_file, wait_for, handle_dialog
|
|
614
|
+
- Batch form filling with `fill_form`
|
|
615
|
+
- IDE integrations: Cursor commands, Claude skills
|
|
1184
616
|
|
|
617
|
+
---
|
|
1185
618
|
|
|
1186
619
|
## Contributing
|
|
1187
620
|
|
|
1188
621
|
1. Fork the repository
|
|
1189
622
|
2. Create a feature branch: `git checkout -b feature-name`
|
|
1190
|
-
3.
|
|
1191
|
-
4. Run
|
|
1192
|
-
5. Commit
|
|
1193
|
-
6. Push to the branch: `git push origin feature-name`
|
|
1194
|
-
7. Submit a pull request
|
|
623
|
+
3. Add tests for your changes
|
|
624
|
+
4. Run `npm run verify`
|
|
625
|
+
5. Commit and open a pull request
|
|
1195
626
|
|
|
1196
627
|
## License
|
|
1197
628
|
|
|
1198
|
-
MIT
|
|
629
|
+
MIT β see [LICENSE](LICENSE).
|
|
1199
630
|
|
|
1200
631
|
## Support
|
|
1201
632
|
|
|
1202
|
-
-
|
|
1203
|
-
-
|
|
1204
|
-
- π [Issue Tracker](https://github.com/nickxiao42/chrome-devtools-cli/issues)
|
|
1205
|
-
- π¬ [Discussions](https://github.com/nickxiao42/chrome-devtools-cli/discussions)
|
|
1206
|
-
|
|
1207
|
-
## Changelog
|
|
1208
|
-
|
|
1209
|
-
See [CHANGELOG.md](CHANGELOG.md) for version history and updates.
|
|
633
|
+
- [Issue Tracker](https://github.com/nicoster/chrome-devtools-cli/issues)
|
|
634
|
+
- [Discussions](https://github.com/nicoster/chrome-devtools-cli/discussions)
|