RNを試しにさわってみようとしたらコードよりも環境構築まわりで何度かつまづきました。しかし情報は英語ばかりでしかも未解決なものも少なくない。
今回は特につまったReact Natvie Debuggerで解説。
React Natvie Debuggerとは
brew install --cask react-native-debugger
などを使って落としてきたRNデバッグ専用ツールを指しています。
様々な記事にlocalhostの19001と同じポートをReact Natvie Debuggerで立ち上げたら繋がるよ。と書いてありますが何度立ち上げ直しても繋がりませんでした。
ライブラリのバージョンを変えてみたり、
VSCode、エミュレータ、Macbook本体それぞれで再起動したりnode_modulesを何度か消して入れ直しても無駄でした。
数時間とかしたのですが灯台下くらしですぐに解消しました。
結論：19000でいけた
結論から言うと19000のポートがexpoで割り当てられていました。
①React Native Debugger側で19000ポートを事前に立てておく
②いつも通りエミュレータを立ち上げる（ cmd + D て開いたメニューの Remote Debug JS を選択する。（Debugg中の履歴が残っていたらStopさせて再度つなげる） ）
これだけです。
勝手にブラウザの新タブにデバッガーページ（debugger-ui）が勝手に開かれる場合
19000で繋がれば良いという簡単な方法に気がつかなかった大きな要因はdebugger-uiページの存在です。
これが開かれたページが19000の場合はReact Native Debuggerは使えません。
もし事前にReact Natvie Debugger側で19000ポートを開いている状態でエミュレータを立ち上げてもブラウザにdebugger-uiページが開かれてしまったよ。と言う人はdebugger-uiページを閉じてみてください。
それからRemote Debug JSを立ち上げ直してみてください。
それでもうまくいかない場合は、React Natvie Debugger側で19000ポートを開くタイミングを変えて何度か同じことをやってみてください。
19000で事前に試していたがうまくいかなかった理由を整理
途中から19000で十分試したつもりに勘違いしてしまいました。なぜ勘違いしたのか理由を挙げてみました。
1.いろいろな記事には19001でポート開けと書かれているのでそうだと鵜呑みにした
2.ブラウザの新タブにデバッガーページ（debugger-ui）が勝手に開かれていたがすでに何度もエミュレータは立ち上げ直していて気がつかなかった
3.19000のポートを開くとanother debugger is already connected react nativeとずっと警告がログに出て使えない
4.Remoto Debug JSを何度立ち上げ直しても3が変わらないのでexpoがデフォで占有してる？みたいな謎理論を展開してしまった
5.React Natvie Debuggerが新ポート番号を入力するページにて自動で19001を推測してくる
6.ネットの情報がすくない
7.VSCodeにDebuggerが開けないことでエラーが表示されるがそのエラーがDebuggerと関連してるものかわからないメッセージ内容でエラーをググっても情報がほとんど出てこないので自分のコードや環境がどこか悪いのかもと疑い始めた
上の理由が要因だったかなと思います。これは他の人も同じ沼にハマっていそう。