概要
WEBサービス開発が進み始め、スマホでの実機確認の機会も増えてきたので
iPhone の実機で表示確認テストをおこなうときに、PCブラウザでデバックできる方法を調べました。
すごく簡単だったので、実機デバックに活用いただければ幸いです。
準備するもの
- iPhone
- Mac 端末
- iPhone と PC を繋ぐためのケーブル (純正じゃないとうまくいかない可能性もあるかも?)
手順
物理作業
- Mac 端末と iPhone をケーブルで接続する。
端末設定
- 設定 -> Safari -> 詳細 を開き 「Webインスペクタ」 を ON にする
![iphone01.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F132495%2F65488446-0d12-40ea-5377-a031fcf2e643.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3679aa0badf2d2ff4420e2a8376a5daf)
Mac設定
- Safari の 環境設定 -> 詳細 から 「メニューバーに"開発"メニューを表示」 にチェック
- 開発メニュー -> iPhone から 「JSContextsのWebインスペクタを自動的に表示」 にチェック
完成
たったこれだけで iPhone で開いている Safari 上でデバックする準備が整いました。
実際画面
iPhone の Safari で Github ページを見てるときのイメージです。
端末キャプチャ
![iphone02.jpg](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F132495%2Fdaa704f4-e889-b5a5-bb8b-1e90053b2a9d.jpeg?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=bfa0cad8be274ee77ccc64db4290a45d)