Ownedmedia ウェブ制作に役立つコンテンツを発信中!

ウェブ開発 2018.12.11

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

Tags: ,,,

Xcodeに含まれる開発者ツールのSimulatorは、iPhoneなどのiOSを搭載している端末のエミュレータで、PC上で実機デバイスのシミュレーションができるツールです。今回はこのSimulatorを使ってブラウザでWebページをデバッグする方法をまとめていきたいと思います。

 

iPhoneだけバグが発生するといったケースでは、実機端末ではデバッグができないので、このようなエミュレータを使ってデバッグ作業を進めていくことになります。ここではXcodeがインストールされている前提になりますので、インストールされていない場合にはあらかじめ済ませておきましょう。

 

まず、Xcodeを立ち上げます。メニューバーから「Xcode」→「Open Developer Tool」にある「Simulator」を選択します。

 

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

 

すると、こんな感じでデフォルト設定のiOSと端末のエミュレータが起動します。エミュレータ上ではアイコンをタップするといった、実際に端末を操作することが可能です。

 

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

 

ちなみにSimulatorではこのようにいろんなバージョンのOSや端末を管理することができます。本記事ではSimulatorで新たにOSや端末のバージョンを増やす方法は割愛させていただきます。。

 

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

 

では、エミュレータに戻って、Safariのアイコンをクリックしてブラウザを立ち上げます。表示されたURLバー内に対象のウェブサイトURLを入力しアクセスします。そうするとエミュレータ内でウェブサイトが表示されているのが確認できます。

 

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

 

次に「Safari」を起動します。そしてメニューバーにある「開発」の項目から「シミュレーター」の項目を選択し、その中に現在エミュレータのブラウザで表示している対象のドメインをクリックします。

 

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

 

すると、Safariのデベロッパーツールが表示され、エミュレータ内で表示されているWebページのデバッグができるようになります。

 

XcodeのSimulatorとSafariを使ってiPhoneなどのiOS端末のデバッグ

 

実際にチェックするのは実機でも、バグが発生した際にはこのような方法でデバッグをすることで問題の早期解決につながるのではないでしょうか。iOSなどは過去のバージョンも複数テストできるのですごく便利ですね。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?