ネイティブコードのデバッグ
ログへのアクセス
iOSまたはAndroidアプリのネイティブログは、アプリの実行中にターミナルで以下のコマンドを使用して表示できます
# 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で表示できるログを追加します
import android.util.Log;
private void log(String message) {
Log.d("YourModuleName", message);
}
これらのログをLogcatで表示するには、YourModuleName
をカスタムタグに置き換えてこのコマンドを使用します
adb logcat "*:S" ReactNative:V ReactNativeJS:V YourModuleName:D
iOS (Objective-C/Swift)
ネイティブモジュールでは、カスタムログにNSLog
を使用します
NSLog(@"YourModuleName: %@", message);
または、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" のリストからアプリケーションを選択します。