ホームページ  >  記事  >  ウェブフロントエンド  >  Google で React プロジェクトをデバッグする方法

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

藏色散人
藏色散人オリジナル
2020-12-15 10:16:452891ブラウズ

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

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

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

推奨: 「

react ビデオ チュートリアル

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

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

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

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

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

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

webpack-dev-server --inline

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

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

Google で React プロジェクトをデバッグする方法 # (5​​) エラーとしてどこかを変更し、その結果を観察します。

Google で React プロジェクトをデバッグする方法React 関連の技術記事をさらに詳しく知りたい場合は、React Q&A コラムを参照してください。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。