SafariのデベロッパーツールとiOS SimulatorでWebサイトやアプリをデバッグ

Web開発しているとデバッグは欠かせないのですが、スマホの確認、デバッグとなるとGoogle ChromeやFire Foxのデベロッパーツールがある。
ある日、Google Chromeのデベロッパーツールは問題ないのに実機ではうまくいっていないことがあった。もしやと思いiOS Simulatorを立ち上げて確認するとうまくいっていない。
やはりスマホ表示はスマホ専用のシミュレータで確認したほうがいいね。
でもiOS Simulatorってアプリ開発のデバッグしか出来ないの?
と思ったけど、Safariブラウザを使ってできるんですよね。
iOS Simulatorとは
iOS Simulatorとは、Xcodeに付属されていてアプリケーションのテストができるもの。MacはApp StoreからMac、iPhone、iPad向けのアプリ開発に使われるXcodeが無料でインストールできます。
XcodeインストールするとiOS Simulatorがもれなくついてきます。
こちらのiOS Simulatorを使ってWebサイトのデバッグをやっちゃうんです。
iOS Simulatorって言うだけあって、iOSのiPhone、iPadはかなり正確です。
しかも、その時々のXcodeの最新版にアップデートしていくと、Appleから発売された最新のiPhoneやiPadのデバッグもできるようになります。
2022年5月追記:
Xcode 13.4からはiOS 15.5、iPadOS 15.5やiPhone 13、iPhone 13 Pro、iPhone 13 Pro Max、iPhone 13 Pro miniはもちろん、新型iPad AirやiPad Proもデバッグ可能となります。
iOS Simulatorの保存場所
Xcodeをインストールしたら、付属でついてくるiOS Simulatorが利用できます。
iOS Simulatorは以下の場所にあります。
/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

Finderを選択している状態で、「Shift」+「Command」+「G」
それで上のディレクトリ「/Applications/Xcode.app/Contents/Developer/Applications/」を検索すれば一瞬でいけます。
Spotlightでの検索は、「command + スペース」、
USキーボードの場合は、「control + スペース」になります。
頻繁に使う人はDockに置いておきましょう。
準備が出来たら、iOS Simulatorを起動します。

はい、これです。
Xcodeのバージョンが古いと、デバイス上部にあるツールバーはありません。
Xcode 11.4以降では、デバイスを削除したりdockに閉まったり、他、スクリーンショットやホーム画面に戻ったり、デバイスを回転させて横向きにするなどが手軽に行えます。
それではSafariを開いて、URLを検索窓に入力してサイト表示させましょう。
SafariのDeveloper toolでデバッグ
ここからSafariブラウザを使います。
Safariのメニューから環境設定にいき、詳細タブの中の一番下の開発メニューの表示をオンにします。

するとメニューに開発(Develop)が表示されるので、Simulatorに進んでいくとiOS Simulatorで表示しているサイトを選択できます。

選択するとDeveloper toolが起動してデバッグがおこなえます。

また、確認したいデバイスを切り替えるには、「Hardware」>「Device」>「iOS 13.0」のように入っていき確認したいデバイスを選択します。

2022年5月現在、Xcode 13.3では「iOS 15.5」「iPadOS 15.5」「tvOS 15.4」「watchOS 8.5」などのOSが確認できます。
iOSデバイスでは最新のiPhone 13やiPhone 13 Pro、iPhone 13 Pro Max、iPhone 13 Pro mini、iPadOSではデバイスではiPad Pro、iPad Airもあります。
Xcodeは、App Storeから最新版にアップデートできます。
Xcode 11.4以降では、若干オプションの表示が異なります。
「File」>「Open Device」>「iOS 13.5」と進み、デバイスを選択します。

Xcodeを常に最新版にアップデートしておけばiOS Simulatorで確認できるデバイスも新たに追加され、その時々の最新のデバイスも確認できます。
ちなみに、iOS Simulatorは複数のデバイスを立ち上げることもできます。
ただ、あまり多く立ち上げると重くなりますので、必要ないデバイスは消して起きましょう。
削除するには、表示されているデバイス上部のツールバーから、立ち上げたデバイスを削除します。
Xcode 11.4以前のバージョンでは、削除するデバイスを選択して、画面上部のメニューから「File」> 「Close Window」で消すことができます。
ショートカットキーは「command + w」になります。
僕は普段から使い慣れたGoogle Chromeのデベロッパーツールを使ってますが、最終確認ではiOS Simulatorで確認、デバッグしていきます。