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.

ユースケース

Debugging failed automation runs by reviewing captured CDP logs and DOM states.
Auditing network and console activity during active AI agent browser sessions.
Generating structured per-page data buckets for historical session analysis.

導入方法

# Review source first
open https://github.com/mxyhi/ok-skills/blob/main/browser-trace/SKILL.md

Copy 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

コーディング

新しいスキルの作成、既存スキルの修正と改善、およびスキルパフォーマンスの測定を行います。ユーザーがスキルをゼロから作成、既存スキルの編集や最適化、スキルテストのための評価(evals)の実行、分散分析によるスキルパフォーマンスのベンチマーク、またはトリガー精度の向上のためのスキル説明の最適化を行いたい場合に使用します。

Claude CodeClaude
pythondesign
165,880 StarsApache-2.0

Claude API

anthropics/skills

コーディング

Claude API / Anthropic SDK のリファレンス — model ids、pricing、params、streaming、tool use、MCP、agents、caching、token counting、model migration。TRIGGER — ターゲットファイルを開く BEFORE を読み取ります。「1行のように見える」という理由でスキップしないでください。— 次の場合:プロンプトに Claude/Anthropic が何らかの形式(Claude、Anthropic、Fable、Opus、Sonnet、Haiku、`anthropic`、`@anthropic-ai`、`claude-*`、`us.anthropic.*`、`[1m]`)で指定されている場合、またはユーザーが LLM(pricing/model choice/limits/caching)について質問した場合 — 決して回答しないでください

Claude CodeClaude
typescriptpython
165,880 StarsApache-2.0

MCP Builder

anthropics/skills

コーディング

適切に設計されたツールを通じて、LLMが外部サービスと連携できるようにする高品質な MCP (Model Context Protocol) サーバーを作成するためのガイドです。Python (FastMCP) または Node/TypeScript (MCP SDK) を使用して、外部APIやサービスを統合する MCP サーバーを構築する際に使用します。

CodexClaude
typescriptpython
165,880 StarsApache-2.0

CI Cd And Automation

addyosmani/agent-skills

DevOps

CI/CDパイプラインのセットアップを自動化します。ビルドおよびデプロイパイプラインの設定や変更時に使用します。クオリティゲートの自動化、CIでのテストランナーの設定、またはデプロイ戦略の確立が必要な場合に使用してください。

typescriptsecurity
81,373 StarsMIT

API And Interface Design

addyosmani/agent-skills

コーディング

安定した API とインターフェース設計をガイドします。API、モジュールの境界、またはパブリックインターフェースの設計時に使用します。REST や GraphQL エンドポイントの作成、モジュール間の型コントラクトの定義、フロントエンドとバックエンドの境界設定に活用してください。

typescriptfrontend
81,373 StarsMIT

Browser Testing With Devtools

addyosmani/agent-skills

コーディング

Chrome DevTools MCP を介して実際のブラウザでテストを実行します。ブラウザで動作するものの構築やデバッグ時に使用します。DOM の検査、コンソールエラーのキャプチャ、ネットワークリクエストの分析、パフォーマンスのプロファイリング、または実際のランタイムデータによる視覚的出力の検証が必要な場合に使用してください。chrome-devtools MCP サーバーの設定が必要です。

Claude CodeClaude
javascriptreact
81,373 StarsMIT