d3k

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

d3k Commands

d3k 命令

d3k captures browser and server logs in a unified log file. Use these commands:

d3k 将浏览器和服务器日志捕获到一个统一的日志文件中。使用以下命令：

Viewing Errors and Logs

查看错误与日志

bash

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

bash

d3k errors              # 显示近期错误（浏览器+服务器合并）
d3k errors --context    # 显示错误及其之前的用户操作
d3k errors -n 20        # 显示最近20条错误

d3k logs                # 显示近期日志（浏览器+服务器合并）
d3k logs --type browser # 仅显示浏览器日志
d3k logs --type server  # 仅显示服务器日志

Other Commands

其他命令

bash

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

bash

d3k fix                 # 深度分析应用错误
d3k fix --focus build   # 聚焦构建错误

d3k crawl               # 发现应用URL
d3k crawl --depth all   # 全面爬取

d3k find-component "nav"  # 查找React组件源码

Browser Interaction

浏览器交互

To click elements, navigate, or take screenshots, use

d3k agent-browser --cdp $(d3k cdp-port)

bash

d3k agent-browser --cdp $(d3k cdp-port) open http://localhost:3000/page
d3k agent-browser --cdp $(d3k cdp-port) snapshot -i    # Get element refs (@e1, @e2)
d3k agent-browser --cdp $(d3k cdp-port) click @e2
d3k agent-browser --cdp $(d3k cdp-port) fill @e3 "text"
d3k agent-browser --cdp $(d3k cdp-port) screenshot /tmp/shot.png

要点击元素、导航或截取屏幕截图，请使用

d3k agent-browser --cdp $(d3k cdp-port)

：

bash

d3k agent-browser --cdp $(d3k cdp-port) open http://localhost:3000/page
d3k agent-browser --cdp $(d3k cdp-port) snapshot -i    # 获取元素引用（@e1, @e2）
d3k agent-browser --cdp $(d3k cdp-port) click @e2
d3k agent-browser --cdp $(d3k cdp-port) fill @e3 "text"
d3k agent-browser --cdp $(d3k cdp-port) screenshot /tmp/shot.png

Fix Workflow

错误修复流程

```
d3k errors --context
```
- See errors and what triggered them
Fix the code

d3k agent-browser --cdp $(d3k cdp-port) open <url>

then

click @e1

to replay

```
d3k errors
```
- Verify fix worked

```
d3k errors --context
```
- 查看错误及其触发原因
修复代码

d3k agent-browser --cdp $(d3k cdp-port) open <url>

然后

click @e1

来复现操作

```
d3k errors
```
- 验证修复是否生效

Creating PRs with Before/After Screenshots

生成带前后对比截图的PR

When creating a PR for visual changes, always capture before/after screenshots to show the impact:

Before making changes, screenshot the production site:

bash

d3k agent-browser --cdp $(d3k cdp-port) open https://production-url.com/affected-page
d3k agent-browser --cdp $(d3k cdp-port) screenshot /tmp/before.png

After making changes, screenshot localhost:

bash

d3k agent-browser --cdp $(d3k cdp-port) open http://localhost:3000/affected-page
d3k agent-browser --cdp $(d3k 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:

markdown

### Visual Comparison
| Route | Before | After |
|-------|--------|-------|
| `/` | ![Before](before.png) | ![After](after.png) |

Upload screenshots by dragging them into the GitHub PR description.

当针对视觉变更创建PR时，务必捕获前后对比截图以展示变更影响：

在进行变更前，截取生产环境站点的截图：

bash

d3k agent-browser --cdp $(d3k cdp-port) open https://production-url.com/affected-page
d3k agent-browser --cdp $(d3k cdp-port) screenshot /tmp/before.png

完成变更后，截取本地环境的截图：

bash

d3k agent-browser --cdp $(d3k cdp-port) open http://localhost:3000/affected-page
d3k agent-browser --cdp $(d3k cdp-port) screenshot /tmp/after.png

或者使用工具API一次性捕获多个路由的截图：

capture_before_after_screenshots(
  productionUrl: "https://myapp.vercel.app",
  routes: ["/", "/about", "/contact"]
)

在PR描述中使用Markdown格式添加：

markdown

### 视觉对比
| 路由 | 变更前 | 变更后 |
|-------|--------|-------|
| `/` | ![Before](before.png) | ![After](after.png) |

可通过将截图拖入GitHub PR描述框来上传截图。