1
0

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 1 year has passed since last update.

スマホでWebサイトをデバッグ

Posted at

iPhoneのsafari browserをMac上でDebug方法

Frontの開発をして様々なデザインチェックをする際に、自分が作ったサイトのデザインをスマホでデバッグしたいときに使えたらと思う。
今回はiPhoneのsafari browserで動いているサイトをMacBook上でデバッグする方法を紹介します。

iPhoneとMacBookをCableで繋ぐ

接続ケーブルは使う端末によって違うが、自分の場合は iPhone 12 Promaxと MacBook Air を繋いで検証するので、TpyeCケーブルで繋げます

iPhoneのSetting

iPhoneのSetting>Safari>Advanced(詳細)> Web Inspector をONにする
WebInspector

MacのSetting

端末MacBookのSafariのDevelopにてお使いの

・MacのSafari>Develop(開発)にて 繋げている iphoneデバイスを選択し>デバッグしたいページを選択
スクリーンショット 2023-09-11 15.36.48.png
スクリーンショット 2023-09-11 15.35.31.png

1
0
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
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?