Browser Trace
Capture a full DevTools-protocol trace of any browser automation — CDP firehose, screenshots, and DOM dumps — then bisect the stream into per-page searchable buckets. Use when the user wants to debug a failed run, audit network/console/DOM activity, attach a trace to an in-progress session, or feed structured per-page
概览
Browser Trace is a specialized utility for AI agents, part of the mxyhi/ok-skills repository. It enables comprehensive monitoring of browser automation by capturing full DevTools-protocol traces. The tool records a Chrome DevTools Protocol (CDP) firehose, including screenshots and DOM dumps, which it then organizes into searchable, page-specific buckets. This functionality allows developers to audit network activity, console logs, and DOM states across different session stages. Compatible with agents like Claude, Cursor, and Codex, it provides structured data for debugging failed automation runs or auditing in-progress sessions. By bisecting the data stream, it simplifies the analysis of complex web interactions, making it easier to feed per-page context back into AI models for more accurate troubleshooting.
使用场景
安装说明
# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/browser-trace/SKILL.mdCopy or clone the skill folder into your agent skills directory after reviewing its instructions and scripts.
安全提示
Users should be aware that capturing full DevTools-protocol traces, including DOM dumps and screenshots, may record sensitive information visible during the browser session. Access to the resulting data buckets should be restricted to authorized users to prevent exposure of credentials or private data captured during the automation process.
相关 Skills
Skill Creator
anthropics/skills
创建新技能、修改和改进现有技能,并衡量技能性能。适用于用户希望从零开始创建技能、编辑或优化现有技能、运行评估以测试技能、通过方差分析对技能性能进行基准测试,或优化技能描述以提高触发准确性的场景。
Claude API
anthropics/skills
Claude API / Anthropic SDK 参考指南 — 包含模型 ID、定价、参数、流式传输、工具使用、MCP、智能体、缓存、Token 计数、模型迁移。 TRIGGER — 阅读 BEFORE 并打开目标文件;不要因为其“看起来像单行代码”而跳过 — 适用场景:提示词以任何形式提及 Claude/Anthropic(Claude、Anthropic、Fable、Opus、Sonnet、Haiku、`anthropic`、`@anthropic-ai`、`claude-*`、`us.anthropic.*`、`[1m]`);用户询问关于 LLM(定价/模型选择/限制/缓存) — 绝不回答
MCP Builder
anthropics/skills
创建高质量 MCP (Model Context Protocol) 服务器的指南,使 LLM 能够通过设计良好的工具与外部服务进行交互。在构建 MCP 服务器以集成外部 API 或服务时使用,无论是使用 Python (FastMCP) 还是 Node/TypeScript (MCP SDK)。
CI Cd And Automation
addyosmani/agent-skills
自动化 CI/CD 流水线设置。适用于设置或修改构建和部署流水线。当需要自动化质量门禁、在 CI 中配置测试运行器或建立部署策略时使用。
API And Interface Design
addyosmani/agent-skills
指导稳定的 API 和接口设计。在设计 API、模块边界或任何公共接口时使用。在创建 REST 或 GraphQL 端点、定义模块间的类型契约或建立前后端边界时使用。
Browser Testing With Devtools
addyosmani/agent-skills
通过 Chrome DevTools MCP 在真实浏览器中进行测试。在构建或调试任何在浏览器中运行的内容时使用。当你需要检查 DOM、捕获控制台错误、分析网络请求、分析性能或使用真实运行时数据验证视觉输出时使用。需要配置 chrome-devtools MCP 服务器。