メインコンテンツへスキップ

ネイティブコードのデバッグ

ログへのアクセス

iOSまたはAndroidアプリのネイティブログは、アプリの実行中にターミナルで以下のコマンドを使用して表示できます

shell
# For Android:
npx react-native log-android
# Or, for iOS:
npx react-native log-ios

これらは、iOSシミュレータの Debug > Open System Log… を通じてアクセスしたり、Androidアプリがデバイスやエミュレータで実行中にターミナルで adb logcat "*:S" ReactNative:V ReactNativeJS:V を実行することでもアクセスできます。

💡 カスタムネイティブログ

ネイティブモジュールを記述していて、デバッグ目的でモジュールにカスタムログを追加したい場合は、以下のメソッドを使用できます

Android (Java/Kotlin)

ネイティブモジュールで、Logクラスを使用してLogcatで表示できるログを追加します

java
import android.util.Log;

private void log(String message) {
Log.d("YourModuleName", message);
}

これらのログをLogcatで表示するには、YourModuleNameをカスタムタグに置き換えてこのコマンドを使用します

shell
adb logcat "*:S" ReactNative:V ReactNativeJS:V YourModuleName:D

iOS (Objective-C/Swift)

ネイティブモジュールでは、カスタムログにNSLogを使用します

objective-c
NSLog(@"YourModuleName: %@", message);

または、Swiftでは

swift
print("YourModuleName: \(message)")

これらのログは、アプリの実行時にXcodeコンソールに表示されます。

ネイティブIDEでのデバッグ

ネイティブモジュールの作成時など、ネイティブコードを扱う際には、Android StudioやXcodeからアプリを起動し、標準的なネイティブアプリをビルドする場合と同様に、ネイティブのデバッグ機能(ブレークポイントの設定など)を活用できます。

もう一つの選択肢は、React Native CLIを使用してアプリケーションを実行し、ネイティブIDE(Android StudioまたはXcode)のネイティブデバッガをそのプロセスにアタッチすることです。

Android Studio

Android Studioでは、メニューバーの "Run" オプションに進み、"Attach to Process..." をクリックし、実行中のReact Nativeアプリを選択することでこれを行うことができます。

Xcode

Xcodeでは、上部メニューバーの "Debug" をクリックし、"Attach to process" オプションを選択し、"Likely Targets" のリストからアプリケーションを選択します。