mcpField
R
react-debugging

react-debugging

github.com/serkan-ozal開発779 回インストール34 週間前に更新
リポジトリ

react-debugging について

react-debugging は、browser-devtools-cli で React アプリを調査するスキルです。コンポーネントと DOM 要素の対応を確認でき、描画や props の問題を追う開発者向けです。React DevTools 拡張機能を使うと、より確実に調査できます。

主な機能

  1. 01DOM セレクターからコンポーネントを検索
  2. 02コンポーネント名から描画要素を検索
  3. 03コンポーネントツリーと props の確認
  4. 04DOM とコンソールの併用調査

活用シーン

  1. 01ページ要素を描画するコンポーネントの特定
  2. 02コンポーネントの props の問題調査
  3. 03コンポーネントが描画する DOM 要素の確認
  4. 04React 警告とコンソールメッセージの確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/serkan-ozal/browser-devtools-skills --skill react-debugging

インストール後、Claude Code で/react-debuggingを入力して読み込まれたか確認します。

詳細

React デバッグスキル

コンポーネント、props、コンポーネントツリーを調べて、React アプリケーションをデバッグします。

使用するタイミング

このスキルは、次の場合に有効になります。

  • ユーザーが React アプリケーションをデバッグしている
  • ユーザーが React コンポーネントの props／state を調べたい
  • ユーザーが要素をレンダリングしているコンポーネントを見つける必要がある
  • ユーザーが React DevTools について質問している
  • ユーザーが React Fiber またはコンポーネントツリーに言及している

機能

コンポーネントの調査
browser-devtools-cli react get-component-for-element --selector ".user-card"
browser-devtools-cli --json react get-component-for-element --selector "#root > div"
要素のマッピング
browser-devtools-cli react get-element-for-component --component-name "UserCard"
browser-devtools-cli --json react get-element-for-component --component-name "Button"

前提条件

重要： React ツールは、次の条件で最も適切に動作します。

  1. 永続的なブラウザーコンテキスト： BROWSER_PERSISTENT_ENABLE=true を有効にする
  2. React DevTools 拡張機能： ブラウザープロファイルに手動でインストールする

この拡張機能がない場合、ツールは信頼性が低い、可能な範囲での DOM スキャンを使用します。

デバッグワークフロー

要素に対応するコンポーネントを見つける
SESSION="--session-id react-debug"

# Navigate to React app
browser-devtools-cli $SESSION navigation go-to --url "http://localhost:3000"
browser-devtools-cli $SESSION sync wait-for-network-idle

# Find component for a DOM element
browser-devtools-cli $SESSION --json react get-component-for-element \
  --selector ".user-profile-card"

# Cleanup
browser-devtools-cli session delete react-debug
コンポーネントに対応する要素を見つける
SESSION="--session-id react-debug"

# Navigate to React app
browser-devtools-cli $SESSION navigation go-to --url "http://localhost:3000"
browser-devtools-cli $SESSION sync wait-for-network-idle

# Find all DOM elements rendered by a component
browser-devtools-cli $SESSION --json react get-element-for-component \
  --component-name "UserCard"

# Cleanup
browser-devtools-cli session delete react-debug

よくある使用例

props の問題をデバッグする
# Find component and check its props
browser-devtools-cli --json react get-component-for-element --selector ".broken-component"
レンダリング境界を理解する
# See what DOM elements a component renders
browser-devtools-cli --json react get-element-for-component --component-name "DataTable"
コンポーネント名を特定する
# Click on an element to find its component name
browser-devtools-cli --json react get-component-for-element --selector "#unknown-element"
DOM の調査と組み合わせる
SESSION="--session-id react-debug"

# Get component info
browser-devtools-cli $SESSION --json react get-component-for-element --selector ".card"

# Also check DOM structure
browser-devtools-cli $SESSION content get-as-html --selector ".card"

# And accessibility
browser-devtools-cli $SESSION a11y take-aria-snapshot --selector ".card"
コンソールの調査と組み合わせる
SESSION="--session-id react-debug"

# Check for React errors in console
browser-devtools-cli $SESSION --json o11y get-console-messages --type warning

# Look for component info
browser-devtools-cli $SESSION --json react get-component-for-element --selector ".error-boundary"

制限事項

  • 開発ビルドのみ： React の開発モードで最も良い結果が得られます
  • コンポーネント名： 本番環境では短縮されている場合があります
  • ソース情報： 可能な範囲での情報であり、ソースマップに依存します
  • state へのアクセス： DevTools 拡張機能がない場合は制限されます

ベストプラクティス

  1. React DevTools 拡張機能には、永続的なコンテキストを使用する
  2. ブラウザープロファイルに拡張機能を手動でインストールする
  3. コンポーネント名をより適切に取得するため、開発モードでテストする
  4. 全体像を把握するため、DOM の調査と組み合わせる
  5. 実行時の state には、コンソールの調査を使用する
  6. コンソールメッセージで React の警告を確認する

コメント

Markdown 対応