2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

iPhoneのSafariで表示しているページをMacのSafariでデバッグする

Posted at

iPhone実機で開いてるWebページのデバッグがしたい

開発中のWebサイトをiPhoneのSafariでアクセスしたところ、正常に動作していないことがわかりました。
WindowsやMacのブラウザでは正常に動作しているので、iPhone特有の症状のようです。

そこで、iPhone実機でデバッグする方法を調べたところ、MacのSafariを使った方法が一番簡単そうだったのでやってみました。

うまくできたので、忘れない内に記事に残します。

iPhoneの作業

まず、 設置 アプリを開きます。
Safari詳細Webインスペクタ をONにします。

次に、iPhoneのSafariでデバッグしたいページを開きます。

iPhoneとMacを接続する

MacとiPhoneをUSBで接続します。

iPhone側に このコンピュータを信頼しますか? と表示されたら 信頼 をタップしてから、パスコードを入力します。

ios12-iphone-x-home-trust-computer-alert.jpg
引用:https://support.apple.com/ja-jp/HT202778

Macの作業

まず、 Safari を起動します。

メニューバーの 開発 にカーソルを合わせます。

もし、 開発 が見当たらない場合は、メニューバーの Safari環境設定詳細メニューバーに"開発"メニューを表示 をONしてください。

メニューバーの 開発 にカーソルを合わせると、iPhoneのデバイス名がリストにあるので、そこにカーソルを合わせます。
すると、iPhoneのSafariで開いているページのURLがリストで表示されるので、デバッグしたいページを選びます。

そうすると、 Webインスペクタ というウィンドウが立ち上がります。

これで、デバッグ作業ができるようになりました。

さいごに

簡単にできてよかったです。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?