React Nativeにログインする方法は?


回答:


325

console.log 動作します。

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

IOSシミュレーターで(+ D)を押して、リモートJSデバッグを押します。これにより、localhost上のリソースhttp:// localhost:8081 / debugger-uiが開きます。そこからChromeデベロッパーツールのJavaScriptコンソールを使用して表示しますconsole.log


47
そして、アトムを使ってAndroidでコンソールログをReact Native用に印刷する方法は?
砂浜、

3
@sandyこの回答を参照してください。これはAtom専用ではありませんが、非XCode(別名非macOS)開発で使用できます
alexdriedger

21
React Native 0.29以降では、デバッガーを実行しなくてもログを取得できることに注意してください。プロジェクトフォルダー内のコマンドラインでreact-native log-iosまたはreact-native log-androidを実行するだけです。
Martin Konicek

1
また、リモートJSデバッグを開くときは、option + command + iを押してコンソールを確認する必要があります。完全に必要な情報が欠けていて、混乱しました。
sudo

1
アプリの製品版でconsole.logを覚えておくと、iOSでアプリがクラッシュする可能性があります。したがって、環境が開発であるかどうかを確認してください。反応ネイティブのDEVグローバル変数でそれを知ることができます。
Yash Ojha

347

使用console.logconsole.warnなど

React Native 0.29以降では、次のコマンドを実行するだけで、コンソールにログを表示できます。

$ react-native log-ios
$ react-native log-android

2
デバッガーを起動するとアニメーションが遅くなるので、これは非常に役立ちます。
jcollum

13
これは機能していません。react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948](com.apple.videosubscriptionsd)
rptwsthi 2018年

@rptwsthi同じ問題があります。これを解決できましたか?
Ben

2
@Denis Kniazhevエラーをログに記録するオプションはないと思いますが、出力をフィルタリングできます。MacまたはLinuxを使用している場合:react-native log-android | grep「エラー用のフィルター」。
Martin Konicek

1
console.warnは、特定の懸念事項を確認するのに役立ちました。
Madhavi Jayasinghe、

39

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()、エラー、メモなどが表示され、速度が低下することはありません。


3
この単純なオプションの+1。:私はまた、タイミングを取得するために若干異なるコマンド(後のI写真ザファインマニュアル)を使用して終了adb logcat -v time -s ReactNativeJS
spechterを

デバッグタブをバックグラウンドで維持すると、ラグが発生します。解決策は、タブをフォアグラウンドに保つか、新しいウィンドウで開くことです。
Sabbir 2017

私は数ヶ月のためにネイティブデバッガを反応させるの使用してきた、それはSabbirが語った遅れを避けるための最善の選択肢です:github.com/jhen0409/react-native-debugger
フラン・ベローナ

36

使用する 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

2
console.logからのみフィルタリングする方法はありますか?

私には機能しませんInitializing React Xplat Bridge.。などの一般的なReact Nativeログメッセージしか表示されません。
フィリップルートヴィヒ

21

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

ここに画像の説明を入力してください

VSコードは、多くの場合、React Nativeに対応しています。


6
VS Codeがreact-nativeからデバッグ出力を受信する方法について詳しく説明できますか?ありがとう!
mike123

デバイスのアプリから「Debug JS」を選択し、VS Codeの表示メニューから「Toggle debug console(shift-command-y)」を選択します。ただし、github.com / Microsoft / vscode-react-nativeが必要です。
goodhyun 2016年

19

ここにChromeデベロッパーツール役立ちます。

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

手順

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

これで、console.logステートメントが実行されるたびに、Chrome Dev Toolsに表示されるはずです。公式ドキュメントはこちら


2
これにより、開発中のアプリのパフォーマンスが低下する可能性があります。
Andrien Pecson 2017年

17

React Nativeアプリの開発時にデバッグに使用する3つの方法があります。

  1. console.log():コンソールに表示
  2. console.warn():アプリケーションの下部の黄色のボックスに表示されます
  3. alert():ウェブと同じようにプロンプ​​トとして表示されます

6

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"
フレーク状の

3

同じ問題がありました。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ようにしてください(そうしました!)。



3

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

console.logおよびconsole.warnを使用します

console.log('character', parameter)

console.warn('character', parameter)

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

adb logcat

adb -d logcat

console.logand console.warnステートメントを除くすべてがADBに表示されます。
Andrew Koster

はい@AndrewKoster同意します。ADBを使用してすべてのログを表示できますが、これによりデバイスログがここに表示されます。クエリはWeb開発のログ記録に関連しています。ADBはデバイスログを提供するだけでなく、デバイス構成を制御およびチェックできます。開発中に役立つADBコマンドの以下のリンクから情報を収集できます。 androidcentral.com/10-basic-terminal-commands-you-should-know
jatin.7744

2

あなたを助けることができる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');

2

開発時間のロギング

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


ランタイムログ

本番モードでは、実際のユーザーがアプリをリアルタイムで使用しているときにログを確認することも必要です。これは、バグ、使用法、不要なケースを理解するのに役立ちます。これについては、市場で入手できるサードパーティの有料ツールが多数あります。私が使用したそれらの1つはLogentriesによるものです

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


2

約1か月前に出てきたものは「Create React Native App」です。これは、Expoアプリを使用して、モバイルデバイス(カメラがあれば何でも)でアプリが実際にどのように見えるかを(最小限の労力で)表示できる素晴らしい定型文です。ライブアップデートがあるだけでなく、ウェブ用に開発しているときと同じように、ターミナルでコンソールログを表示できます。でなく、以前にReact Nativeで行ったようにブラウザーを使用する必要がなく。

もちろん、そのボイラープレートを使用して新しいプロジェクトを作成する必要がありますが、ファイルを移行する必要がある場合でも、問題にはなりません。試してみます。

編集:実際にはカメラも必要ありません。QRコードをスキャンするために言ったが、QRコードだけでなく、何かをタイプしてサーバーと同期することもできる。


2

使用するときに、反応するネイティブアプリケーションのデバッグまたは出力を取得する2つのオプションがあります。

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

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

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

ログ出力を取得する

実際のdevice.shakeあなたのデバイス上

そのため、メニューはリモートデバッグを選択した場所から表示され、ブラウザでこの画面が開きます。ログ出力をコンソールタブで確認できます。ここに画像の説明を入力してください


2

ここに画像の説明を入力してくださいネイティブデバッガーを使用してログを記録し、保存する https://github.com/jhen0409/react-native-debugg

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

クロム開発者ツールの要素と同じように、他のデバッグ機能をサポートします。これは、コンポーネントに提供されているスタイルを確認するのに役立ちます。

redux開発ツールの最後の完全なサポート


2
  1. プット console.log("My log text")コードを
  2. コマンドラインツールに移動します
  3. 開発フォルダに自分を配置する

Androidの場合:

  • このコマンドを書く:React-native log-android

IOSの場合:

  • このコマンドを書く:React-native log-ios

1

デバイスからリモートjs debuglyオプションを使用するか、iOSのreact-native log-androidreact-native log-iosを使用するだけです。


1

console.log()はコードをデバッグする簡単な方法ですが、状態を表示している間は、アロー関数またはbind()で使用する必要があります。リンクが役立つことがあります。


1

あなたは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);

1

WindowsおよびAndroid Studioのユーザー:

Android StudioのLogcatの下にあります。ここには多くのログメッセージが表示されるため、reactネイティブアプリケーション内で作成されたconsole.logメッセージのみを表示する「ReactNativeJS」のフィルターを作成する方が簡単な場合があります。


1

反応ネイティブでのデバッグのこの問題に直面しているすべての開発者は、私も直面していて、私はこれを参照し、ソリューションは初期レベルで私にとって十分です。

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

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



1

これを達成するにはいくつかの方法があります。私はそれらをリストし、それらを使用する際の短所も含めています。以下を使用できます。

  1. console.logまた、開発ツール、Android Studio、Xcodeのリモートデバッグオプションをオプトアウトせずに、ログステートメントを表示します。または、リモートデバッグオプションをオプトアウトして、Chrome開発ツール、vscode、またはデバッグをサポートするその他のエディターでログを表示できます。これにより、プロセス全体の速度が低下するため、注意が必要です。
  2. 使用できます console.warnが、携帯電話の画面には、状況によっては実行できない場合がある可能性がある奇妙な黄色のボックスが表示されます。
  3. 私が出会った最も効果的な方法は、サードパーティのツールであるReactotronを使用することです。さまざまなレベル(エラー、デバッグ、警告など)の各ロギングステートメントを確認できるようにするシンプルで設定が簡単なツール。パフォーマンスを低下させることなく、アプリのすべてのログを表示するGUIツールを提供します。

1

通常のWebと同じものを使用します。consoleコマンドは、この場合にも動作します。たとえば、あなたが使用することができconsole.log()console.warn()console.clear()など

Chrome Developerを使用しconsoleて、React Nativeアプリの実行中にログを記録するときにコマンドを使用できます。


0

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



0

OSXを使用していて、エミュレータを使用している場合はconsole.log、Safari Webインスペクタで直接を表示できます。

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


0

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

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

    そして、jsをリモートでデバッグすることが最良のオプションです。

  2. 他のケースは、コンポーネントのスタイルをチェックする必要があるUIとスタイルに関連する問題です。その場合、react-dev-toolsが最適なオプションです。

    ここでは両方の方法について説明します。


0

console.logは、あらゆるJSプロジェクトに使用できます。アプリをlocalhostで実行している場合は、明らかに任意のJavaScriptプロジェクトに似ています。しかし、シミュレーターまたは任意のデバイスを使用している間、そのシミュレーターをローカルホストに接続すると、コンソールに表示されます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.