A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

Safari(mac)のWebインスペクタを使ってiPhoneでデバッグしてみる

      2014/10/30

すごく便利なのですが、意外と知られていない感じがするiPhoneでのWebインスペクタ機能。

Safariで”要素の表示”を選択したときに表示されるアレです。
メニュー > 開発 > Webインスペクタの表示 でも開きます。

SS_2014-10-30 1.26.50

iPhoneの設定

設定 > Safari >詳細
と進み、WebインスペクタをONに設定します。

SS_3732 SS_3733

Safari(mac)の設定

開発 >(接続しているiPhon名) >(表示しているサイト)

開発メニューが表示されていない場合はSafariの環境設定でメニューバーに”開発”メニューを表示にチェックを入れてください。

SS_2014-10-30 0.56.50

Webインスペクタの画面が開けばOKです。

あとは、HTMLやCSSのソースを確認したり、タイムラインやコンソールでリクエストの状態を確認したりする事ができますので、PCのSafariでは問題がないけどiPhone(実機)で動かない!レイアウトがおかしい!って時に威力を発揮します。

SS_2014-10-30 0.58.19

 - 開発全般 , ,

STINGERレクタングル大

STINGERレクタングル大

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  関連記事

no image
クラスの命名のアンチパターン

クラス名や変数名で悩むことや、誰かが作ったコードで意図が分からない場合などよくあ …

A4WORKS_icon_square_gray_40
アプリエンジニアから見てAPI設計において気をつけてもらえるとうれしいこと

データ構造について、アプリ運用時にむけて、負荷対策や利便性向上にむけてという3つ …

terminal_icon
「Agreeing to the Xcode/iOS license requires admin privileges, please re-run as root via sudo.」と表示されコマンドラインで操作ができなくなる

先日macのターミナルからコマンド操作をしようとしたら以下の様なメッセージが表示 …