console.log
Web用に開発する場合など、変数をReact Nativeでログに記録するにはどうすればよいですか?
console.log
Web用に開発する場合など、変数をReact Nativeでログに記録するにはどうすればよいですか?
回答:
console.log
動作します。
iOSのデフォルトでは、Xcode内のデバッグペインにログを記録します。
IOSシミュレーターで(⌘+ D)を押して、リモートJSデバッグを押します。これにより、localhost上のリソース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
react-native log-ios
evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948](com.apple.videosubscriptionsd)
Pre React Native 0.29、これをコンソールで実行します。
adb logcat *:S ReactNative:V ReactNativeJS:V
React Native 0.29を実行し、次を実行:
react-native log-ios
または
react-native log-android
マーティンが別の答えで言ったように。
これにより、すべてのconsole.log()、エラー、メモなどが表示され、速度が低下することはありません。
adb logcat -v time -s ReactNativeJS
使用する 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
Initializing React Xplat Bridge.
。などの一般的なReact Nativeログメッセージしか表示されません。
ここにChromeデベロッパーツールが役立ちます。
次の手順でChromeデベロッパーツールにアクセスできるはずです。Chromeデベロッパーツールでは、console.log
ステートメントを確認できます。
react-native run-android
またはを使用してアプリを実行しますreact-native run-ios
⌘+D
iOSまたは⌘M
Android iOSDebug 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
ハッピーハッキング!
start
これを使用しています。これにより、デフォルトのデバッガーとしてChromeの代わりにデバッガーが開き、-g
フラグにより、リロード時にフォーカスがハイジャックされなくなります。 "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
同じ問題がありました。XCodeのデバッグ領域にコンソールメッセージが表示されませんでした。私のアプリでは、cmd-dを実行してデバッグメニューを表示し、「Safariでデバッグ」をオンに設定したことを思い出しました。
これをオフにすると、一部のメッセージが出力メッセージに出力されましたが、コンソールメッセージには出力されませんでした。ただし、ログメッセージの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メッセージが戻ってきました!実際のデバイスをバンドルしていない場合は、忘れずにlocalhost に再度ポイントjsCodeLocation
するAppDelegate.m
ようにしてください(そうしました!)。
Xcode Simulatorで[command + control + Z]を押し、[Debug JS Remotely]を選択してから、[command + option + J]を押してChrome開発者ツールを開きます。
React-Nativeでログを取得するのはとても簡単です
console.logおよびconsole.warnを使用します
console.log('character', parameter)
console.warn('character', parameter)
このログは、ブラウザコンソールで表示できます。デバイスログを確認したい場合、または本番APKログを言いたい場合は、使用できます
adb logcat
adb -d logcat
console.log
and console.warn
ステートメントを除くすべてがADBに表示されます。
あなたを助けることができるreact-native-xlogモジュールは、react-nativeのためのWeChatのXlogです。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');
開発時間のロギング
開発時のロギングには、console.log()を使用できます。重要なことの1つは、本番モードでロギングを無効にしたい場合は、アプリのルートJsファイルで、次のように空白の関数を割り当てるだけです。console.log= {}これにより、アプリ全体でログ全体の公開が完全に無効になります。 console.logとしてのモードは時間を消費します。
ランタイムログ
本番モードでは、実際のユーザーがアプリをリアルタイムで使用しているときにログを確認することも必要です。これは、バグ、使用法、不要なケースを理解するのに役立ちます。これについては、市場で入手できるサードパーティの有料ツールが多数あります。私が使用したそれらの1つはLogentriesによるものです
良い点は、LogentriesがReact Native Moduleも持っていることです。そのため、モバイルアプリでランタイムログを有効にするのにかかる時間が非常に短くなります。
約1か月前に出てきたものは「Create React Native App」です。これは、Expoアプリを使用して、モバイルデバイス(カメラがあれば何でも)でアプリが実際にどのように見えるかを(最小限の労力で)表示できる素晴らしい定型文です。ライブアップデートがあるだけでなく、ウェブ用に開発しているときと同じように、ターミナルでコンソールログを表示できます。でなく、以前にReact Nativeで行ったようにブラウザーを使用する必要がなく。
もちろん、そのボイラープレートを使用して新しいプロジェクトを作成する必要がありますが、ファイルを移行する必要がある場合でも、問題にはなりません。試してみます。
編集:実際にはカメラも必要ありません。QRコードをスキャンするために言ったが、QRコードだけでなく、何かをタイプしてサーバーと同期することもできる。
ネイティブデバッガーを使用してログを記録し、保存する https://github.com/jhen0409/react-native-debugg
それをダウンロードしてソフトウェアとして実行し、シミュレータからデバッグモードを有効にするだけです。
クロム開発者ツールの要素と同じように、他のデバッグ機能をサポートします。これは、コンポーネントに提供されているスタイルを確認するのに役立ちます。
redux開発ツールの最後の完全なサポート
console.log("My log text")
コードをAndroidの場合:
IOSの場合:
あなたは2つの方法でこれを行うことができます
1> warnを使用する
console.warn("somthing " +this.state.Some_Sates_of_variables);
2>アラートを使用するアラートに達すると毎回これは良くないので、毎回ポップが開かれるので、ループを行うとこれを使用することが望ましくない場合
Import the {Alert} from 'react-native'
// use this alert
Alert.alert("somthing " +this.state.Some_Sates_of_variables);
反応ネイティブでのデバッグのこの問題に直面しているすべての開発者は、私も直面していて、私はこれを参照し、ソリューションは初期レベルで私にとって十分です。
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
Reactotronを使用することもできます。ログを記録するだけでなく、より多くの機能を利用できます。 https://github.com/infinitered/reactotron
これを達成するにはいくつかの方法があります。私はそれらをリストし、それらを使用する際の短所も含めています。以下を使用できます。
console.log
また、開発ツール、Android Studio、Xcodeのリモートデバッグオプションをオプトアウトせずに、ログステートメントを表示します。または、リモートデバッグオプションをオプトアウトして、Chrome開発ツール、vscode、またはデバッグをサポートするその他のエディターでログを表示できます。これにより、プロセス全体の速度が低下するため、注意が必要です。console.warn
が、携帯電話の画面には、状況によっては実行できない場合がある可能性がある奇妙な黄色のボックスが表示されます。OSXを使用していて、エミュレータを使用している場合はconsole.log
、Safari Webインスペクタで直接を表示できます。
Safari =>開発=>シミュレータ-[シミュレータのバージョンはこちら] => JSContext
通常、デバッグが必要なシナリオは2つあります。
データに関連する問題に直面し、その場合、データをチェックし、データに関連するデバッグを行いたい場合
console.log('data::',data)
そして、jsをリモートでデバッグすることが最良のオプションです。
他のケースは、コンポーネントのスタイルをチェックする必要があるUIとスタイルに関連する問題です。その場合、react-dev-toolsが最適なオプションです。