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

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

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などは過去のバージョンも複数テストできるのですごく便利ですね。
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram