← 一覧へ
テストClaude Code難易度: 中級
ブラウザテスト with DevTools browser-testing-with-devtools
本物のブラウザでテストしよう！DevToolsで楽々デバッグ
これは何？
このスキルを使えば、ChromeのDevToolsを通じて、ブラウザ内で動くアプリの動作を確認できます。ユーザーが見ている画面をそのまま再現し、DOMの構造やコンソールのログ、ネットワークリクエストの内容までチェック可能。コードの動きをリアルタイムで確かめられますよ！
これでできること
- ブラウザ上で表示されるUIの問題を見つける
- コンソールに表示されるエラーや警告を確認する
- ネットワークリクエストやAPIのレスポンスを分析する
- パフォーマンスデータを計測し、改善点を見つける
こんな時に便利
ブラウザで動くアプリを作ったり修正する時
UIのレイアウトやスタイル、操作感の問題を調べる時
コンソールのエラーメッセージをなぜ出しているか調べる時
APIの呼び出しやレスポンスの内容を確認する時
ウェブページのパフォーマンスを改善する時
使い方
ChromeのDevToolsを開き、MCP（Maintained Context Protocol）を使ってエージェントをブラウザに接続します。これで、ブラウザ内の動作をリアルタイムで確認し、必要なデータを収集できます。
必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/addyosmani/agent-skills/tree/main/skills/browser-testing-with-devtools手動で置く
Claude Code →
~/.claude/skills/browser-testing-with-devtools/Codex →
~/.agents/skills/browser-testing-with-devtools/使いこなしのコツ
- ビジュアルリグレッションテストにスクリーンショットを使おう！
- まず「変更前」のスクリーンショットを撮る
- コードを変更し、ページを再読み込みする
- 変更後のスクリーンショットを比較する