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

その他のデバッグ方法

このページでは、従来のJavaScriptデバッグ方法の使い方について説明します。新しいReact NativeまたはExpoアプリを使い始める場合は、React Native DevToolsを使用することをお勧めします。

Safariデベロッパーツール（JSC直接デバッグ）​

アプリのランタイムとしてJavaScriptCore（JSC）を使用している場合、Safariを使用してアプリのiOSバージョンをデバッグできます。

  1. 物理デバイスのみ：設定アプリを開き、「Safari」>「詳細」に移動し、「Webインスペクタ」がオンになっていることを確認します。
  2. MacでSafariを開き、「開発」メニューを有効にします。これは、「Safari」>「環境設定...」、次に「詳細」タブを選択し、「Web開発者向けの機能を表示」を選択することで見つけることができます。
  3. 「開発」メニューでデバイスを見つけ、サブメニューから「JSContext」項目を選択します。これにより、SafariのWebインスペクタが開き、Chrome DevToolsと同様のコンソールとソースパネルが表示されます。

Opening Safari Web Inspector

ヒント

ソースマップはデフォルトでは有効になっていない場合がありますが、このガイドまたはこのビデオに従って有効にし、ソースコードの適切な場所にブレークポイントを設定できます。

ヒント

アプリがリロードされるたびに、新しいJSContextが作成されます。「JSContextのWebインスペクタを自動的に表示」を選択すると、最新のJSContextを手動で選択する必要がなくなります。

リモートJavaScriptデバッグ（非推奨）​

警告

リモートJavaScriptデバッグはReact Native 0.73で非推奨になり、将来のリリースで削除されます。

リモートJavaScriptデバッグは、外部Webブラウザ（Chrome）をアプリに接続し、Webページ内でJavaScriptコードを実行します。これにより、他のWebアプリと同様にChromeのデバッガを使用できます。ブラウザ環境は大きく異なる場合があり、この方法でデバッグする場合、すべてのReact Nativeモジュールが機能するとは限らないことに注意してください。

設定​

React Native 0.73以降、リモートJavaScriptデバッグは、NativeDevSettingsモジュールを使用して手動で有効にする必要があります。

import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';

function MyApp() {
  // Assign this to a dev-only button or useEffect call
  const connectToRemoteDebugger = () => {
    NativeDevSettings.setIsDebuggingRemotely(true);
  };
}

NativeDevSettings.setIsDebuggingRemotely(true)が呼び出されると、https://#:8081/debugger-uiに新しいタブが開きます。

このページから、次の方法でChrome DevToolsを開きます。

  • 表示 > 開発 > デベロッパーツール
  • ⌥ Option + Cmd ⌘ + I (macOS) / Ctrl + Shift + I (WindowsとLinux)。

コンソールとソースパネルでReact Nativeコードを検査できます。

The remote debugger window in Chrome

情報

リモートJavaScriptデバッグでは、ChromeのReact DevToolsのWebバージョンはReact Nativeでは機能しません。統合デバッガでReact DevToolsを使用する方法については、React Native DevToolsガイドを参照してください。

注記

Androidでは、デバッガとデバイス間の時刻がずれている場合、アニメーションやイベントの動作などが正しく機能しない可能性があります。これは、adb shell "date `date +%m%d%H%M%Y.%S%3N`"を実行することで修正できます。物理デバイスを使用している場合は、ルートアクセスが必要です。

物理デバイスでのデバッグ​

情報

Expo CLIを使用している場合、これは既に設定されています。

USB経由で接続されたAndroid 5.0以降のデバイスでは、adbコマンドラインツールを使用して、デバイスからコンピュータへのポート転送を設定できます。

adb reverse tcp:8081 tcp:8081
注記

問題が発生した場合は、Chrome拡張機能のいずれかがデバッガと予期しない方法で相互作用している可能性があります。すべての拡張機能を無効にして、問題のある拡張機能が見つかるまで、1つずつ有効にしてみてください。