iPhone & iPad で Safari デバッグコンソールを有効にする

さらに良いことに、最新バージョンの iOS では、実際にはデスクトップ上の Safari と同じ Web インスペクタを使用します。つまり、iPhone または iPad をコンピュータに接続すると、Safari デバッグツールを直接使用できます。 iOSまたはiPadOSデバイスで

iOS の新しいバージョンと古いバージョンの両方でこの機能を有効にする方法を学び、バージョン間の違いについても学びましょう。

iPhone および iPad の Safari で Web インスペクターを有効にして使用する方法

最新の iOS および iPadOS バージョンでは、Safari Web インスペクタは次のように機能します:

設定 > Safari > 詳細設定を開き、タップして「Web インスペクタ」を有効にします
iPhone または iPad を Mac に接続し、Safari に移動して開発者メニューを有効にしていない場合は、Safari > 環境設定 > 詳細設定 > 開発メニューバーを表示する
「開発」メニューバーをプルダウンしてiPhoneまたはiPadを見つけ、デバッグしたいWebページを開きます
Safari Web Inspector が開き、iOS または IPadOS デバイスの Web 要素を Mac の Safari で直接デバッグおよび検査できます

iPhone または iPad でナビゲートすると、Mac の Safari の Web インスペクタが更新されます。

Web インスペクタの [コンソール] タブからデバッグコンソールにアクセスでき、[デバッガ] タブからデバッガにアクセスできます。もちろん、要素、リソース、ネットワークなどの通常の Web インスペクタツールも使用できます。

必要に応じて、外出中に iOS および iPadOS のソース表示トリックを使用することもできます。

古いiOSバージョンでデバッグコンソールを有効にする方法

古い iPhone または iPad で古いバージョンの iOS を使用している場合、すべてのデバッグエクスペリエンスはデバイス上にあり、Mac の Safari に接続することはできません。それにもかかわらず、これは非常に便利です。その仕組みは次のとおりです:

「設定」を起動し、「Safari」をタップします
「詳細設定」をタップ
「デバッグコンソール」をオンにスライド

有効になったら、Safari 画面の上部にあるデバッグコンソールをタップして、Web ページのエラーを表示します。

デフォルトのリストにはすべてのエラーが表示されますが、個別にタップすることで、より具体的な HTML、JavaScript、および CSS エラーにドリルダウンできます。

モバイル Web 開発者向けのもう 1 つの便利なツールは、iOS 用の Firebug Lite です。これは、javascript ブックマークレットを使用して、人気のある Firebug 開発ツールのより単純なバージョンをロードします。新しいリリースには新しい機能があるため、この機能はおそらく古い iOS バージョンにも最も役立ちます。

iPhone または iPad 用の Web 開発ツールを使用していますか?以下のコメントでヒント、コツ、アプリ、またはテクニックを共有してください。