Firefox の React 開発者ツールを修正する

React Developer Tools を使用すると、React 開発者は DOM を観察してコードをデバッグできます。 これは主に、コンポーネントを検査し、すべてのコンポーネントのレンダリングを追跡するためのものです。

React Developer Tools を Firefox に追加

React Developer Tools をダウンロードするのではなく、任意のブラウザーで拡張機能として追加できます。 ここでは、Firefox Web ブラウザーに追加する方法を学習します。

ユーザーは React developer Firefox extension リンクに移動し、[Firefox に追加] ボタンをクリックする必要があります。

その後、ユーザーはブラウザの右上隅に拡張機能が追加されたことを確認できます。 また、react 開発者ツールにカーソルを合わせると、下の画像に示すように、ページが React で構築されていることを示すツールチップ メッセージが表示されます。

React Developer Tools を修正

拡張機能を削除して再度追加する

ユーザーのブラウザーの現在のバージョンが拡張機能でサポートされていないか、悪意のあるアクティビティが原因で、拡張機能が機能しなくなることがあります。

この問題を解決するために、ユーザーは Firefox で拡張機能を削除して再度追加することができます。

拡張機能を削除するには、ユーザーは右上隅から拡張機能を右クリックする必要があります。ドロップダウン メニューが表示されます。

Remove Extension オプションを選択すると、拡張機能を削除する確認ボックスが表示されます。 ブラウザから拡張機能を削除するには、ユーザーは削除ボタンをクリックする必要があります。

ブラウザをアンインストールして再インストールする

ユーザーのブラウザーのバージョンが古すぎて React Developer Tools でサポートされていない場合、ユーザーはブラウザーをアンインストールして再インストールする必要があります。

Firefox をアンインストールするには、コントロール パネル を開きます。 ユーザーは、Windows メニューでコントロール パネルを検索できます。

コントロール パネル を開いた後、プログラム セクションの下にある プログラムのアンインストール をクリックします。

その後、ユーザーは コントロール パネル 内で firefox アプリケーションを見つける必要があります。 また、ユーザーはコントロール パネルの上部からそれを検索できます。

コントロール パネル 内の firefox を右クリックすると、アンインストール メニューが表示されます。 ユーザーはそれをクリックしてブラウザをアンインストールする必要があります。

Firefox ブラウザーを正常にアンインストールしました。ユーザーは Firefox インストーラー ファイルまたはアプリケーションをコンピューターのストレージから削除できます。

Firefox ブラウザを再インストールするには、Firefox を再度ダウンロード する必要があります。 その後、ユーザーはダウンロードしたファイルを拡張子 .exe で開く必要があります。

ユーザーがファイルを開くと、ポップアップ メニューが開きます。[はい] をクリックして、Firefox ブラウザーのインストールを開始します。 インストールプロセスには約 30 ～ 60 秒かかります。

React Developer Tools 拡張機能をブラウザに追加すると、完全に機能するはずです。