Xcode Simulator（iOS Simulator）のMobile Safariでインスペークタを使ってページ要素を検証する方法です。やり方がトリッキーだったのでメモっておきます。
デスクトップ版Safariで見ると同じように崩れてることが多いので、そっちで直せば解決することが多いんですけど。今回のは久々にMobile Safariのみの崩れだったので少し戸惑ってしまいました。
Xcode Simulatorの設定
- Xcodeを立ち上げて、Xcode > Open Developer Tool > Simulatorを選択（SpotlightやAlfredを使うとSimulator.appを直接起動できます）
- Simulator > Hardware > Deviceから任意のデバイスを起動する
- デバイスのSettings > Safari > AdvancedでWeb Inspectorをオンにする
- デバイスでSafariを起動してページを開く
デスクトップ版Safariの設定
- 環境設定 > 詳細で「メニューバーに”開発”メニューを表示」をオンにする
- 開発メニューに「Simulator」という項目が出てくるので検証したいページを選ぶ
開発メニューに「Simulator」が出てこない場合
Simulatorでデバイスを立ち上げた後にSafariを再起動すると出てきます。Simulatorでデバイスが起動している状態でデスクトップ版Safariを起動しないとメニューに出てこないみたいなので注意が必要です。デバイスを変えたときも開発メニューから「Simulator」が消えてしまうので、デスクトップ版Safariを再起動する必要があるみたいです。ちょっと面倒ですね。。。
環境
以下の環境で確認しました。
- macOS High Sierra 10.13.2
- Xcode 9.2 (9C40b)
- Simulator 10.0 (SimulatorApp–835.5 CoreSimulator–494.33)
- デスクトップ版Safari 11.0.2 (13604.4.7.1.3)
もしかすると設定方法や場所が違うかもしれませんが、Mac OS X 10.7以降で使えるようです。
About the author
Rriverの竜（りょう）です。「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、東海岸のボストン近郊でウェブ制作を開始。帰国後、東京のウェブ制作会社に勤務。現在は組織のウェブ担当者として日英バイリンガルウェブサイトの運営に携わっています。より詳しくはこちら。
記事へのコメントはもちろん、執筆・翻訳、レスポンシブなウェブサイト制作、コラボのご相談などもTwitter @rriver またはFacebook でお気軽にご連絡ください。
コメントを残す