Reactで変数の中身を確認したい

Question

前提

React初心者です。
デバッグ方法を知りたい

実現したいこと

PHPやLaravelで使えるvar_dumpやddのように変数の中身を画面に表示させて確認する方法が知りたいです。
console.logではなく画面で確認したいです。
またPHPではexitで好きなところで処理を止めて、どこまでは正常に処理が走っているか確認できますが、reactでも同じような方法でエラー解決をしていきたいです。

試したこと

上記のような確認ができない場合
Reactではどのようにエラー解決をしていくのが良いのか教えていただきたいです。

補足情報（FW/ツールのバージョンなど）

Windows10
ブラウザはChromeを使用

Answer 1

既に紹介してもらっていますが，デバッグ手法として一般的なのは

• React Developer Tools
• useDebugValue() フック
• console.log()

このあたりですかね。

console.logではなく画面で確認したいです。

多分これは筋が悪い考え方で， コンソールで確認するほうで慣れていったほうがいいと思います。HTML 上に表示するものだと

• デバッグ表示によってメインコンテンツのレイアウトを壊す
• 再帰的なデータ構造を表示しようとすると無限ループになる
• JavaScript のオブジェクトは，PHP のオブジェクトのように，中身をすべて文字列として表示できることが保証されていない

など，強烈なデメリットがあります。基本的にコンソールがデバッグ場所としては上位互換だと考えてください。
（逆に PHPからChromeにログ出力「Chrome Logger」 | アシアルブログ のように，PHP でも console.log() に近い形でデバッグしよう，という考えすらあるぐらいです）

またPHPではexitで好きなところで処理を止めて、どこまでは正常に処理が走っているか確認できますが、reactでも同じような方法でエラー解決をしていきたいです。

JavaScript は PHP と大きくライフサイクルが異なります。

• PHP: リクエストが来ると最初から実行し，最後にレスポンスを返す。ここで処理は終わり
• JavaScript: 画面上の更新を監視し続け，何か動きがあると都度処理を実行する。永遠に監視は終わらない

それゆえ， exit() という概念が存在しません。

Answer 2

React Developer Toolsは使っていますか？（Chrome用、Firefox用、Edge用）