今日先輩エンジニアから、React.jsでChromeの検証ツールを使った検証の仕方を教えてもらったので、メモがてらQiitaに投稿します。（感動だったのです…！！✨）
ブレークポイントを使って表示に必要なデータが取得できているか確認する
この本家サイトがかなりわかりやすかったです！
ブレークポイントでコードを一時停止する
今回私がブレークポイントを使ったのは、
「このコンポーネントに渡したpostsデータの中身はなんだろな？
console.log(Posts)してみたけど、どのタイミングで取得できているのかわからない。。APIにコールしすぎているのか、はたまたreducerでレスポンスの配列をミスっているのか…👀」
というケースでした。
そこで、Postsを一覧表示しているPosts.jsのmapStateToProps部分に
console.log(Posts)
を記述して、ここをブレークポイントとし、検索ボタンをクリックした時とレンダーする前のローディング時、ローディング後でPostsの中身を確認することにしました。
上の公式サイトに載っている手順そのままですが、
- [Sources] タブをクリック
- ブレークポイントを配置する対象のコード行を含むファイルを開く
- 対象のコード行に移動
- コード行の左側に行番号列があります。 その列をクリックします。 行番号列の上に青いアイコンが表示されます。
運用中のアプリケーションをお見せできないので😅
デモ用のアプリケーションで見ていくことにします。
画面
キャプチャです。
グレーゾーンに「Open File」とあるところで、「コマンド＋P」からファイルを選択します。
ブックマーク
確認したいところの行をクリックすると、青いタグマークが表示されます。
確認その1
（動画小さくなっちゃった…）
この状態で入力すると、「追加」をクリックしたら子コンポーネントのpropsが変更されたことがわかります。
propsのPostsにちゃんとArrayが入っているのが確認できます。
（ちなみに私はこの配列の長さを取得出来たことで、元の配列に更に新しく取得した配列を足しちゃっていたのに気付けました😅）
今回はmapStateToPropsに書いちゃいましたが、他のところでも大丈夫です！
他にも「イベント リスナー ブレークポイント」、「DOM 変更ブレークポイント」もあるようです！（便利〜〜！😭✨）
ちなみに
inputエリアをブックマークすると、入力するたびにpauseします。
これが面倒な時は、右上にある「ブックマークしたイベントをスルーする」設定ができるので、画像みたいなタグマークをクリックして青いアイコンのようにします。
ブックマークを削除したい時は右クリックからDeleteを押しましょう
ReactのDev Toolsで、更新されたkコンポーネントを視覚化する
ReactのDeveloper Toolで、右上にある歯車マークをクリックするとなにやらボックスが出てきます。「Highlight Updates」をクリックした状態で、例えば入力して「投稿」を押すと、変更されたコンポーネントだけ枠が表示され、視覚的に他コンポーネントへの影響がわかるようになります。
今回作成したダミーアプリケーションだと枠線の色が分かりづらかったので、こちらの記事を見てみると良いと思います。
Qiita: React Developer ToolsでReactで作ったページをデバッグする
感想
先輩に教えてもらった時、Chromeの便利さに感激しまくりでした笑
今回は覚書メモで。