React Native Debugger（MAC版）

React Native Debuggerは、React Nativeアプリをデバッグするための無料でオープンソースの単体アプリです。公式のRemote Debuggerをベースに機能を追加し、React Inspector、Redux DevTools、Apollo Client DevToolsを1つのウィンドウにまとめています。使うには、アプリを開き、他のデバッガークライアントが閉じていることを確認して、アプリの開発者メニューでDebug JS Remotelyを有効にします。

React Native DebuggerはJhen-Jie Hongが開発し、MITライセンスで公開されています。重要な制限があります。対応するのは旧来のRemote Debuggerのみで、Hermes、JSI、New Architectureには対応しておらず、バージョン0.14.0以降の新しいリリースはありません。まず自分のプロジェクトに合うか確認してください。バージョン0.11以降にはreact-native 0.62以降が必要です。バージョン0.14.0はIntelとApple Silicon用のユニバーサルアプリで、macOS 10.13以降が必要で、Electron 25をベースにしています。

主な機能

React Native Debuggerは、React Nativeの主なデバッグツールを1つのアプリにまとめています。

• リモートデバッグ：公式のRemote Debuggerをベースに、機能を追加しています。
• React Inspector：react-devtools-coreから組み込まれています。
• Redux DevTools：redux-devtools-extensionと同じAPIで組み込まれています。
• Apollo Client DevTools：devtools拡張として組み込まれています。
• ネットワーク検査：Chrome Developer Toolsでネットワーク通信を検査できます。
• デバッガーウィンドウ：Command+Tで新しいウィンドウを開き、必要なポートを設定できます。
• URIで起動：rndebugger:スキームを使ってコマンドラインから起動できます。
• 設定ファイル：ホームフォルダーのファイルに設定を保存できます。

React Native Debugger 0.14.0では、主要な部品を更新し、フォームを改善しました。

• フォームでEnterキーが使えるように
• Electron 25にアップグレード
• react-devtools-coreを4.28.0にアップグレードし、ソースマップの警告を修正
• redux-devtoolsを最新バージョンにアップグレード
• apollo-client-devtoolsをバージョン4にアップグレード
• Open in Editorでホストを確認しないように変更