Back to Details

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

错误修复流程

  1. d3k errors --context
    - See errors and what triggered them
  2. Fix the code
  3. d3k agent-browser --cdp $(d3k cdp-port) open <url>
    then 
    click @e1
    to replay
  4. d3k errors
    - Verify fix worked
  1. d3k errors --context
    - 查看错误及其触发原因
  2. 修复代码
  3. d3k agent-browser --cdp $(d3k cdp-port) open <url>
    然后 
    click @e1
    来复现操作
  4. 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:
  1. 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
  2. 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
  3. Or use the tooling API to capture multiple routes at once:
    capture_before_after_screenshots(
  productionUrl: "https://myapp.vercel.app",
  routes: ["/", "/about", "/contact"]
)
  4. 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时，务必捕获前后对比截图以展示变更影响：
  1. 在进行变更前，截取生产环境站点的截图：
    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
  2. 完成变更后，截取本地环境的截图：
    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
  3. 或者使用工具API一次性捕获多个路由的截图：
    capture_before_after_screenshots(
  productionUrl: "https://myapp.vercel.app",
  routes: ["/", "/about", "/contact"]
)
  4. 在PR描述中使用Markdown格式添加：
    markdown
    ### 视觉对比
| 路由 | 变更前 | 变更后 |
|-------|--------|-------|
| `/` | ![Before](before.png) | ![After](after.png) |
    可通过将截图拖入GitHub PR描述框来上传截图。