React Native Debugger で Waiting for React to connect... になる問題を解決する

React Native Debugger 全然動かない！現象に随分とハマり，ようやく解決できたのでエントリ化しておきます。
結論としては，接続先ポート番号が違うとことが原因でした。

前提として環境は以下のとおりです。

• OS : macOS Big Sur 11.5
• React Native : 0.63
• expo : 4.8.1
• expo : SDK 42
• React Native Debugger : 0.11.9

1 つずつ試していったことをそのまま書いていきます。

1. Remote debugger is in a background tab which may cause apps to perform slowly. ...

expo start
react native debugger 19001
iphone simulator ctrl+cmd+z remote js debug

Remote debugger is in a background tab which may cause apps to perform slowly. ...

まずはログを見る。

Remote debugger is in a background tab which may cause apps to perform slowly. ... このメッセージが出ているから？と思ったけど OS アップデートしたせいか途中から出なくなった。 メッセージ有無に関わらずデバッガから接続できないので次へ。

2. There is a new version of expo-cli available (4.8.1).

expo start 時に，expo-cli のバージョン古いよって言われる。

$ expo start
│ There is a new version of expo-cli available (4.8.1). │
│ You are currently using expo-cli 4.7.3 │
│ Install expo-cli globally using the package manager of your choice; │
│ for example: `npm install -g expo-cli` to get the latest version │

expo-cli を 4.8.1 にアップデートするも，何も変わらず。次へ

3. expo start と Debugger の起動させる順序が悪い？

expo start してから React Native Debugger を起動する
React Native Debuger を起動してから expo start する
何も変わらない。

4. React Native Debugger の接続先ポートが違う？

React Native Debugger を起動するとデフォルト 8080 ポートで起動する。
いろいろな記事を見ると 19001 ポートで接続すると書いてあるので，React Native Debugger のメニュー Debugger > New Window (cmd+T) をクリックし，19001 にしてみる。
expo start してみたりするが何も変わらない。

5. React Native Debugger のバージョンが悪い？

Ract Native Debugger を起動すると以下のメッセージが表示される。

`bundle.js:2 [RNDebugger] Welcome! Before using this app, you need to ensure you are using the correct version of React Native Debugger and react-native:window.logWelcomeMessage`
React Native Debugger Version
React Native <= 0.61 | v0.10
React Native >= 0.62 | v0.11

React Native のバージョンの調べ方から探す。
Expo SDK のバージョンは package.json から 42 と分かったので https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/ から SDK 42 の記事を読み ReactNative 0.63 を見つける。うーん，Debugger と React Native のバージョンは合っているな。

とはいえ動かないので，一応 Debugger をダウングレードしてみる。

https://blog.ryou103.com/post/react-native-debugger-versions/ を参考に，brew ではなく GitHub からダウンロードしてインストールする。

https://github.com/jhen0409/react-native-debugger/releases

React Native Debugger 0.10.3 を試してみるがやはり動かず。

6. 設定手順足りない？ react-devtools とかもインストール必要？

未調査。

7. debugger-ui が動いているから？

http://localhost:19000/debugger-ui/ にアクセスすると Another debugger is already connected って表示される。確かに React Native Debugger を起動しているが接続はできていないぞ。一応 React Native Debugger を終了してみるが connected されたまま。

debugger-ui が何かは分かっていない。

8. ポートが 19001 「らしい」というのが怪しいのでは？

この問題は Udemy の「React Native 入門：ニュースアプリを作りながら覚えよう/Hooks 対応版」をやっているときにハマった問題なのだけれど，これはもう質問するしかないと思い，Q&A を見てみたら既に同じ質問があって和田さんが回答済だった。

動画では19001で繋いでいますが、expoが19000など他のポートで起動する場合もあり、その場合はexpoが起動したポートに合わせてデバッガーも接続してください。起動したポートはExpoの起動したブラウザの画面で確認できます。

なるほど！？

画面を見ると確かにポート番号は書いてある。19000 は debugger-ui 用のポートで，デバッガは別に専用ポートが準備されていると勝手に思い込んでしまっていた。。。

React Native Debugger を 19000 ポートで起動し，expo start し直すことでデバッガに接続でき，Redux の State を見られるようになりました！