@ohah/agent-devtools 0.1.0
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/LICENSE +21 -0
- package/README.md +483 -0
- package/SKILL.md +203 -0
- package/bin/agent-devtools.js +70 -0
- package/package.json +35 -0
- package/scripts/postinstall.js +123 -0
- package/skills/agent-devtools/SKILL.md +203 -0
- package/skills/agent-devtools/references/commands.md +104 -0
- package/skills/agent-devtools/references/debug-mode.md +39 -0
- package/skills/agent-devtools/references/patterns.md +82 -0
- package/skills/agent-devtools/templates/api-discovery.sh +25 -0
- package/skills/agent-devtools/templates/authenticated-session.sh +31 -0
- package/skills/agent-devtools/templates/form-automation.sh +21 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 ohah
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,483 @@
|
|
|
1
|
+
# agent-devtools
|
|
2
|
+
|
|
3
|
+
**Browser DevTools CLI for AI agents, built with Zig.**
|
|
4
|
+
|
|
5
|
+
AI 에이전트를 위한 브라우저 개발자 도구 CLI
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@ohah/agent-devtools)
|
|
8
|
+
[](LICENSE)
|
|
9
|
+
[]()
|
|
10
|
+
[]()
|
|
11
|
+
|
|
12
|
+
A single native binary that controls Chrome via CDP (Chrome DevTools Protocol). Zero dependencies. No Playwright, no Puppeteer, no Node.js runtime required for the daemon.
|
|
13
|
+
|
|
14
|
+
**What makes it different:** Beyond standard browser automation, agent-devtools provides **network observation**, **API reverse engineering**, **request interception**, **flow recording/diffing**, and **console capture** -- capabilities not found in other browser CLIs.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
### npm (recommended)
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm install -g @ohah/agent-devtools
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Project-level dependency
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
npm install @ohah/agent-devtools
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### curl (no Node.js required)
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
curl -fsSL https://raw.githubusercontent.com/ohah/agent-devtools/main/install.sh | sh
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Skills (for AI agents)
|
|
37
|
+
|
|
38
|
+
Add the skill to your AI coding assistant (Claude Code, Codex, Cursor, Gemini CLI, etc.):
|
|
39
|
+
|
|
40
|
+
```bash
|
|
41
|
+
npx skills add ohah/agent-devtools
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Windows
|
|
45
|
+
|
|
46
|
+
```powershell
|
|
47
|
+
npm install -g @ohah/agent-devtools
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Or download `agent-devtools-win32-x64.exe` from [Releases](https://github.com/ohah/agent-devtools/releases).
|
|
51
|
+
|
|
52
|
+
### Build from source
|
|
53
|
+
|
|
54
|
+
Requires [Zig 0.15.2](https://ziglang.org/download/):
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
git clone https://github.com/ohah/agent-devtools
|
|
58
|
+
cd agent-devtools
|
|
59
|
+
zig build
|
|
60
|
+
zig build test # 495 tests
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
The binary is at `./zig-out/bin/agent-devtools`.
|
|
64
|
+
|
|
65
|
+
### Updating
|
|
66
|
+
|
|
67
|
+
```bash
|
|
68
|
+
npm update -g @ohah/agent-devtools # npm
|
|
69
|
+
curl -fsSL https://raw.githubusercontent.com/ohah/agent-devtools/main/install.sh | sh # curl
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Uninstall
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
npm uninstall -g @ohah/agent-devtools # npm
|
|
76
|
+
sudo rm /usr/local/bin/agent-devtools # curl
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Quick Start
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
# Navigate to a page (Chrome starts automatically)
|
|
83
|
+
agent-devtools open https://example.com
|
|
84
|
+
|
|
85
|
+
# Get the accessibility tree with interactive element refs
|
|
86
|
+
agent-devtools snapshot -i
|
|
87
|
+
# Output:
|
|
88
|
+
# - textbox "Email" [ref=e1]
|
|
89
|
+
# - textbox "Password" [ref=e2]
|
|
90
|
+
# - button "Sign In" [ref=e3]
|
|
91
|
+
|
|
92
|
+
# Interact using refs
|
|
93
|
+
agent-devtools fill @e1 "user@example.com"
|
|
94
|
+
agent-devtools fill @e2 "password123"
|
|
95
|
+
agent-devtools click @e3
|
|
96
|
+
|
|
97
|
+
# Re-snapshot after page changes (refs are invalidated on navigation)
|
|
98
|
+
agent-devtools snapshot -i
|
|
99
|
+
|
|
100
|
+
# Take a screenshot
|
|
101
|
+
agent-devtools screenshot login-result.png
|
|
102
|
+
|
|
103
|
+
# Close browser + daemon
|
|
104
|
+
agent-devtools close
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Network observation workflow
|
|
108
|
+
|
|
109
|
+
```bash
|
|
110
|
+
agent-devtools open https://app.example.com
|
|
111
|
+
agent-devtools network list # See all requests
|
|
112
|
+
agent-devtools network list api # Filter by URL pattern
|
|
113
|
+
agent-devtools network get <requestId> # Full request/response with body
|
|
114
|
+
agent-devtools analyze # API reverse engineering + JSON schema
|
|
115
|
+
agent-devtools har export.har # Export as HAR 1.2
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Interactive mode
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
agent-devtools --interactive
|
|
122
|
+
> open https://example.com
|
|
123
|
+
< {"success":true}
|
|
124
|
+
> snapshot -i
|
|
125
|
+
< {"success":true,"data":"- button \"Submit\" [ref=e1]\n"}
|
|
126
|
+
> click @e1
|
|
127
|
+
< {"success":true}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### Debug mode
|
|
131
|
+
|
|
132
|
+
Pair `--debug` with `--interactive` -- action commands automatically include triggered API requests and URL changes:
|
|
133
|
+
|
|
134
|
+
```bash
|
|
135
|
+
agent-devtools --interactive --debug
|
|
136
|
+
> click @e3
|
|
137
|
+
< {"success":true,"debug":{"new_requests":[{"url":"/api/login","method":"POST","status":200}],"url_changed":true}}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## Commands
|
|
141
|
+
|
|
142
|
+
### Navigation
|
|
143
|
+
|
|
144
|
+
| Command | Description |
|
|
145
|
+
|---------|-------------|
|
|
146
|
+
| `open <url>` | Navigate to URL (aliases: `navigate`, `goto`) |
|
|
147
|
+
| `back` / `forward` | History navigation |
|
|
148
|
+
| `reload` | Reload page |
|
|
149
|
+
| `close` | Close browser + daemon |
|
|
150
|
+
|
|
151
|
+
### Snapshot + Interaction
|
|
152
|
+
|
|
153
|
+
| Command | Description |
|
|
154
|
+
|---------|-------------|
|
|
155
|
+
| `snapshot [-i]` | Accessibility tree (`-i` for interactive only) |
|
|
156
|
+
| `click @ref` | Click element |
|
|
157
|
+
| `dblclick @ref` | Double-click |
|
|
158
|
+
| `tap @ref` | Touch tap |
|
|
159
|
+
| `fill @ref "text"` | Clear + type |
|
|
160
|
+
| `type @ref "text"` | Type (no clear) |
|
|
161
|
+
| `press <key>` | Press key (Enter, Tab, Control+a) |
|
|
162
|
+
| `hover @ref` | Hover |
|
|
163
|
+
| `focus @ref` | Focus |
|
|
164
|
+
| `select @ref "val"` | Select dropdown |
|
|
165
|
+
| `check` / `uncheck @ref` | Checkbox |
|
|
166
|
+
| `clear @ref` | Clear input (Ctrl+A + Backspace) |
|
|
167
|
+
| `selectall @ref` | Select all text |
|
|
168
|
+
| `scroll <dir> [px]` | Scroll (up/down/left/right) |
|
|
169
|
+
| `scrollintoview @ref` | Scroll element into view |
|
|
170
|
+
| `drag @from @to` | Drag and drop |
|
|
171
|
+
| `upload @ref <file>` | Upload file |
|
|
172
|
+
| `dispatch @ref <event>` | Dispatch DOM event |
|
|
173
|
+
|
|
174
|
+
### Get Information
|
|
175
|
+
|
|
176
|
+
| Command | Description |
|
|
177
|
+
|---------|-------------|
|
|
178
|
+
| `get text @ref` | Element text content |
|
|
179
|
+
| `get html @ref` | innerHTML |
|
|
180
|
+
| `get value @ref` | Input value |
|
|
181
|
+
| `get attr @ref <name>` | Element attribute |
|
|
182
|
+
| `get url` / `get title` | Page URL / title |
|
|
183
|
+
| `is visible @ref` | Check visibility |
|
|
184
|
+
| `is enabled @ref` | Check if enabled |
|
|
185
|
+
| `is checked @ref` | Check if checked |
|
|
186
|
+
| `boundingbox @ref` | Bounding box `{x, y, width, height}` |
|
|
187
|
+
| `styles @ref <prop>` | Computed CSS value |
|
|
188
|
+
|
|
189
|
+
### Find Elements
|
|
190
|
+
|
|
191
|
+
| Command | Description |
|
|
192
|
+
|---------|-------------|
|
|
193
|
+
| `find role <role>` | Find by ARIA role |
|
|
194
|
+
| `find text "Submit"` | Find by text content |
|
|
195
|
+
| `find label "Email"` | Find by label |
|
|
196
|
+
|
|
197
|
+
### Capture + Performance
|
|
198
|
+
|
|
199
|
+
| Command | Description |
|
|
200
|
+
|---------|-------------|
|
|
201
|
+
| `screenshot [path]` | PNG screenshot |
|
|
202
|
+
| `screenshot --annotate` | Screenshot with @ref labels overlay |
|
|
203
|
+
| `diff-screenshot <a> [b]` | Pixel diff between screenshots |
|
|
204
|
+
| `pdf [path]` | Save as PDF |
|
|
205
|
+
| `eval <js>` | Run JavaScript |
|
|
206
|
+
| `video start/stop [path]` | Record video (requires FFmpeg) |
|
|
207
|
+
| `trace start/stop [path]` | Chrome DevTools trace |
|
|
208
|
+
| `profiler start/stop [path]` | CPU profiler |
|
|
209
|
+
|
|
210
|
+
### Network (unique to agent-devtools)
|
|
211
|
+
|
|
212
|
+
| Command | Description |
|
|
213
|
+
|---------|-------------|
|
|
214
|
+
| `network list [pattern]` | List requests (filter by URL) |
|
|
215
|
+
| `network get <id>` | Full request/response with body |
|
|
216
|
+
| `network clear` | Clear collected data |
|
|
217
|
+
| `analyze` | API reverse engineering + JSON schema |
|
|
218
|
+
| `har [filename]` | Export HAR 1.2 |
|
|
219
|
+
|
|
220
|
+
### Intercept (unique to agent-devtools)
|
|
221
|
+
|
|
222
|
+
| Command | Description |
|
|
223
|
+
|---------|-------------|
|
|
224
|
+
| `intercept mock <pattern> <json>` | Mock response |
|
|
225
|
+
| `intercept fail <pattern>` | Block request |
|
|
226
|
+
| `intercept delay <pattern> <ms>` | Delay request |
|
|
227
|
+
| `intercept remove <pattern>` | Remove rule |
|
|
228
|
+
| `intercept list` / `clear` | List / clear all rules |
|
|
229
|
+
|
|
230
|
+
### Console (unique to agent-devtools)
|
|
231
|
+
|
|
232
|
+
| Command | Description |
|
|
233
|
+
|---------|-------------|
|
|
234
|
+
| `console list` | View console messages |
|
|
235
|
+
| `console clear` | Clear console |
|
|
236
|
+
| `errors [clear]` | View / clear JS errors |
|
|
237
|
+
|
|
238
|
+
### Recording (unique to agent-devtools)
|
|
239
|
+
|
|
240
|
+
| Command | Description |
|
|
241
|
+
|---------|-------------|
|
|
242
|
+
| `record <name>` | Save current network state |
|
|
243
|
+
| `diff <name>` | Compare current vs recorded |
|
|
244
|
+
| `replay <name>` | Navigate + diff automation |
|
|
245
|
+
|
|
246
|
+
### Wait
|
|
247
|
+
|
|
248
|
+
| Command | Description |
|
|
249
|
+
|---------|-------------|
|
|
250
|
+
| `wait <ms>` | Wait milliseconds |
|
|
251
|
+
| `waitforloadstate [ms]` | Wait for page load |
|
|
252
|
+
| `waitfor network <pat> [ms]` | Wait for network request |
|
|
253
|
+
| `waitfor console <pat> [ms]` | Wait for console message |
|
|
254
|
+
| `waitfor error [ms]` | Wait for JS error |
|
|
255
|
+
| `waitdownload [ms]` | Wait for download |
|
|
256
|
+
|
|
257
|
+
### Tabs + Windows
|
|
258
|
+
|
|
259
|
+
| Command | Description |
|
|
260
|
+
|---------|-------------|
|
|
261
|
+
| `tab list` | List open tabs |
|
|
262
|
+
| `tab new [url]` | Open new tab |
|
|
263
|
+
| `tab close` | Close current tab |
|
|
264
|
+
| `tab switch <n>` | Switch to tab (0-based) |
|
|
265
|
+
| `window new [url]` | Open new window |
|
|
266
|
+
|
|
267
|
+
### Cookies + Storage
|
|
268
|
+
|
|
269
|
+
| Command | Description |
|
|
270
|
+
|---------|-------------|
|
|
271
|
+
| `cookies [list]` | List cookies |
|
|
272
|
+
| `cookies set <name> <val>` | Set cookie |
|
|
273
|
+
| `cookies clear` | Clear cookies |
|
|
274
|
+
| `storage local [key]` | Get localStorage |
|
|
275
|
+
| `storage session [key]` | Get sessionStorage |
|
|
276
|
+
|
|
277
|
+
### State Management
|
|
278
|
+
|
|
279
|
+
| Command | Description |
|
|
280
|
+
|---------|-------------|
|
|
281
|
+
| `state save <name>` | Save cookies + localStorage + sessionStorage |
|
|
282
|
+
| `state load <name>` | Restore saved state |
|
|
283
|
+
| `state list` | List saved states |
|
|
284
|
+
|
|
285
|
+
### Auth Vault
|
|
286
|
+
|
|
287
|
+
| Command | Description |
|
|
288
|
+
|---------|-------------|
|
|
289
|
+
| `auth save <name> --url <url> --username <user> --password <pw>` | Store credentials |
|
|
290
|
+
| `auth login <name>` | Auto-login (navigate + fill + submit) |
|
|
291
|
+
| `auth list` / `show` / `delete <name>` | Manage vault |
|
|
292
|
+
|
|
293
|
+
### Browser Settings
|
|
294
|
+
|
|
295
|
+
| Command | Description |
|
|
296
|
+
|---------|-------------|
|
|
297
|
+
| `set viewport <w> <h>` | Viewport size |
|
|
298
|
+
| `set device "iPhone 14"` | Device emulation |
|
|
299
|
+
| `set media dark` / `set offline on` | Color scheme, offline mode |
|
|
300
|
+
| `set timezone` / `set locale` | Timezone, locale |
|
|
301
|
+
| `set useragent` / `set geolocation` | User agent, geolocation |
|
|
302
|
+
| `set headers '{"X":"Y"}'` | Extra HTTP headers |
|
|
303
|
+
| `set ignore-https-errors` / `set permissions` | HTTPS errors, permissions |
|
|
304
|
+
|
|
305
|
+
### Mouse, Clipboard, Dialog, and More
|
|
306
|
+
|
|
307
|
+
| Command | Description |
|
|
308
|
+
|---------|-------------|
|
|
309
|
+
| `mouse move/down/up` | Mouse control |
|
|
310
|
+
| `clipboard get/set` | Clipboard access |
|
|
311
|
+
| `dialog accept/dismiss/info` | JS dialog handling |
|
|
312
|
+
| `credentials <user> <pw>` | HTTP basic auth |
|
|
313
|
+
| `download-path <dir>` | Download directory |
|
|
314
|
+
| `addstyle <css>` | Inject CSS |
|
|
315
|
+
| `pause` / `resume` | JS execution control |
|
|
316
|
+
| `status` / `find-chrome` | Daemon status, Chrome path |
|
|
317
|
+
|
|
318
|
+
For the full command reference with examples, see [SKILL.md](SKILL.md).
|
|
319
|
+
|
|
320
|
+
## Authentication
|
|
321
|
+
|
|
322
|
+
### State persistence
|
|
323
|
+
|
|
324
|
+
Save and restore login sessions across browser restarts:
|
|
325
|
+
|
|
326
|
+
```bash
|
|
327
|
+
# Login once
|
|
328
|
+
agent-devtools open https://app.example.com/login
|
|
329
|
+
agent-devtools snapshot -i
|
|
330
|
+
agent-devtools fill @e1 "user@example.com"
|
|
331
|
+
agent-devtools fill @e2 "password"
|
|
332
|
+
agent-devtools click @e3
|
|
333
|
+
|
|
334
|
+
# Save authenticated state
|
|
335
|
+
agent-devtools state save myapp
|
|
336
|
+
|
|
337
|
+
# Restore later (cookies + localStorage + sessionStorage)
|
|
338
|
+
agent-devtools state load myapp
|
|
339
|
+
agent-devtools open https://app.example.com/dashboard
|
|
340
|
+
```
|
|
341
|
+
|
|
342
|
+
### Auth vault
|
|
343
|
+
|
|
344
|
+
Store credentials locally for auto-login:
|
|
345
|
+
|
|
346
|
+
```bash
|
|
347
|
+
# Save credentials
|
|
348
|
+
agent-devtools auth save github --url https://github.com/login --username user --password pass
|
|
349
|
+
|
|
350
|
+
# Auto-login (navigates, fills, submits)
|
|
351
|
+
agent-devtools auth login github
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
## Sessions
|
|
355
|
+
|
|
356
|
+
Run multiple isolated browser instances simultaneously:
|
|
357
|
+
|
|
358
|
+
```bash
|
|
359
|
+
# Different sessions with independent Chrome instances
|
|
360
|
+
agent-devtools --session=prod open https://app.com
|
|
361
|
+
agent-devtools --session=staging open https://staging.app.com
|
|
362
|
+
|
|
363
|
+
# Each session has its own cookies, storage, and navigation history
|
|
364
|
+
agent-devtools --session=prod network list
|
|
365
|
+
agent-devtools --session=staging network list
|
|
366
|
+
|
|
367
|
+
# Check daemon status
|
|
368
|
+
agent-devtools --session=prod status
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
### Connect to existing Chrome / Electron
|
|
372
|
+
|
|
373
|
+
```bash
|
|
374
|
+
# Auto-discover running Chrome (checks user data dirs + common ports)
|
|
375
|
+
agent-devtools --auto-connect snapshot -i
|
|
376
|
+
|
|
377
|
+
# Or specify port manually
|
|
378
|
+
agent-devtools --port=9222 snapshot -i
|
|
379
|
+
|
|
380
|
+
# Electron apps (launched with --remote-debugging-port)
|
|
381
|
+
/Applications/Slack.app/Contents/MacOS/Slack --remote-debugging-port=9222
|
|
382
|
+
agent-devtools --port=9222 snapshot -i
|
|
383
|
+
```
|
|
384
|
+
|
|
385
|
+
## Configuration
|
|
386
|
+
|
|
387
|
+
Create `agent-devtools.json` in your project root or `~/.agent-devtools/config.json` for user-level defaults.
|
|
388
|
+
|
|
389
|
+
| Flag / Variable | Description |
|
|
390
|
+
|------|-------------|
|
|
391
|
+
| `--session=NAME` | Isolated session name |
|
|
392
|
+
| `--headed` | Show browser window (not headless) |
|
|
393
|
+
| `--port=PORT` | Connect to existing Chrome by port |
|
|
394
|
+
| `--auto-connect` | Auto-discover running Chrome/Electron |
|
|
395
|
+
| `--interactive` | Persistent stdin/stdout session |
|
|
396
|
+
| `--debug` | Include network/URL changes in responses |
|
|
397
|
+
| `--proxy <url>` | Proxy server |
|
|
398
|
+
| `--proxy-bypass <list>` | Proxy bypass list |
|
|
399
|
+
| `--extension <path>` | Load Chrome extension |
|
|
400
|
+
| `--allowed-domains <list>` | Restrict navigation domains |
|
|
401
|
+
| `--content-boundaries` | Wrap output in boundary markers |
|
|
402
|
+
| `AGENT_DEVTOOLS_SESSION` | Session name (env var) |
|
|
403
|
+
| `AGENT_DEVTOOLS_DAEMON=1` | Run in daemon mode (env var) |
|
|
404
|
+
|
|
405
|
+
## Security
|
|
406
|
+
|
|
407
|
+
- **Domain allowlist** -- Restrict navigation to trusted domains: `--allowed-domains "example.com,*.example.com"`
|
|
408
|
+
- **Content boundaries** -- Wrap output in delimiters so LLMs can distinguish tool output from untrusted page content: `--content-boundaries`
|
|
409
|
+
- **Proxy support** -- Route all traffic through a proxy: `--proxy http://localhost:8080`
|
|
410
|
+
|
|
411
|
+
## Interactive Mode (Pipe Mode)
|
|
412
|
+
|
|
413
|
+
Use `--interactive` for persistent stdin/stdout sessions, ideal for AI agent integrations and CI pipelines:
|
|
414
|
+
|
|
415
|
+
```bash
|
|
416
|
+
agent-devtools --interactive
|
|
417
|
+
> open https://example.com
|
|
418
|
+
< {"success":true}
|
|
419
|
+
< {"event":"network","url":"https://example.com/","method":"GET","status":200}
|
|
420
|
+
> snapshot -i
|
|
421
|
+
< {"success":true,"data":"- button \"Submit\" [ref=e1]\n"}
|
|
422
|
+
> close
|
|
423
|
+
< {"success":true}
|
|
424
|
+
```
|
|
425
|
+
|
|
426
|
+
- One command per line, JSON responses
|
|
427
|
+
- Network and console events stream automatically
|
|
428
|
+
- Pair with `--debug` for action-triggered API request tracking
|
|
429
|
+
|
|
430
|
+
## Architecture
|
|
431
|
+
|
|
432
|
+
```
|
|
433
|
+
┌─────────────┐ Unix Socket ┌──────────────┐ WebSocket ┌─────────┐
|
|
434
|
+
│ Zig CLI │ ◄─ JSON-line ───► │ Zig Daemon │ ◄──────────────► │ Chrome │
|
|
435
|
+
│ (stateless) │ │ (background) │ │ (CDP) │
|
|
436
|
+
└─────────────┘ └──────────────┘ └─────────┘
|
|
437
|
+
```
|
|
438
|
+
|
|
439
|
+
- **Single binary** -- Same executable acts as both CLI and daemon (`AGENT_DEVTOOLS_DAEMON=1`)
|
|
440
|
+
- **Session-based** -- Each `--session` gets its own daemon + Chrome instance
|
|
441
|
+
- **Unix Domain Socket** -- CLI communicates with daemon via `{session}.sock` (newline-delimited JSON)
|
|
442
|
+
- **Direct CDP** -- No Playwright/Puppeteer intermediary. WebSocket to Chrome's DevTools protocol
|
|
443
|
+
- **Auto-lifecycle** -- Daemon starts on first command, idle timeout after 10 minutes
|
|
444
|
+
- **Crash detection** -- Monitors CDP health (30 consecutive failures triggers shutdown)
|
|
445
|
+
- **Multi-threaded** -- Concurrent event processing for network, console, and page events
|
|
446
|
+
|
|
447
|
+
## Comparison with agent-browser
|
|
448
|
+
|
|
449
|
+
agent-devtools includes all core browser automation features from [agent-browser](https://github.com/vercel-labs/agent-browser), plus additional DevTools capabilities:
|
|
450
|
+
|
|
451
|
+
| Feature | agent-browser | agent-devtools |
|
|
452
|
+
|---------|:---:|:---:|
|
|
453
|
+
| Page navigation | Yes | Yes |
|
|
454
|
+
| AX tree snapshot + @ref | Yes | Yes |
|
|
455
|
+
| Click, fill, type, press | Yes | Yes |
|
|
456
|
+
| Screenshot / PDF | Yes | Yes |
|
|
457
|
+
| Cookies / storage | Yes | Yes |
|
|
458
|
+
| Tab management | Yes | Yes |
|
|
459
|
+
| Device emulation | Yes | Yes |
|
|
460
|
+
| Eval JavaScript | Yes | Yes |
|
|
461
|
+
| Network observation | Yes | Yes |
|
|
462
|
+
| HAR export | Yes | Yes |
|
|
463
|
+
| Console capture | Yes | Yes |
|
|
464
|
+
| **API reverse engineering** | No | **Yes (analyze + JSON schema)** |
|
|
465
|
+
| **Request interception** | Route (mock/abort) | **intercept (mock/fail/delay)** |
|
|
466
|
+
| **Flow recording/diffing** | No | **Yes (record + diff)** |
|
|
467
|
+
| **Debug mode (--debug)** | No | **Yes (action → API correlation)** |
|
|
468
|
+
| **Event wait (waitfor)** | No | **Yes (network/console/error/dialog)** |
|
|
469
|
+
| Runtime | Rust | Zig |
|
|
470
|
+
| Dependencies | npm + Rust binary | Zero (single Zig binary) |
|
|
471
|
+
|
|
472
|
+
## Platforms
|
|
473
|
+
|
|
474
|
+
| Platform | Status |
|
|
475
|
+
|----------|--------|
|
|
476
|
+
| macOS ARM64 (Apple Silicon) | Supported |
|
|
477
|
+
| macOS x64 | Supported |
|
|
478
|
+
| Linux x64 | Supported |
|
|
479
|
+
| Linux ARM64 | Supported |
|
|
480
|
+
|
|
481
|
+
## License
|
|
482
|
+
|
|
483
|
+
[MIT](LICENSE)
|
package/SKILL.md
ADDED
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: agent-devtools
|
|
3
|
+
description: Browser automation and web debugging CLI for AI agents. Use when the user needs to interact with websites, fill forms, click buttons, take screenshots, extract data, test web apps, inspect network traffic, reverse-engineer APIs, intercept requests, or record/diff network flows. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data", "test this web app", "login to a site", "inspect network requests", "find API endpoints", "mock an API", or any task requiring programmatic web interaction.
|
|
4
|
+
allowed-tools: Bash(agent-devtools:*), Bash(./zig-out/bin/agent-devtools:*)
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Browser Automation with agent-devtools
|
|
8
|
+
|
|
9
|
+
Controls Chrome/Chromium via CDP. Browser persists via background daemon across commands.
|
|
10
|
+
|
|
11
|
+
## Core Workflow
|
|
12
|
+
|
|
13
|
+
1. `agent-devtools open <url>` — navigate
|
|
14
|
+
2. `agent-devtools snapshot -i` — get interactive element refs
|
|
15
|
+
3. Use refs (`@e1`, `@e2`) to interact
|
|
16
|
+
4. Re-snapshot after navigation or DOM changes
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
agent-devtools open https://example.com/form
|
|
20
|
+
agent-devtools snapshot -i
|
|
21
|
+
# Output:
|
|
22
|
+
# - textbox "Email" [ref=e1]
|
|
23
|
+
# - textbox "Password" [ref=e2]
|
|
24
|
+
# - button "Submit" [ref=e3]
|
|
25
|
+
|
|
26
|
+
agent-devtools fill @e1 "user@example.com"
|
|
27
|
+
agent-devtools fill @e2 "password123"
|
|
28
|
+
agent-devtools click @e3
|
|
29
|
+
agent-devtools snapshot -i # Re-snapshot after submit
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
**Refs are invalidated on page changes.** Always re-snapshot after clicking links, submitting forms, or loading dynamic content.
|
|
33
|
+
|
|
34
|
+
## Commands
|
|
35
|
+
|
|
36
|
+
### Navigation
|
|
37
|
+
```
|
|
38
|
+
open <url> Navigate (aliases: navigate, goto)
|
|
39
|
+
back / forward History navigation
|
|
40
|
+
reload Reload page
|
|
41
|
+
close Close browser + daemon
|
|
42
|
+
url / title Get current URL / page title
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Snapshot + Interaction
|
|
46
|
+
```
|
|
47
|
+
snapshot -i Interactive elements only (recommended)
|
|
48
|
+
snapshot Full accessibility tree
|
|
49
|
+
click @e1 Click
|
|
50
|
+
dblclick @e1 Double-click
|
|
51
|
+
tap @e1 Touch tap
|
|
52
|
+
fill @e1 "text" Clear + type
|
|
53
|
+
type @e1 "text" Type (no clear)
|
|
54
|
+
press Enter Press key
|
|
55
|
+
hover / focus @e1 Hover or focus
|
|
56
|
+
select @e1 "val" Select dropdown
|
|
57
|
+
check / uncheck @e1 Checkbox
|
|
58
|
+
scroll down 500 Scroll (up/down/left/right)
|
|
59
|
+
drag @e1 @e2 Drag and drop
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
### Get Information
|
|
63
|
+
```
|
|
64
|
+
get text/html/value @e1 Element content
|
|
65
|
+
get attr @e1 href Attribute value
|
|
66
|
+
get url / get title Page info
|
|
67
|
+
is visible/enabled/checked @e1
|
|
68
|
+
boundingbox @e1 Bounding box {x,y,w,h}
|
|
69
|
+
styles @e1 color Computed CSS value
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Find Elements (without snapshot)
|
|
73
|
+
```
|
|
74
|
+
find role button Find by ARIA role
|
|
75
|
+
find text "Submit" Find by text content
|
|
76
|
+
find label "Email" Find by label
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Capture & Performance
|
|
80
|
+
```
|
|
81
|
+
screenshot [path] PNG screenshot
|
|
82
|
+
screenshot --annotate [path] Screenshot with @ref labels overlay
|
|
83
|
+
diff-screenshot <baseline> [current] [--threshold N] [--output path]
|
|
84
|
+
pdf [path] Save as PDF
|
|
85
|
+
eval <js> Run JavaScript
|
|
86
|
+
video start/stop [path] Record video (requires FFmpeg)
|
|
87
|
+
trace start/stop [path] Chrome DevTools trace
|
|
88
|
+
profiler start/stop [path] CPU profiler
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
### Network (unique feature)
|
|
92
|
+
```
|
|
93
|
+
network list [pattern] List requests (filter by URL)
|
|
94
|
+
network get <id> Full request/response with body
|
|
95
|
+
analyze API reverse engineering + schema
|
|
96
|
+
intercept mock "/api" '{}' Mock response
|
|
97
|
+
intercept fail "/api" Block request
|
|
98
|
+
intercept delay "/api" 3000 Delay request
|
|
99
|
+
har [file] Export HAR 1.2
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Wait
|
|
103
|
+
```
|
|
104
|
+
wait <ms> Wait milliseconds
|
|
105
|
+
waitforloadstate [ms] Wait for page load
|
|
106
|
+
waitfor network <pat> [ms] Wait for network request
|
|
107
|
+
waitfor console <pat> [ms] Wait for console message
|
|
108
|
+
waitfor error [ms] Wait for JS error
|
|
109
|
+
waitdownload [ms] Wait for download
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Settings
|
|
113
|
+
```
|
|
114
|
+
set viewport 1920 1080 Viewport size
|
|
115
|
+
set media dark Color scheme
|
|
116
|
+
set timezone Asia/Seoul Timezone
|
|
117
|
+
set locale ko-KR Locale
|
|
118
|
+
set device "iPhone 14" Device emulation
|
|
119
|
+
set useragent "..." User agent
|
|
120
|
+
set geolocation 37.5 127 Geolocation
|
|
121
|
+
set headers '{"X":"Y"}' HTTP headers
|
|
122
|
+
set offline on Offline mode
|
|
123
|
+
set ignore-https-errors Ignore cert errors
|
|
124
|
+
set permissions grant geo Grant permission
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
### Storage & State
|
|
128
|
+
```
|
|
129
|
+
cookies [list/set/get/clear] Cookies
|
|
130
|
+
storage local [key] localStorage
|
|
131
|
+
state save/load/list Save/restore cookies + storage
|
|
132
|
+
credentials <user> <pass> HTTP basic auth
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Tabs & Console
|
|
136
|
+
```
|
|
137
|
+
tab list / new / close / switch <n>
|
|
138
|
+
console list / clear
|
|
139
|
+
errors [clear]
|
|
140
|
+
dialog accept/dismiss/info
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
### Recording
|
|
144
|
+
```
|
|
145
|
+
record <name> Save network state
|
|
146
|
+
diff <name> Compare current vs recorded
|
|
147
|
+
replay <name> Navigate + diff
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### Auth Vault
|
|
151
|
+
```
|
|
152
|
+
auth save <name> --url <url> --username <user> --password <pass>
|
|
153
|
+
auth login <name> Auto-login (navigate + fill + submit)
|
|
154
|
+
auth list / show / delete <name>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
### Security & Config
|
|
158
|
+
```
|
|
159
|
+
--proxy <url> Proxy server
|
|
160
|
+
--proxy-bypass <list> Proxy bypass list
|
|
161
|
+
--extension <path> Load Chrome extension
|
|
162
|
+
--allowed-domains <list> Restrict navigation domains
|
|
163
|
+
--content-boundaries Wrap output with boundary markers
|
|
164
|
+
--auto-connect Auto-discover running Chrome/Electron
|
|
165
|
+
agent-devtools.json Config file (project or ~/.agent-devtools/config.json)
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## Interactive Mode
|
|
169
|
+
|
|
170
|
+
`--interactive` for persistent sessions. Events stream automatically.
|
|
171
|
+
|
|
172
|
+
```bash
|
|
173
|
+
agent-devtools --interactive
|
|
174
|
+
> open https://example.com
|
|
175
|
+
< {"success":true}
|
|
176
|
+
< {"event":"network","url":"https://example.com/","method":"GET","status":200}
|
|
177
|
+
> snapshot -i
|
|
178
|
+
< {"success":true,"data":"- button \"Submit\" [ref=e1]\n"}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## Debug Mode
|
|
182
|
+
|
|
183
|
+
`--debug` with `--interactive` — action commands automatically include triggered API requests and URL changes. Static resources filtered.
|
|
184
|
+
|
|
185
|
+
```bash
|
|
186
|
+
agent-devtools --interactive --debug
|
|
187
|
+
> click @e3
|
|
188
|
+
< {"success":true,"debug":{"new_requests":[{"url":"/api/login","method":"POST","status":200}],"url_changed":true}}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
## Deep-Dive Documentation
|
|
192
|
+
|
|
193
|
+
For detailed reference, see `references/`:
|
|
194
|
+
- [commands.md](references/commands.md) — Full command reference
|
|
195
|
+
- [debug-mode.md](references/debug-mode.md) — Debug mode details
|
|
196
|
+
- [patterns.md](references/patterns.md) — Common automation patterns
|
|
197
|
+
|
|
198
|
+
## Ready-to-Use Templates
|
|
199
|
+
|
|
200
|
+
Copy and customize these shell scripts from `templates/`:
|
|
201
|
+
- [form-automation.sh](templates/form-automation.sh) — Form fill + submit
|
|
202
|
+
- [authenticated-session.sh](templates/authenticated-session.sh) — Login + state persistence
|
|
203
|
+
- [api-discovery.sh](templates/api-discovery.sh) — API reverse engineering workflow
|