firefox-debug

Firefox DevTools 統合スキル

目的

このスキルは、mcporter を通じて開発ワークフローに Firefox Remote Debugging Protocol（RDP）をシームレスに統合します。Firefox がリモートデバッグ接続を受け入れるように設定し、エージェントによるブラウザー操作とデバッグのためのツールを提供します。

前提条件 [CRITICAL]

mise x node@20 -- mcporter call 'firefox-devtools.getVersion'

Firefox のバージョン情報（JSON）が返されるはずです。失敗する場合、Firefox はポート 6000 でリッスンしていません。

主な概念

Firefox Remote Debugging Protocol（RDP）

Firefox は、デフォルトでポート 6000 の WebSocket 接続を介して RDP を使用し、mcporter を通じてエージェントとのやり取りに利用できます。

主な機能：

• インスペクター：DOM の操作と検査
• デバッガー：JavaScript のブレークポイントとステップ実行
• コンソール：スクリプトの実行とログの表示
• ネットワーク：リクエストの監視とインターセプト
• パフォーマンス：実行時のパフォーマンスをプロファイル
• ストレージ：Cookie、localStorage、sessionStorage へのアクセス

利用可能なツール

• firefox-devtools.getVersion [引数なし]
• firefox-devtools.getTabs [引数なし]
• firefox-devtools.navigateToUrl [url]
• firefox-devtools.takeScreenshot [tabId]
• firefox-devtools.clickElement [tabId, selector]
• firefox-devtools.fillFormField [tabId, selector, value]
• firefox-devtools.getPageContent [tabId]
• firefox-devtools.evaluateScript [tabId, script]
• firefox-devtools.getConsoleOutput [tabId]
• firefox-devtools.getStorage [tabId, storageType]

一般的なワークフロー

1. Web アプリケーションの状態を調べる

You: "Navigate to http://localhost:3000 and take a screenshot"
Agent uses Firefox Remote Debugging Protocol → Takes screenshot → Returns visual state

2. JavaScript エラーをデバッグする

You: "Open DevTools console and read the error messages"
Agent uses Firefox Remote Debugging Protocol → Reads console → Explains errors

3. 自動テスト／検証

You: "Fill the form with test data and submit it"
Agent uses Firefox Remote Debugging Protocol → Automates interaction → Reports results

4. DOM の検査とストレージへのアクセス

You: "Check localStorage for the auth token"
Agent uses Firefox Remote Debugging Protocol → Inspects storage → Returns values

クイックリファレンス

タスク	mcporter の呼び出し
Firefox のリッスン状態を確認	mise x node@20 -- mcporter call 'firefox-devtools.getVersion'
ブラウザーのタブを一覧表示	mise x node@20 -- mcporter call 'firefox-devtools.getTabs'
スクリーンショットを撮る	mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "<id>")'
要素をクリック	mise x node@20 -- mcporter call 'firefox-devtools.clickElement(tabId: "<id>", selector: "#login")'
フォームフィールドに入力	mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "<id>", selector: "#email", value: "[email protected]")'
ページのコンテンツを取得	mise x node@20 -- mcporter call 'firefox-devtools.getPageContent(tabId: "<id>")'
URL に移動	mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "<id>", url: "http://localhost:3000")'
JavaScript を実行	mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "<id>", script: "document.title")'
コンソールを読み取る	mise x node@20 -- mcporter call 'firefox-devtools.getConsoleOutput(tabId: "<id>")'
ストレージにアクセス	mise x node@20 -- mcporter call 'firefox-devtools.getStorage(tabId: "<id>", storageType: "localStorage")'

詳細な例

例 1：ストレージを検証しながらフォームをテストする

フォームに入力して送信し、localStorage が更新されたことを確認します：

TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')

# Navigate to form page
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/form")'

sleep 2

# Fill and submit form
mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", selector: "#email", value: "[email protected]")'

mise x node@20 -- mcporter call 'firefox-devtools.fillFormField(tabId: "'$TAB_ID'", selector: "#password", value: "testpass123")'

mise x node@20 -- mcporter call 'firefox-devtools.clickElement(tabId: "'$TAB_ID'", selector: "#submit")'

sleep 1

# Check localStorage for auth token
STORAGE=$(mise x node@20 -- mcporter call 'firefox-devtools.getStorage(tabId: "'$TAB_ID'", storageType: "localStorage")')

echo "$STORAGE" | jq '.auth_token'

例 2：JavaScript による測定とホバー操作

要素のプロパティを測定し、ホバー状態をシミュレートします：

TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')

# Navigate to page with interactive elements
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/interactive")'

sleep 2

# Measure element dimensions and trigger hover
MEASUREMENTS=$(mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "const el = document.querySelector(\".interactive-button\"); const bounds = el.getBoundingClientRect(); el.dispatchEvent(new MouseEvent(\"mouseenter\", { bubbles: true })); setTimeout(() => { const computed = window.getComputedStyle(el); console.log(JSON.stringify({ bounds: { x: bounds.x, y: bounds.y, width: bounds.width, height: bounds.height }, backgroundColor: computed.backgroundColor, transform: computed.transform, opacity: computed.opacity })); }, 300);")')

echo "$MEASUREMENTS" | jq '.'

例 3：スクリーンショットを順に撮影してパフォーマンスをテストする

ページの読み込みパフォーマンスを測定し、表示の変化を撮影します：

TAB_ID=$(mise x node@20 -- mcporter call 'firefox-devtools.getTabs' | jq -r '.[0].id')
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
SCREENSHOT_DIR="./firefox-screenshots/$TIMESTAMP"
mkdir -p "$SCREENSHOT_DIR"

# Clear and start fresh
mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "performance.mark(\"test-start\");")'

# Navigate and capture
mise x node@20 -- mcporter call 'firefox-devtools.navigateToUrl(tabId: "'$TAB_ID'", url: "http://localhost:3000/dashboard")'

# Screenshot at different stages
sleep 1
mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/01-load-complete.png"

sleep 2
mise x node@20 -- mcporter call 'firefox-devtools.takeScreenshot(tabId: "'$TAB_ID'")' > "$SCREENSHOT_DIR/02-render-complete.png"

# Measure performance metrics
PERF=$(mise x node@20 -- mcporter call 'firefox-devtools.evaluateScript(tabId: "'$TAB_ID'", script: "const perf = performance.getEntriesByType(\"navigation\")[0]; { pageLoadTime: perf.loadEventEnd - perf.fetchStart, domContentLoaded: perf.domContentLoadedEventEnd - perf.fetchStart, firstPaint: performance.getEntriesByName(\"first-paint\")[0]?.startTime || null }")')

echo "$PERF" | jq '.' > "$SCREENSHOT_DIR/perf-metrics.json"
echo "Test complete. Results in: $SCREENSHOT_DIR"

トラブルシューティング

接続拒否

# Verify Firefox is running with debugging enabled
ps aux | grep firefox.*6000
# Or explicitly launch with port
firefox --remote-debugging-port 6000 &

ポートがすでに使用中

# Use custom port
firefox --remote-debugging-port 7000 &
# Then update mcporter config or pass port parameter

パフォーマンスに関する考慮事項

1. RDP のオーバーヘッド：リモートデバッグによるオーバーヘッドは最小限です
2. ポートのバインド：競合を避けるため、番号の大きいポート（>6000）を使用してください
3. メモリー：デバッグを有効にした Firefox は、メモリーを約 10～15% 多く使用します

実用面での効果

Firefox Remote Debugging Protocol を mcporter に統合すると、次のことが可能になります。

• エージェントとの会話と並行したブラウザーのライブデバッグ
• フォームの自動テストと検証
• アプリケーションの動作に関する視覚的なフィードバック
• パフォーマンス指標の収集と分析
• 認証とセッションのデバッグに役立つストレージの調査

この統合がない場合、Firefox アプリケーションのデバッグでは、ブラウザーとエージェントの間でコンテキストを切り替える必要があります。

参考資料

• Mozilla Remote Debugging Protocol
• Firefox WebDriver
• DevTools Server

関連スキル

• devtools/chrome-debug - Chrome 相当の機能
• superpowers/systematic-debugging - 一般的なデバッグ手法
• experts/quality-security/debugger - デバッグの専門家によるガイダンス
• superpowers/frontend-developer - フロントエンド開発のコンテキスト

スキルのメタデータ

• カテゴリ：DevTools 統合
• 複雑さ：中級
• 分野：ブラウザーデバッグ、開発ツール
• プラットフォーム：Linux、macOS、Windows
• 最終更新日：2025-12-15