chrome-devtools

Chrome DevTools エージェントスキル

実行可能な Puppeteer スクリプトを使ったブラウザー自動化。すべてのスクリプトは、解析しやすいように JSON を出力します。

クイックスタート

インストール

ステップ 1：システム依存関係のインストール（Linux/WSL のみ）

Linux/WSL では、Chrome にシステムライブラリが必要です。まず、これらをインストールします。

cd .claude/skills/chrome-devtools/scripts
./install-deps.sh  # Auto-detects OS and installs required libs

対応環境：Ubuntu、Debian、Fedora、RHEL、CentOS、Arch、Manjaro

macOS/Windows：このステップはスキップしてください（依存関係は Chrome に同梱されています）

ステップ 2：Node 依存関係のインストール

npm install  # Installs puppeteer, debug, yargs

テスト

node navigate.js --url https://example.com
# Output: {"success": true, "url": "https://example.com", "title": "Example Domain"}

利用可能なスクリプト

すべてのスクリプトは .claude/skills/chrome-devtools/scripts/ にあります。

スクリプトの使い方

• ./scripts/README.md

コア自動化

• navigate.js - URL に移動します
• screenshot.js - スクリーンショットを撮影します（ページ全体または要素）
• click.js - 要素をクリックします
• fill.js - フォームフィールドに入力します
• evaluate.js - ページコンテキストで JavaScript を実行します

分析とモニタリング

• snapshot.js - インタラクティブ要素をメタデータ付きで抽出します
• console.js - コンソールメッセージやエラーを監視します
• network.js - HTTP リクエストとレスポンスを追跡します
• performance.js - Core Web Vitals を測定し、トレースを記録します

使用パターン

単一コマンド

cd .claude/skills/chrome-devtools/scripts
node screenshot.js --url https://example.com --output ./docs/screenshots/page.png

重要：スクリーンショットは必ず ./docs/screenshots ディレクトリに保存してください。

コマンドの連続実行（ブラウザーを再利用）

# Keep browser open with --close false
node navigate.js --url https://example.com/login --close false
node fill.js --selector "#email" --value "[email protected]" --close false
node fill.js --selector "#password" --value "secret" --close false
node click.js --selector "button[type=submit]"

JSON 出力の解析

# Extract specific fields with jq
node performance.js --url https://example.com | jq '.vitals.LCP'

# Save to file
node network.js --url https://example.com --output /tmp/requests.json

一般的なワークフロー

Web スクレイピング

node evaluate.js --url https://example.com --script "
  Array.from(document.querySelectorAll('.item')).map(el => ({
    title: el.querySelector('h2')?.textContent,
    link: el.querySelector('a')?.href
  }))
" | jq '.result'

パフォーマンステスト

PERF=$(node performance.js --url https://example.com)
LCP=$(echo $PERF | jq '.vitals.LCP')
if (( $(echo "$LCP < 2500" | bc -l) )); then
  echo "✓ LCP passed: ${LCP}ms"
else
  echo "✗ LCP failed: ${LCP}ms"
fi

フォームの自動化

node fill.js --url https://example.com --selector "#search" --value "query" --close false
node click.js --selector "button[type=submit]"

エラーのモニタリング

node console.js --url https://example.com --types error,warn --duration 5000 | jq '.messageCount'

スクリプトのオプション

すべてのスクリプトが以下に対応しています。

• --headless false - ブラウザーウィンドウを表示します
• --close false - ブラウザーを開いたままにし、連続実行できるようにします
• --timeout 30000 - タイムアウトを設定します（ミリ秒）
• --wait-until networkidle2 - 待機方法を指定します

すべてのオプションについては、./scripts/README.md を参照してください。

出力形式

すべてのスクリプトは stdout に JSON を出力します。

{
  "success": true,
  "url": "https://example.com",
  ... // script-specific data
}

エラーは stderr に出力されます。

{
  "success": false,
  "error": "Error message"
}

要素の検索

snapshot.js を使ってセレクターを確認します。

node snapshot.js --url https://example.com | jq '.elements[] | {tagName, text, selector}'

トラブルシューティング

よくあるエラー

「Cannot find package 'puppeteer'」

• scripts ディレクトリで npm install を実行します

「error while loading shared libraries: libnss3.so」（Linux/WSL）

• システム依存関係が不足しています
• 解決方法：scripts ディレクトリで ./install-deps.sh を実行します
• 手動でインストールする場合：sudo apt-get install -y libnss3 libnspr4 libasound2t64 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libxkbcommon0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1

「Failed to launch the browser process」

• システム依存関係がインストールされていることを確認します（Linux/WSL）
• Chrome がダウンロードされていることを確認します：ls ~/.cache/puppeteer
• npm rebuild を実行してから、npm install を試します

Chrome が見つからない

• Puppeteer は npm install の実行時に Chrome を自動ダウンロードします
• ダウンロードに失敗した場合は、手動で実行します：npx puppeteer browsers install chrome

スクリプトの問題

要素が見つからない

• まずスナップショットを取得し、正しいセレクターを確認します：node snapshot.js --url <url>

スクリプトが停止する

• タイムアウトを延長します：--timeout 60000
• 待機方法を変更します：--wait-until load または --wait-until domcontentloaded

スクリーンショットが真っ白

• ページの読み込みを待ちます：--wait-until networkidle2
• タイムアウトを延長します：--timeout 30000

スクリプトの実行権限がない

• 実行可能にします：chmod +x *.sh

リファレンスドキュメント

詳細なガイドは ./references/ にあります。

• CDP ドメインリファレンス - 47 の Chrome DevTools Protocol ドメイン
• Puppeteer クイックリファレンス - Puppeteer API のパターンを網羅
• パフォーマンス分析ガイド - Core Web Vitals の最適化

高度な使い方

カスタムスクリプト

共有ライブラリを使ってカスタムスクリプトを作成します。

import { getBrowser, getPage, closeBrowser, outputJSON } from './lib/browser.js';
// Your automation logic

CDP への直接アクセス

const client = await page.createCDPSession();
await client.send('Emulation.setCPUThrottlingRate', { rate: 4 });

高度なパターンと API の全容については、リファレンスドキュメントを参照してください。

外部リソース

• Puppeteer ドキュメント
• Chrome DevTools Protocol
• スクリプトの README