React のシンタックスエラーをデバッグ

Reactのチュートリアルをこなしているが、シンタックスエラーがあると画面が表示されないだけでどこでエラーが発生しているかわからない。

1.Chrome の拡張機能を使ってデバッグ

1.1 拡張機能をインストール

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

react_debug01

1.2 設定を変更

chrome://extensions/

上記URLにアクセスし以下2か所を有効

  • バックグラウンドページ
  • ファイルのURLへのアクセスを許可する

react_debug02

1.3 デバッグツールを起動し、React タブを選択

コンポーネントを選択することで、状態だったりが分かりそう。

react_debug03

1.4 シンタックスエラー

シンタックスエラーがあると、表示される!これは捗るな。

react_debug04

以上