Skip to main content

Tracing

记录执行跟踪，捕获每个步骤的 DOM 快照、屏幕截图、网络活动和控制台日志。需要 devtools 功能。

🌐 Record execution traces that capture DOM snapshots, screenshots, network activity, and console logs at every step. Requires the devtools capability.

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=devtools"]
    }
  }
}

browser_start_tracing​

开始启用截图和 DOM 快照的跟踪记录。不需要任何参数。跟踪会实时写入输出目录中的 traces/，因此在录制过程中链接是可用的。

🌐 Start trace recording with screenshots and DOM snapshots enabled. Takes no parameters. Traces are written live into traces/ inside the output directory, so the links are usable while recording.

→ browser_start_tracing

  Trace recording started
  - [Action log](traces/trace-1772620500000.trace)
  - [Network log](traces/trace-1772620500000.network)
  - [Resources](traces/resources)

browser_stop_tracing​

停止跟踪记录。不需要参数。如果跟踪未开始则失败。

🌐 Stop trace recording. Takes no parameters. Fails if tracing was not started.

→ browser_stop_tracing

  Trace recording stopped.
  - [Trace](traces/trace-1772620500000.trace)
  - [Network log](traces/trace-1772620500000.network)
  - [Resources](traces/resources)

在 Playwright Trace Viewer 中查看跟踪：

🌐 View traces in the Playwright Trace Viewer:

npx playwright show-trace traces/trace-1772620500000.trace

追踪查看器显示每个操作的时间轴，包括 DOM 快照（前后）、截图、网络请求和响应、控制台消息以及时间信息。

🌐 The trace viewer shows a timeline of every action with DOM snapshots (before and after), screenshots, network requests and responses, console messages, and timing.

工作流程：调试损坏的结账​

🌐 Workflow: debugging a broken checkout

You: Something fails during checkout. Record a trace.

→ browser_start_tracing
→ browser_navigate { url: "https://store.example.com/cart" }
→ browser_click { target: "e15" }
→ browser_fill_form { fields: [
    { name: "Name",    target: "e30", type: "textbox", value: "Alice Smith" },
    { name: "Address", target: "e32", type: "textbox", value: "123 Main St" },
    { name: "Zip",     target: "e34", type: "textbox", value: "94102" }
  ]}
→ browser_click { target: "e40" }

  - heading "Error" [level=1] [ref=e2]
  - text: Payment processing failed

→ browser_console_messages { level: "error" }
  [ERROR] POST /api/payment 422: {"error":"Card number required"}

→ browser_stop_tracing
  // Share the trace with the team for full timeline analysis

自动会话录制​

🌐 Automatic session recording

自动保存每次会话的日志：

🌐 Save a session log for every session automatically:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--caps=devtools", "--save-session"]
    }
  }
}