npx skills add https://github.com/vercel-labs/dev3000 --skill d3kd3k 将浏览器和服务器日志捕获到统一的日志文件中。请使用以下命令:
d3k errors # 显示最近的错误(浏览器 + 服务器合并)
d3k errors --context # 显示错误及其之前的用户操作
d3k errors -n 20 # 显示最近 20 个错误
d3k logs # 显示最近的日志(浏览器 + 服务器合并)
d3k logs --type browser # 仅浏览器日志
d3k logs --type server # 仅服务器日志
d3k fix # 深度分析应用程序错误
d3k fix --focus build # 专注于构建错误
d3k crawl # 发现应用 URL
d3k crawl --depth all # 详尽爬取
d3k find-component "nav" # 查找 React 组件源代码
首先运行 d3k cdp-port 获取端口号,然后在所有浏览器命令中直接使用该端口:
d3k cdp-port # 返回例如 9222
d3k agent-browser --cdp 9222 open http://localhost:3000/page
d3k agent-browser --cdp 9222 snapshot -i # 获取元素引用 (@e1, @e2)
d3k agent-browser --cdp 9222 click @e2
d3k agent-browser --cdp 9222 fill @e3 "text"
d3k agent-browser --cdp 9222 screenshot /tmp/shot.png
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
根据任务选择匹配的浏览器工具:
agent-browser
snapshot、基于引用的 click、fill,或者需要复现用户在监控标签页中看到的内容时使用它。next-browser
tree、errors、logs、routes、project 以及相关的 Next 开发服务器诊断。agent-browser 的直接替代品:没有无障碍 snapshot、没有基于引用的 click、没有 fill。d3k cdp-port。实用规则:
agent-browser。next-browser。示例:
# 同一个被监控的浏览器会话
d3k agent-browser --cdp 9222 snapshot -i
d3k agent-browser --cdp 9222 click @e2
# Next.js 专用检查
d3k next-browser open http://localhost:3000
d3k next-browser tree
d3k next-browser errors
d3k next-browser logs
要让 d3k 在启动辅助浏览器命令时优先使用本地工具,请使用:
d3k --browser-tool agent-browser
d3k --browser-tool next-browser
d3k errors --context - 查看错误及其触发原因d3k cdp-port 获取端口,然后运行 d3k agent-browser --cdp <port> open <url>,接着运行 click @e1 进行重放d3k errors - 验证修复是否生效当为视觉更改创建 PR 时,务必捕获前后对比截图以展示影响:
在进行更改之前,对生产站点进行截图(首先运行 d3k cdp-port 获取端口):
d3k agent-browser --cdp <port> open https://production-url.com/affected-page d3k agent-browser --cdp <port> screenshot /tmp/before.png
在进行更改之后,对 localhost 进行截图:
d3k agent-browser --cdp <port> open http://localhost:3000/affected-page d3k agent-browser --cdp <port> screenshot /tmp/after.png
或者使用工具 API 一次性捕获多个路由:
capture_before_after_screenshots( productionUrl: "https://myapp.vercel.app", routes: ["/", "/about", "/contact"] )
在 PR 描述中包含,使用 markdown 格式:
| 路由 | 之前 | 之后 |
|-------|--------|-------|
| `/` |  |  |
通过将截图拖放到 GitHub PR 描述中来上传它们。
每周安装量
106
代码仓库
GitHub 星标数
1.1K
首次出现
2026年2月8日
安全审计
安装于
codex105
opencode104
gemini-cli102
github-copilot101
amp100
kimi-cli99
d3k captures browser and server logs in a unified log file. Use these commands:
d3k errors # Show recent errors (browser + server combined)
d3k errors --context # Show errors + user actions that preceded them
d3k errors -n 20 # Show last 20 errors
d3k logs # Show recent logs (browser + server combined)
d3k logs --type browser # Browser logs only
d3k logs --type server # Server logs only
d3k fix # Deep analysis of application errors
d3k fix --focus build # Focus on build errors
d3k crawl # Discover app URLs
d3k crawl --depth all # Exhaustive crawl
d3k find-component "nav" # Find React component source
First run d3k cdp-port to get the port number, then use it directly in all browser commands:
d3k cdp-port # Returns e.g. 9222
d3k agent-browser --cdp 9222 open http://localhost:3000/page
d3k agent-browser --cdp 9222 snapshot -i # Get element refs (@e1, @e2)
d3k agent-browser --cdp 9222 click @e2
d3k agent-browser --cdp 9222 fill @e3 "text"
d3k agent-browser --cdp 9222 screenshot /tmp/shot.png
Use the browser tool that matches the task:
agent-browser
snapshot, ref-based click, fill, or to reproduce what the user sees in the monitored tab.next-browser
tree, errors, logs, routes, project, and related Next dev-server diagnostics.Practical rule:
agent-browser.next-browser.Examples:
# Same monitored browser session
d3k agent-browser --cdp 9222 snapshot -i
d3k agent-browser --cdp 9222 click @e2
# Next.js-specific inspection
d3k next-browser open http://localhost:3000
d3k next-browser tree
d3k next-browser errors
d3k next-browser logs
To make d3k prefer one locally when it launches helper browser commands, use:
d3k --browser-tool agent-browser
d3k --browser-tool next-browser
d3k errors --context - See errors and what triggered themd3k cdp-port to get the port, then d3k agent-browser --cdp <port> open <url> then click @e1 to replayd3k errors - Verify fix workedWhen creating a PR for visual changes, always capture before/after screenshots to show the impact:
Before making changes , screenshot the production site (run d3k cdp-port first to get the port):
d3k agent-browser --cdp <port> open https://production-url.com/affected-page d3k agent-browser --cdp <port> screenshot /tmp/before.png
After making changes , screenshot localhost:
d3k agent-browser --cdp <port> open http://localhost:3000/affected-page d3k agent-browser --cdp <port> screenshot /tmp/after.png
Or use the tooling API to capture multiple routes at once:
capture_before_after_screenshots( productionUrl: "https://myapp.vercel.app", routes: ["/", "/about", "/contact"] )
Include in PR description using markdown:
| Route | Before | After |
|-------|--------|-------|
| `/` |  |  |
Upload screenshots by dragging them into the GitHub PR description.
Weekly Installs
106
Repository
GitHub Stars
1.1K
First Seen
Feb 8, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
codex105
opencode104
gemini-cli102
github-copilot101
amp100
kimi-cli99
通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南
40,000 周安装
agent-browser: no accessibility snapshot, no ref-based click, and no fill.d3k cdp-port.