Communityコーディング&開発github.com

timgunnar/skills-page-debug

page-debug スキルは、ブラウザのリアルタイムデバッグ機能を実装します。テストスクリプトが前提ステップを完了し、失敗の直前で正確に停止します。その後、エージェントとの対話を通じて、CDPプロトコルでブラウザを制御し、Claude Code内でDevToolsのようにページ状態を確認、セレクタを検証、操作を試行し、根本原因を特定できます。

skills-page-debug とは?

page-debug スキルは、AIエージェント(特にClaude Code)向けのブラウザリアルタイムデバッグツールです。テスト自動化のワークフローにおいて、スクリプトが自動で前提ステップを実行し、失敗直前に停止します。これにより、開発者はエージェントと対話しながら、Chrome DevTools Protocol(CDP)を介してブラウザを直接操作できます。ページの状態確認、CSSセレクタの検証、実際の操作(クリック、入力など)をリアルタイムで行い、バグの根本原因を効率的に特定できます。主なユースケースは、複雑なテストシナリオのデバッグや、再現が困難なUIバグの調査です。このスキルは、従来のログベースのデバッグに比べて、操作のコンテキストを維持したまま問題を調査できる点が優れています。

対応✓Claude Code~Codex CLI~Cursor
npx skills add timgunnar/skills-page-debug

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

skills-page-debug は何をしますか?

page-debug スキルは、ブラウザのリアルタイムデバッグ機能を実装します。テストスクリプトが前提ステップを完了し、失敗の直前で正確に停止します。その後、エージェントとの対話を通じて、CDPプロトコルでブラウザを制御し、Claude Code内でDevToolsのようにページ状態を確認、セレクタを検証、操作を試行し、根本原因を特定できます。

関連スキル