Google で React プロジェクトをデバッグする方法

Google で反応プロジェクトをデバッグする方法: まず、Chrome を使用してデバッグが必要な React ページを開き、「開発者ツール」を開きます。次に、「開発者」の上にあるツールバーの右端にある反応タブをクリックします。 Tools"; 最後にチェック 各コンポーネント間の入れ子関係と、各コンポーネントのイベント、プロパティ、ステータスなどの情報があれば十分です。

#このチュートリアルの動作環境: Windows7 システム、react17.0.1&&chrome87.0 バージョン、thinkpad t480 コンピューター。

推奨: 「

react ビデオ チュートリアル 」

Google Chrome で React プロジェクトをデバッグするにはどうすればよいですか?

(1) まず、Chrome を使用してデバッグが必要な React ページを開き、「開発者ツール」を開きます。

(2) 「開発者ツール」の上のツールバーの右端に反応ラベルがあります。このタブをクリックすると、現在のアプリケーションの構造が表示されます。

React Developer Tools を使用すると、さまざまなコンポーネント間のネストされた関係や、各コンポーネントのイベント、プロパティ、ステータス、その他の情報を簡単に確認できます。

(3) React Developer Tools は React コンポーネントを自動的に検出します。ただし、webpack-dev-server モードでは、webpack が React コンポーネントを iframe に自動的に配置するため、React コンポーネントの検出が失敗します。回避策は webpack -dev です。 -server は --inline モードで設定できます:

webpack-dev-server --inline

(4) これまでのところ、ブラウザは es6 標準をネイティブにサポートしています。この状況に対して、Chrome はソースマップ ファイルを導入して、トランスコーディング前の es6 コードのどの行が es5 コードに対応するかを識別します。唯一のことは、ソースマップ ファイルを自動的に生成するように webpack を設定することです。これも非常に簡単で、設定の行を webpack.config.js に追加するだけです (設定を有効にするには webpack-dev-server を再起動する必要があります)

# (5​​) エラーとしてどこかを変更し、その結果を観察します。

React 関連の技術記事をさらに詳しく知りたい場合は、React Q&A コラムを参照してください。

以上がGoogle で React プロジェクトをデバッグする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。