React Nativeのデバッグ方法

バージョン: 0.54.2

console.logの表示

react-native run-ios or run-androidでアプリ起動中に
react-native log-ios or log-androidを実行するとターミナル上でconsole.logで出力している内容などが確認できる。
例えば、

  renderContent() {
    console.log(`[INFO] this.state.activeTab: ${this.state.activeTab}`);
    switch (this.state.activeTab) {
      case "home":
        return <Home />;
        〜

chromeでのデバッグ

react-native run-ios or run-androidでアプリ起動後、ローカルのnodeサーバによってdebugger-uiというページにアクセスできるようになっているので、chromeでhttp://localhost:8081/debugger-ui にアクセスする。
そのあと、シュミレータでDeveloperメニューを表示（iOS: ⌘ + d, Android: ⌘ + m）して、Debug JS Remotelyを選択し、chromeでChrome DevToolsを開くと以下のようにブレークポイントを設定したり、変数の中を確認したりすることができる。

VSCodeでのデバッグ

VSCodeのメニュー > デバッグ > 構成の追加を選択して、./.vscode/launch.json にReact Native: Debug AndroidとReact Native: Debug iOSを追加する。 デバッグビューを表示（⌘ + shift + d）し、Debug iOS or Debug Androidを選択して、デバッグの開始を実行するとchromeと同様のデバッグができる。

※ Debug JS RemotelyがOnになっているとアプリ起動後にエラーになるのでOffにしておく

その他

React Native Debugger、reactron などのStandaloneのツールもある

• reactotron
• react-native-debugger