Help us understand the problem. What is going on with this article?

Reactアプリのデバッグ方法

この記事の目的

Reactの公式ページを見たがReact DevToolsを用いたデバッグ方法についての記述が無かったため(パフォーマンス最適化の項でDevToolsの紹介はあった)、Reactアプリのデバッグを行う上で最低限知っておくべき内容を整理しておく。

参考資料

公式ガイド

Reactアプリのデバッグ方法

準備

Reactアプリのデバッグはブラウザで行う。FirefoxとChromeのどちらでもデバッグ用の拡張機能(React Developer Tools)が用意されているので、普段Webアプリのデバッグで利用しているブラウザ向けのDevToolsをインストールして利用する。

ChromeのReact Developer Tools
FirefoxのReact Developer Tools

※IE用は存在しないので、IEでのデバッグは諦めてください。。。

React DevToolsの使い方概要

この資料ではChromeのDevToolsで説明する。(FirefoxのDevToolsでも基本同じはず)

アイコンの見方

ChromeのReact DevToolsをインストールすると、ブラウザの右上にReactのアイコンが表示される。
アイコンの色によって意味が異なり、以下の3種類が存在する。

アイコンの種類
Reactで描画されたページか否か Reactで描画されたページではない Reactで描画されたページ Reactで描画されたページ(ただし最新VersionのReactでは無い) Reactで描画されたページ
Reactのビルドモード - Production Build Production Build Development Build
React DevToolsによるデバッグ - 不可 不可 可能

自分が作成したReactアプリをnpm startで起動してWebページを開いた場合、一番右の赤色アイコンが表示される。

画面のコンポーネント構成を見る方法

「Chromeのメニュー」→「その他ツール」→「デベロッパーツール」を開く。
デベロッパーツールのタブメニューから「Components」を選択。
image.png

現在ブラウザで表示しているページのコンポーネント構成を確認できる。
また、対象のコンポーネントをクリックすればpropsやstateの値を確認することも可能。
image.png
多重階層になっていてお目当てのコンポーネントを探すのが大変なときは、Componentsタブ内の左上にある矢印ボタンを押して画面から対象コンポーネントを選択することも可能。
(ネストされたコンポーネントを正確にポインティングするのは難しいようなので、補助的に使ってあげてください)

ブレイクポイントを設定してステップ実行でデバッグする

React Developer ToolsでComponentsタブを開き、ブレイクポイントを設定したいコンポーネントを選択した状態で「<>」アイコンをクリックする。
image.png

コンポーネントのソースがReact Developer Toolsに表示されるので、ブレイクポイントを設定したい行番号をクリックする。ブレイクポイントを設定した行番号は緑色になる。
image.png
ブレイクポイントを設定した状態でWebブラウザ内でReactアプリを操作すると、ブレイクポイントで処理が止まる。ブレイクポイントで処理が止まると、対象の行が緑色で網掛けされる。
image.png

ブレイクポイントで処理が停止したら、以下のいずれかの実行が可能。
image.png

  • Resumu script execution
    • ブレイクポイントからそのまま処理が続行される
  • Step over next function call
    • ステップオーバーで実行
    • 今いる関数内の処理はすべて実行し、次の関数が呼ばれたタイミングで処理をブレイク(停止)する
  • Step into next function call
    • ステップインで実行
    • 今いる関数から別の関数が呼ばれるタイミングまで処理を進め、別の関数に入ったタイミングで処理をブレイク(停止)する
  • Step out of current function
    • ステップアウトで実行
    • 今いる関数内の処理はすべて実行し、今いる関数の呼び出し元に戻ったタイミングで処理をブレイク(停止)する
  • Step
    • 一行づつ順番に実行する
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away