web-dev-qa-db-ja.com

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

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

enter image description here

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

なぜだと思いますか？

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

javascriptandroidfacebookreact-native
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