Help us understand the problem. What is going on with this article?

iPhoneのSafariで開いているページをWebインスペクタでPCからデバックする方法

More than 3 years have passed since last update.

概要

WEBサービス開発が進み始め、スマホでの実機確認の機会も増えてきたので
iPhone の実機で表示確認テストをおこなうときに、PCブラウザでデバックできる方法を調べました。

すごく簡単だったので、実機デバックに活用いただければ幸いです。

準備するもの

  • iPhone
  • Mac 端末
  • iPhone と PC を繋ぐためのケーブル (純正じゃないとうまくいかない可能性もあるかも?)

手順

物理作業

  • Mac 端末と iPhone をケーブルで接続する。

端末設定

  • 設定 -> Safari -> 詳細 を開き 「Webインスペクタ」 を ON にする

iphone01.jpg

Mac設定

  • Safari の 環境設定 -> 詳細 から 「メニューバーに"開発"メニューを表示」 にチェック

mac01.png

  • 開発メニュー -> iPhone から 「JSContextsのWebインスペクタを自動的に表示」 にチェック

mac02.png

完成

たったこれだけで iPhone で開いている Safari 上でデバックする準備が整いました。

実際画面

iPhone の Safari で Github ページを見てるときのイメージです。

端末キャプチャ

iphone02.jpg

PC側のWebインスペクタ画面

PC01.png

t-toyota
プログラムをする人です。
https://weboar.com/
weboar
技術と発想で 「嬉しい」を形にするスタートアップ
https://weboar.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away