Open5
モバイル(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になる。
根気よくリトライすると接続できる。
誰か解決方法を教えてクレメンス
僕の方でも再現します・・・。