web-dev-qa-db-ja.com

React Nativeにログインするにはどうすればいいですか?

Web用に開発するときにconsole.logを使用するように、どうすればReact Nativeに変数を記録できますか?

265
skyline75489

console.logは動作します。

IOSのデフォルトでは、Xcode内のデバッグペインにログを記録します。

IOSシミュレータから((+D)を押してRemote JS Debuggingを押します。これはリソースを開きます---ローカルホストで http:// localhost:8081/debugger-ui 。そこからChromeデベロッパーツールのJavascriptコンソールを使ってconsole.logをご覧ください。

263
Yinfeng

console.logconsole.warnなどを使用してください。

React Native 0.29以降では、コンソールでログを見るために単に以下を実行することができます:

$ react-native log-ios
$ react-native log-Android
276
Martin Konicek

Pre React Native 0.29、これをコンソールで実行する:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29を実行します。

react-native log-ios

または

react-native log-Android

マーティンが別の答えで言ったように。

これはすべてのconsole.log()、エラー、メモなどを表示し、ゼロのスローダウンを引き起こします。

31
Joe

console.debug("text");を使う

端末内にログが表示されます。

ステップ:

  • アプリケーションを実行します。
react-native run-ios        # For iOS
react-native run-Android    # For Android
  • ロガーを実行します。
react-native log-ios        # For iOS
react-native log-Android    # For Android
27
omprakash8080

Visual Studio Codeには、console.logを表示できる適切なデバッグコンソールがあります。

enter image description here

多くの場合、VS CodeはReact Nativeにやさしいです。

16
goodhyun

Chromeデベロッパーツール はあなたの友達です。

次の手順でChromeデベロッパーツールにアクセスできます。ここでconsole.logステートメントを確認できます。

ステップ

  1. まだインストールしていない場合は、 Google Chrome をインストールします。
  2. react-native run-Androidまたはreact-native run-iosを使用してアプリを実行する
  3. 開発者メニューを開く
    • Mac:iOSの場合は⌘+D、Android iOSの場合は⌘M
    • Windows/Linux:Android携帯を振る
  4. Debug JS Remotelyを選択
  5. これでChromeでデバッガが起動します。
  6. Chromeの場合:Tools -> More Tools -> Developer Optionsconsoleタブにいることを確認してください

console.logステートメントが実行されるたびに、Chrome Dev Toolsに表示されます。公式文書は ここ です。

13
alexdriedger

React Native Debuggerを使用することをお勧めします。このコマンドを使用してダウンロードしてインストールできます。

brew update && brew cask install react-native-debugger

または

下記のリンクをチェックしてください。

https://github.com/jhen0409/react-native-debugger

ハッピーハッキング!

反応ネイティブアプリの開発でデバッグするために使用する3つの方法があります。

     1- console.log() // shows in console
     2- console.warn() // shows in yellow box bottom of application
     3- alert() // shows as a Prompt just like it does in web
4
Omar Samman

React-Nativeでログを取得するのはとても簡単

console.log および console.warn を使用してください。

console.log('character', parameter)

console.warn('character', parameter)

このログはブラウザのコンソールで見ることができます。あなたがデバイスログを確認したり、本番APKログを言いたい場合は、使用することができます

adb logcat

adb -d logcat
3
jatin.7744

Xcode Simulatorで[command + control + Z]を押し、[Debug JS Rem remote]を選択し、[command + option + J]を押してChromeデベロッパーツールを開きます。

Xcode Simulator Img

参考: デバッグReactネイティブアプリケーション

3
bocai

私は同じ問題を抱えていました:コンソールメッセージがXCodeのデバッグ領域に表示されませんでした。私のアプリでは、デバッグメニューを表示するためにcmd-dを実行し、「Debug in Safari」をオンに設定したことを思い出しました。

私はこれをオフにしました、そして some メッセージは出力メッセージに出力されましたが、私のコンソールメッセージではありませんでした。ただし、ログメッセージの1つは言った:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

これは、以前に私のプロジェクトを次のコマンドで実際のデバイスでテストするためにバンドルしていたためです。

react-native bundle --minify

これは "dev-mode"なしでまとめられています。開発メッセージを許可するには、 - devフラグを含めます。

react-native bundle --dev

そしてconsole.logメッセージが戻ってきた!実際のデバイスにバンドルしていないのであれば、AppDelegate.mjsCodeLocationをlocalhostにポイントし直すことを忘れないでください(私はしました!)。

2
Mr Speaker

react-native-xlog 手助けになるモジュールは、WeChatの Xlog のreact-nativeです。それはXcodeコンソールとログファイルに出力することができます、製品ログファイルはあなたがデバッグするのを助けることができます。

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
2
EngsSH

たった1か月前に出てきたものは "Create React Native App"です。あなたのアプリがExpoアプリを使ってあなたのモバイルデバイス上でライブであるかを(最小限の努力で)見せることができる素晴らしい定型文です。 。ライブアップデートだけでなく、 Web用に開発したときと同じように、コンソールログを端末に表示することもできます - 以前のReact Nativeのようにブラウザを使用する必要はありません。

もちろん、その定型文を使って新しいプロジェクトを作成する必要があります。ただし、ファイルを移行する必要がある場合でも、それは問題にはなりません。試してみます。

編集:実際にはカメラさえ必要としません。私はQRコードをスキャンするためにそれを言ったが、あなたはまたあなたのサーバーとそれを同期させるために何かをタイプアウトすることができる、ただQRコードではない。

2
Ryo-code

開発時間ロギング

開発時のロギングでは、console.log()を使用できます。 1つ重要なことは、プロダクションモードでロギングを無効にしたい場合は、アプリのRoot Jsファイルで次のように空白の関数を割り当てるだけです。console.log = {}アプリ全体でログ発行全体を無効にします。 console.logとしてのモードは時間を消費します。


ランタイムロギング

プロダクションモードでは、実際のユーザーがリアルタイムでアプリを使用しているときにログを表示することも必要です。これは、バグ、使用方法、および不要なケースを理解するのに役立ちます。このために市場で入手可能な多くのサードパーティ製の有料ツールがあります。私が使ったのはLogentriesです。

良いことは、LogentriesがReact Native Moduleを持っているということです。そのため、モバイルアプリでランタイムログを有効にするのにかかる時間が非常に短くなります。

2
bygirish

使用時に反応するネイティブアプリケーションをデバッグまたは出力する方法は2つあります。

エミュレータまたは実デバイス

初めてエミュレータを使用する場合:use

react-native log-Androidまたはreact-native log-ios

ログ出力を取得する

あなたのデバイスを振る

そのため、リモートデバッグを選択した場所からメニューが表示され、ブラウザでこの画面が開きます。だからあなたはコンソールタブであなたのログ出力を見ることができます。 enter image description here

2
Mudassir Khan

enter image description here ロギングとリデュックスストアにreactネイティブデバッガを使用する https://github.com/jhen0409/react-native-debugg

ダウンロードしてソフトウェアとして実行し、シミュレータからデバッグモードを有効にするだけです。

クロム開発者向けツールの要素のように、他のデバッグ機能もサポートしています。これは、どのコンポーネントにもスタイル設定が表示されるのを確認するのに役立ちます。

Redux devツールの最後の完全サポート

1

あなたはあなたのデバイスからリモートのjs debuglyオプションを使うことができます、またはあなたは単に/ iosのために react-native log-ios そして react-native log-ios を使うことができます。

1
Tanumay Ghosh

私が直面していてもこれを参照し、解決策は初期レベルで私には十分です。

  1. Console.logによるデバッグ
  2. Nuclideを使ったコード(ロジック)のデバッグ
  3. Chromeでコード(ロジック)をデバッグする
  4. Xcodeを使ってGUIをデバッグする

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

1

Reactotronを使用することもできます。これは、単なるロギングよりも多くの機能を提供します。 https://github.com/infinitered/reactotron

1
Ravin Gupta

console.log()はあなたのコードをデバッグする簡単な方法ですが、どんな状態を表示している間もそれはarrow functionまたはbind()と共に使用する必要があります。 link が役に立つでしょう。

1
Arun kumar

あなたは2つの方法でこれを行うことができます

1> warnを使って

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Alertを使用することこれはalertに達すると毎回良くないでしょう、そして毎回popが開かれるのでループをすることがこれを使うのが好ましくないことを意味するなら

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);
1
keerthi c

デバッグが必要なシナリオは通常2つあります。

  1. データ関連の問題に直面していて、その場合にデータに関連するデータとデバッグをチェックしたい場合console.log('data::',data)

    リモートでdebug jsを実行するのが最善の方法です。

  2. 他のケースはUIとスタイル関連の問題で、その場合コンポーネントのスタイルをチェックする必要があります。react-dev-toolsが最良の選択肢です。

    両方の方法がここで言及しています。

0
Waheed Akhtar

Chrome Devtoolは、ロギングとデバッグのための最善かつ最も簡単な方法です。

0
akshay gore

WindowsおよびAndroid Studioを使用しているユーザー

Android StudioのLogcatの下にあります。ここに表示されるログメッセージはたくさんあるので、 "ReactNativeJS"用のフィルタを作成するほうが簡単かもしれません。これはあなたの反応するネイティブアプリケーションの中に作成されるconsole.logメッセージだけを表示するでしょう。

0
David Hudman

Osxを使用していてエミュレータを使用している場合は、サファリのWebインスペクタでconsole.logを直接見ることができます。

Safari =>開発=>シミュレータ - [お使いのシミュレータのバージョンはこちら] => JSContext

0
Paulin Trognon

console.log()は、開発者メニューからリモートjsデバッガを使用するときにコンソールにあなたのログを見るための最良で簡単な方法です

0
Nirali Vasoya

console.logは任意のJSプロジェクトに使用できます。あなたがlocalhostでアプリを実行しているなら、明らかにそれはどんなjavascriptプロジェクトにも似ています。しかし、シミュレータや他のデバイスを使用している間は、そのシミュレータを私たちのローカルホストに接続すればコンソールに表示されます。

0
Thamizhselvan

私はそれをWindowsで動作させました...

  • release ページからReact Native Debuggerをダウンロードします。
  • エミュレーターでアプリを実行した後、Ctrlキーを押しながらmキー(Windows)を押すと、開発者オプションからオプションのリストが表示され、そこからデバッグの開始を選択します。 (他のすべてのデバッグスタンスは、その前に閉じる必要があります)
0
Tushar Pandey

ただconsole.log( 'debug');

それを実行すると、ターミナルの/ cdプロンプトにログが表示されます。

0
uday

コードにconole.log( "My log text")を入れます

コマンドラインツールに移動します開発ツールに自分自身を配置しますAndroid:このコマンドを記述します:React-native log-Android IOSにこのコマンドを記述します:React-native log-ios