Reactアプリケーションをデバッグする方法

問題が発生したときにReactアプリをデバッグするために使用できるいくつかのツール

Reactアプリケーションのデバッグに使用できる最良のツールは、React開発者ツール。これは、Reactアプリの検査と分析を簡単にするブラウザー拡張機能です。

私は完全に彼らに捧げられたブログ投稿を書きました、それをチェックしてください:React開発者ツール

Next.jsアプリケーションの構築に不可欠なReactDeveloper Toolsに加えて、Next.jsアプリをデバッグする2つの方法を強調したいと思います。

最初は明らかにconsole.log()そしてすべて他のコンソールAPIツール。 Nextアプリの動作方法により、ログステートメントはブラウザコンソールまたはNextを使用して開始したターミナルで動作します。npm run dev

特に、ページがサーバーから読み込まれる場合、URLを指定するか、更新ボタン(cmd / ctrl-R)を押すと、ターミナルでコンソールログが発生します。

マウスをクリックすることによって発生する後続のページ遷移により、すべてのコンソールログがブラウザ内で発生します。

ロギングが欠落していることに驚いた場合は、覚えておいてください。

不可欠なもう1つのツールはdebuggerステートメント。このステートメントをコンポーネントに追加すると、ページをレンダリングするブラウザーが一時停止します。

それらのツールの使用方法を学ぶための私の最善のアドバイスは私のに含まれていますJavaScriptをデバッグするための決定的なガイド

ブラウザデバッガーを使用して値を検査し、一度に1行ずつアプリを実行できるようになったので、本当に素晴らしいです。

Next.jsを使用している場合は、VSCodeデバッガーを使用してサーバー側コードをデバッグすることもできます。私はこのテクニックに言及し、このチュートリアルこれを設定します。

私の無料ダウンロードReactハンドブック


その他の反応チュートリアル: