web-dev-qa-db-ja.com

Reactネイティブ-UI /要素を検査する方法は?

反応開発ツールをインストールしました。しかし、エミュレータでアプリを起動すると、Chromeブラウザが表示されません。

enter image description here

これを見ると youtube clip であれば、反応タブがリストに表示され、アプリのUIを検査できます。

なぜだと思いますか?

Chromeでreact devツールが機能していない場合、アプリのUI /要素を検査するにはどうすればよいですか?

12
laukok

現在、Devtools "React"は使用できません。これは、devtoolsプラグインでのアプリケーションスクリプトの評価方法が変更されたためです。詳細は https://facebook.github.io/react-native/docs/known-issues.html#devtools-react-tab-does-not-work で確認できます。

ただし、アプリケーション内でUIをデバッグすることはできます。要素を検査するには、シミュレーターでアプリを開き、Cmd + Dを押して、[インスペクターの表示]を選択します。

18
DoanND

ステップ1:次のコマンドを使用して、react-devtoolsパッケージをグローバルにインストールします。npm install -g react-devtools

ステップ2:プロジェクトディレクトリに移動してプロジェクトを実行する

ステップ3:他のコマンドプロンプトを開き、Project Directoryに移動して、次のコマンドreact-devtoolsを実行します。

ステップ4:「React Developer Tools」が開きます

ステップ5:エミュレータでCtrl + Mを押して、[インスペクタの切り替え]を選択します

ステップ6:React Developer Toolsで検査できるようになりました

詳細については https://facebook.github.io/react-native/docs/debugging.html#react-developer-toolsここに画像の説明を入力してください にアクセスしてください

7
Jitendra Suthar

1.グローバルにインストール

npm install react-devtools
  1. 権限の問題が原因でEACESSエラーが発生した場合は、次のコマンドを試してください

    Sudo npm install -g react-devtools --unsafe-perm = true

3.そして、私たちのプロジェクトで直接指示を与える

react-devtools

別のアプリを開きますReactネイティブの開発者ツール

4.アプリからスクリプトをコピーしてコンポーネントに貼り付け、検査します

1
Johncy