iPhoneとiPadでSafariデバッグコンソールを有効にする
iOS 版 Safari には、Web 開発者が iPhone および iPad 上の Web ページの問題を追跡して解決するのに役立つオプションのデバッグ コンソールが含まれています。
さらに、最新バージョンのiOSでは、デスクトップのSafariと同じWebインスペクタが実際に使用されているため、iPhoneまたはiPadをコンピュータに接続すると、SafariのデバッグツールをiOSまたはiPadOSデバイスで直接使用できます。
iOS の古いバージョンにもこの機能はありますが、デスクトップ版 Safari のデバッグおよび開発者ツールほど包括的ではありませんが、それでも便利であり、iPhone および iPad で簡単に有効化または無効化できます。
iOS の新しいバージョンと古いバージョンの両方でこの機能を有効にする方法と、バージョン間の違いについて学びましょう。
iPhone・iPadのSafariでWebインスペクタを有効にして使用する方法
最新の iOS および iPadOS バージョンでは、Safari Web インスペクターは次のように動作します。
- 設定 > Safari > 詳細を開き、「Webインスペクタ」をタップして有効にします
- iPhoneまたはiPadをMacに接続し、Safariに移動して、Safari > 環境設定 > 詳細 > 開発メニューバーを表示で開発者メニューを有効にしていない場合は有効にします。
- 「開発」メニューバーをプルダウンしてiPhoneまたはiPadを見つけ、デバッグしたいWebページを開きます。
- Safari Web Inspectorが開き、MacのSafariでiOSまたはiPadOSデバイスのWeb要素を直接デバッグおよび検査できます。
これで、iPhone または iPad を操作すると、Mac の Safari の Web インスペクタが更新されます。
Webインスペクタの「コンソール」タブからデバッグコンソールにアクセスでき、「デバッガー」タブからデバッガーにアクセスできます。もちろん、要素、リソース、ネットワークなどを確認するための通常のWebインスペクタツールもご利用いただけます。
必要に応じて、外出中に iOS および iPadOS のソース表示トリックを使用することもできます。
古いiOSバージョンでデバッグコンソールを有効にする方法
古いバージョンのiOSを古いiPhoneまたはiPadで使用している場合、デバッグ機能はすべてデバイス上で実行され、MacのSafariに接続することはできません。それでも、非常に便利なので、使い方は以下のとおりです。
- 「設定」を起動し、「Safari」をタップします
- 「詳細設定」をタップします
- 「デバッグコンソール」をONにする
有効にしたら、Safari 画面の上部にあるデバッグ コンソールをタップして、Web ページのエラーを確認します。
デフォルトのリストにはすべてのエラーが表示されますが、エラーを個別にタップすることで、より具体的な HTML、JavaScript、CSS エラーまでドリルダウンできます。
モバイルウェブ開発者にとってもう一つ便利なツールは、iOS版Firebug Liteです。これはJavaScriptブックマークレットを利用して、人気の開発ツールFirebugの簡易版を読み込むことができます。この機能は、新しいリリースには新しい機能が追加されているため、古いiOSバージョンでも特に役立つでしょう。
iPhone または iPad 用の Web 開発ツールをお使いですか？ヒント、コツ、アプリ、テクニックなどがあれば、ぜひ下のコメント欄で共有してください。
