Web用に開発するときにconsole.log
を使用するように、どうすればReact Nativeに変数を記録できますか?
console.log
は動作します。
IOSのデフォルトでは、Xcode内のデバッグペインにログを記録します。
IOSシミュレータから((⌘+D)を押してRemote JS Debuggingを押します。これはリソースを開きます---ローカルホストで http:// localhost:8081/debugger-ui 。そこからChromeデベロッパーツールのJavascriptコンソールを使ってconsole.log
をご覧ください。
console.log
、console.warn
などを使用してください。
React Native 0.29以降では、コンソールでログを見るために単に以下を実行することができます:
$ react-native log-ios
$ react-native log-Android
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()、エラー、メモなどを表示し、ゼロのスローダウンを引き起こします。
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
Chromeデベロッパーツール はあなたの友達です。
次の手順でChromeデベロッパーツールにアクセスできます。ここでconsole.log
ステートメントを確認できます。
react-native run-Android
またはreact-native run-ios
を使用してアプリを実行する⌘+D
、Android iOSの場合は⌘M
Debug JS Remotely
を選択Tools -> More Tools -> Developer Options
とconsole
タブにいることを確認してくださいconsole.log
ステートメントが実行されるたびに、Chrome Dev Toolsに表示されます。公式文書は ここ です。
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
React-Nativeでログを取得するのはとても簡単
console.log および console.warn を使用してください。
console.log('character', parameter)
console.warn('character', parameter)
このログはブラウザのコンソールで見ることができます。あなたがデバイスログを確認したり、本番APKログを言いたい場合は、使用することができます
adb logcat
adb -d logcat
Xcode Simulatorで[command + control + Z]を押し、[Debug JS Rem remote]を選択し、[command + option + J]を押してChromeデベロッパーツールを開きます。
私は同じ問題を抱えていました:コンソールメッセージが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.m
のjsCodeLocation
をlocalhostにポイントし直すことを忘れないでください(私はしました!)。
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');
たった1か月前に出てきたものは "Create React Native App"です。あなたのアプリがExpoアプリを使ってあなたのモバイルデバイス上でライブであるかを(最小限の努力で)見せることができる素晴らしい定型文です。 。ライブアップデートだけでなく、 Web用に開発したときと同じように、コンソールログを端末に表示することもできます - 以前のReact Nativeのようにブラウザを使用する必要はありません。
もちろん、その定型文を使って新しいプロジェクトを作成する必要があります。ただし、ファイルを移行する必要がある場合でも、それは問題にはなりません。試してみます。
編集:実際にはカメラさえ必要としません。私はQRコードをスキャンするためにそれを言ったが、あなたはまたあなたのサーバーとそれを同期させるために何かをタイプアウトすることができる、ただQRコードではない。
開発時間ロギング
開発時のロギングでは、console.log()を使用できます。 1つ重要なことは、プロダクションモードでロギングを無効にしたい場合は、アプリのRoot Jsファイルで次のように空白の関数を割り当てるだけです。console.log = {}アプリ全体でログ発行全体を無効にします。 console.logとしてのモードは時間を消費します。
ランタイムロギング
プロダクションモードでは、実際のユーザーがリアルタイムでアプリを使用しているときにログを表示することも必要です。これは、バグ、使用方法、および不要なケースを理解するのに役立ちます。このために市場で入手可能な多くのサードパーティ製の有料ツールがあります。私が使ったのはLogentriesです。
良いことは、LogentriesがReact Native Moduleを持っているということです。そのため、モバイルアプリでランタイムログを有効にするのにかかる時間が非常に短くなります。
ロギングとリデュックスストアにreactネイティブデバッガを使用する https://github.com/jhen0409/react-native-debugg
ダウンロードしてソフトウェアとして実行し、シミュレータからデバッグモードを有効にするだけです。
クロム開発者向けツールの要素のように、他のデバッグ機能もサポートしています。これは、どのコンポーネントにもスタイル設定が表示されるのを確認するのに役立ちます。
Redux devツールの最後の完全サポート
あなたはあなたのデバイスからリモートのjs debuglyオプションを使うことができます、またはあなたは単に/ iosのために react-native log-ios そして react-native log-ios を使うことができます。
私が直面していてもこれを参照し、解決策は初期レベルで私には十分です。
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
Reactotronを使用することもできます。これは、単なるロギングよりも多くの機能を提供します。 https://github.com/infinitered/reactotron
console.log()はあなたのコードをデバッグする簡単な方法ですが、どんな状態を表示している間もそれはarrow functionまたはbind()と共に使用する必要があります。 link が役に立つでしょう。
あなたは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);
デバッグが必要なシナリオは通常2つあります。
データ関連の問題に直面していて、その場合にデータに関連するデータとデバッグをチェックしたい場合console.log('data::',data)
リモートでdebug jsを実行するのが最善の方法です。
他のケースはUIとスタイル関連の問題で、その場合コンポーネントのスタイルをチェックする必要があります。react-dev-toolsが最良の選択肢です。
Chrome Devtoolは、ロギングとデバッグのための最善かつ最も簡単な方法です。
WindowsおよびAndroid Studioを使用しているユーザー
Android StudioのLogcatの下にあります。ここに表示されるログメッセージはたくさんあるので、 "ReactNativeJS"用のフィルタを作成するほうが簡単かもしれません。これはあなたの反応するネイティブアプリケーションの中に作成されるconsole.logメッセージだけを表示するでしょう。
Osxを使用していてエミュレータを使用している場合は、サファリのWebインスペクタでconsole.log
を直接見ることができます。
Safari =>開発=>シミュレータ - [お使いのシミュレータのバージョンはこちら] => JSContext
console.log()
は、開発者メニューからリモートjsデバッガを使用するときにコンソールにあなたのログを見るための最良で簡単な方法です
console.logは任意のJSプロジェクトに使用できます。あなたがlocalhostでアプリを実行しているなら、明らかにそれはどんなjavascriptプロジェクトにも似ています。しかし、シミュレータや他のデバイスを使用している間は、そのシミュレータを私たちのローカルホストに接続すればコンソールに表示されます。
私はそれをWindowsで動作させました...
ただconsole.log( 'debug');
それを実行すると、ターミナルの/ cdプロンプトにログが表示されます。
コードにconole.log( "My log text")を入れます
コマンドラインツールに移動します開発ツールに自分自身を配置しますAndroid:このコマンドを記述します:React-native log-Android IOSにこのコマンドを記述します:React-native log-ios