React Native & ChatGPT モバイルアプリ開発(2)
トラブル
連休ということで深夜に映画を見た後、続きの作業を行おうとしたところでトラブルに見舞われました。ことの発端は bbsmenu.jsonから追加のデータを取得しようとし、上手く取れているか確認するためにブレークポイントを設定してデバッグボタンを押したことでした。
それまではコピペ実行コピペ実行を繰り返すだけで特に変数の内容を確認しようと思ったりはしなかったのですが、JSONから取り込んだデータを見ようとしたところChromeの新たなインスタンスが起動して
Remote JavaScript debugging (this workflow) is deprecated in React Native 0.73 and will be removed in a future release.
というメッセージが表示されました。
ChatGPTに確認したところ
React Native 0.73以降でのJavaScriptのリモートデバッグ機能は非推奨となり、将来的には削除される予定です。代わりに、Hermesを使用しているアプリでは「Open Debugger」ワークフローを、JSC (JavaScriptCore) を使用しているアプリではSafariを通じた直接デバッグを推奨しています。
だそうなのですが、Hermesって何？私とは縁のないブランド名くらいしか思い当たりませんが何か？
ここからデバッガを利用するためにあれやこれやインストールしたりしていたところビルドに失敗するようになりました。
error Failed to build iOS project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'SurfPlank.xcworkspace'.
これに関してはChatGPTはまったく解決できなくてググってみたところ、cocoapodsのバージョンを1.15.0から1.14.3に下げろという情報が見つかりました。
cd ios
gem uninstall cocoapods
gem install cocoapods -v 1.14.3
rm -rf Pods
pod cache clean --all
pod install
cd -
とりあえずこれでビルドに成功し、iosシミュレータで再び実行できるようになりました。さて、ビルドができるようになったところで再びデバッグ方法についての調査ですが、なかなか良い情報が見つかりません。みなさんどうしているのでしょう？WebStormのIDE上で簡単にデータの確認ができないと手間がかかって仕方ないのですが。
一歩前進？
WebStorm上からはどうにもならなさそうなのでターミナルから
npx react-native start --experimental-debugger
を実行し、とりあえずChromeの新たなインスタンスでDevToolsという画面が開いてApp.tsxを表示するところまでたどり着きました。
ブレークポイントで止まらないんですが。どなたかReact Nativeのデバッグ方法教えてください。
とりあえず解決
普段はまったく使わないVisual Studio Codeで試してみたところ、iosでは上手くブレークポイントで停止してくれました。残念ながらAndroidでは止まらないのですが。ひとまずデータを確認しながらステップ実行できることがわかって一安心です。
この後WebStormに戻って実行しようとすると真っ白な画面（vscodeのデバッガで止めていたところと同じ？）で停止してしまい、XcodeでClean Build Folderを行ってからWebStormに戻ってリビルドすると動作するようになりました。安定した開発環境としてはVSCodeの方がよいのかもしれません。JetBrainsのUIの方が好みなのですが。
続きはこちら。
Flutter版はこちら。
Discussion