[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法
こんにちは、霙(@xxmiz0rexx)です。 スマートフォンサイトを制作している時、たまーに困ることがあります。 それは、実機でしか再現しない表示崩れ。 Macでみた時は大丈夫だったのに、何故かiPhoneでは謎の余白が…なんてことが先日もありまして、 解決のためにSafariのWebインスペクタ機能を使ってみましたので使い方をメモしたいと思います。 Webインスペクタ機能とは iPhoneで見ているページのソースをMacで見ながらデバッグできる機能です。 使うには双方へのちょっとした設定と、お互いをケーブルで繋ぐことが条件。 みんなだいすきGoogle Chromeの開発者ツールと同じようなものですね。 必要なもの 1.Mac 2.iPhone 3.ケーブル 次の章で使い方を書いていきたいと思います。 Webインスペクタ機能を利用する手順 1：iPhoneとMacをケーブルで繋ぐ まず
![[Web制作]iPhoneサイトで表示崩れが発生した時、実機とMacを繋いでWebインスペクタ機能でデバッグする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f32f22625c07917861df73b24c82b03b4b6348/height=288;version=1;width=512/http%3A%2F%2Fwebimemo.com%2Fwp-content%2Fuploads%2Ff58a46be76400f23debbeacb9e1cc899.png)
検証機なし！iOS EmulatorでMobile Safariを快適にデバッグ - Qiita
iOS EmulatorはAppだけではなく、Mobile Safariのデバッグにもすごく役に立ちます。Xcodeのコンポネントとしてインストールできますので、無料でダウンロードできます。 Xcodeのダウンロード: https://itunes.apple.com/jp/app/xcode/id497799835?l=en&mt=12 インストールの手順は以下になります。 まずはXcodeをインストールする必要があります。もしまだいれていなかったら、Mac App Storeからダウンロードできます。 iOS Simulatorを立ち上げるには、まずXcode.appを実行します。XcodeメニューのOpen Developer Toolsの下層にiOS Simulatorがあります. 立ち上げたら、下図のようなウィンドウが現れます。これがiOS Simulatorになります。 Xco
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
