iOS端末（iPhone・iPad）の実機のSafariで、HTMLの表示確認とデバッグをする方法をまとめておきます。JSのデバッグはできません。表示（HTML）のデバッグ方法となります。

環境の前提 #

• SafariがインストールされているMac
• iPhoneやiPad
• Lightningケーブルなど、端末とMacを接続するもの

iOS端末のSafariインスペクタを有効化 #

iPhone・iPadどちらも共通です。
「設定」アプリを起動、Safari > 詳細 > 「Webインスペクタ」のスイッチをONにします。

MacのSafariで「開発」メニューを有効化 #

Safari > 環境設定 > 「詳細」タブ > 「メニューバーに"開発"メニューを表示」をONにします。

iPhone・iPadとMacをケーブルで接続してデバッグ #

iOS端末とMacを接続し、Safariやアプリ内WebViewが表示されている状態にします。
すると、MacのSafariの「開発」メニューで、iOS端末のSafariにアクセスできるようになります。

以降は、インスペクタでHTMLを変更したり、merginやpaddingを変更したりなど、かんたんなデバッグができるようになります！

具体的にできること #

いわゆるWebインスペクタでできること、という感じです。

• ネットワークのアクセスログを時系列でチェックできる（Chromeのインスペクタと同様）
• HTMLやCSSのデバッグができる（書き換えながら表示確認ができる）

スマホで使うことを想定しているサイトやアプリケーションであれば、ぜひ実機で確認するようにしたいですね！