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のデバッグもできるようになります。

2018年10月追記：
iOS12.1、iPhone XR、iPhone XS、iPhone XS Max、新型iPad Proもデバッグ可能

 

iOS Simulatorの保存場所

Xcodeをインストールしたらどこに保存されるの？

ここです。
/Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

web_devtools_ios_simulator01

 
Finderを選択している状態で、「Shift」＋「Command」＋「G」
それで上のディレクトリ「/Applications/Xcode.app/Contents/Developer/Applications/」を検索すれば一瞬でいけます。

Spotlightでの検索は、「command + スペース」、
USキーボードの場合は、「control + スペース」になります。

頻繁に使う人はDockに置いておきましょう。

 
それでは起動。

web_devtools_ios_simulator02

 
これこれ。
それでSafariを開いてURL入れてサイト表示。

 

SafariのDeveloper toolでデバッグ

ここからSafariブラウザを使います。

Safariのメニューから環境設定にいき、詳細タブの中の一番下の開発メニューの表示をオンにします。

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

 
web_devtools_ios_simulator04

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

 
web_devtools_ios_simulator05

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

2018年10月現在は「iOS 12.1」「tvOS 12.1」「watchOS 5.1」などのOSが確認でき、iOSデバイスでは最新のiPhone XRやiPhone XS、iPhone XS Max、iPad Proも追加されています。

XcodeのiOS simulatorでWebサイトやアプリをデバッグする

Xcodeを常に最新版にアップデートしておけばiOS Simulatorで確認できるデバイスも新たに追加され、その時々の最新のデバイスも確認できます。

 
僕は普段から使い慣れたGoogle Chromeのデベロッパーツールを使ってますが、最終確認ではiOS Simulatorで確認、デバッグしていきます。