モバイル(iOS Safari)でReactをデバッグしたい

トラハック@toraco株式会社

事の発端

ReactでWebアプリ開発中に、iOS Safariでしか発生しないバグに遭遇した

やりたくないこと

開発環境にデプロイしてモバイルで確認して...なんてダルイことはしたくない🥱

やりたいこと

ローカル環境をモバイルのSafariで確認できるようにしたい

トラハック@toraco株式会社

環境

create-react-appで環境構築したWebアプリ
react-scriptsを使用している

トラハック@toraco株式会社

モバイルからローカル環境に接続する

npm startすると以下のようなログがターミナルに表示されるはず。

> react-scripts start

ℹ ｢wds｣: Project is running at http://192.168.1.xxx/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /Users/takaakiinagaki/dev/sacri-owners/public
ℹ ｢wds｣: 404s will fallback to /
Starting the development server...
Files successfully emitted, waiting for typecheck results...

Project is running at http://192.168.1.xxx/の192.168.1.xxxは同一ネットワークでアクセスできるIPアドレス
ポート番号はデフォルトで3000

同じWiFI環境にあるiOS端末のSafariでhttp://192.168.1.xxx:3000にアクセスする

トラハック@toraco株式会社

iOS端末のSafariで開いているページをデバッグする

結論：SafariのWebインスペクタ機能を使う

事前設定

iOS Safariの設定 > Safariをタップ
一番下の詳細をタップ
WebインスペクタをONにする

使用手順

MacとiPhoneをUSBで接続
MacのSafariを起動する（開発タブが表示される設定になってなければ設定してね）
iPhoneでローカル接続しているWebアプリを開く
開発 > iPhone名からhttp://192.168.1.xxxを選択
開発者コンソールが起動するので確認できる、やったね！

注意点

環境によるかもしれないが、開発者コンソールが立ち上がってすぐにdisconnectになる。
根気よくリトライすると接続できる。
誰か解決方法を教えてクレメンス

___

環境によるかもしれないが、開発者コンソールが立ち上がってすぐにdisconnectになる。
根気よくリトライすると接続できる。
誰か解決方法を教えてクレメンス

僕の方でも再現します・・・。