[iOS][Mac]シミュレータでWebデバッグができない時の対処法

のえる のえる 2018.08.09

どうも、のえるです。

先日、名古屋は摂氏40度を超え、とうとう亜熱帯地方かな?と勘違いするほどの暑さでした。
みなさん、熱中症には十分注意しましょう。

今回は、Web開発案件でシミュレータによるデバッグをした際にハマったことを記載してみます。

シミュレータでデバッグするには?

XcodeがインストールされているMacには、シミュレータが自動で入っています。

このシミュレータ、実は非常に良くできていることで有名で、Safariも入っています。

このシミュレータ内のSafariを利用して、Webページのレイアウト確認を行うことが可能です。

シミュレータによるデバッグ方法は下記のとおりです。

Safariの設定を変更

Safari > 環境設定 > 詳細 > 「メニューバーに”開発”メニューを表示」にチェックを入れる
mac_config_dev

シミュレータの起動

1) Xcode.app > パッケージの中身を表示
open_xcode

2) Contents > Developer > Applications > Simulator.app
open_simulator

開発ツールを表示

Safari起動 > Safariの「開発」 > [シミュレータ名] > [URL]
safari_dev_simu

iOS11からデバッグするには

上記方法でWeb開発コンソールのデバッグができたのですが、iOS11あたりからはこの方法でデバッグができなくなってます。(詳細なバージョンは未調査)

では、どうやってデバッグするのか、それは「Safari Technology Preview」を使用します。

※Safari Technology Previewの開発タブ表示方法は通常のSafariと同じ為、割愛します(英語のみ)

シミュレータのOSバージョンを増やすには

シミュレータのOSバージョンはXcodeから増やすことができます。

Xcodeを起動 > Xcode > Preferences
xcode_preferences

Components > Simulators を開き、ダウンロードしたいOSバージョンの下向き矢印を
クリックすることで、そのOSバージョンをダウンロードすることができます。
components

※注意点として、「Xcodeのバージョンごとに、最新OSが決まっている」ため、
新バージョンが発表・ダウンロード可能となった場合、
Xcodeを再インストールする必要があります。
(その場合、古いバージョンのシミュレータOSは保持されます)

まとめ

どうやら、シミュレータのデバッグはSafari Technology Previewという開発版に統合したようですね。
使い方はSafariと同じなので、英語版でも安心ですね。

ではでは?♪

のえる

書いた人

のえる

Full-stack Developer / Motorcycle Enthusiast / Guitarist

RECOMMEND