A4 WORKS Official BLOG

A4 WORKS オフィシャルブログ

開発全般

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

投稿日:2014年10月29日 更新日:

すごく便利なのですが、意外と知られていない感じがする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

-開発全般
-, ,

執筆者:

関連記事

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

先日macのターミナルからコマンド操作をしようとしたら以下の様なメッセージが表示されコマンドが実行できなくなりました。 Agreeing to the Xcode/iOS license requir …

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

データ構造について、アプリ運用時にむけて、負荷対策や利便性向上にむけてという3つの構成でまとめられています。 Qiita:アプリエンジニアから見てAPI設計において気をつけてもらえるとうれしいこと A …

no image

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

クラス名や変数名で悩むことや、誰かが作ったコードで意図が分からない場合などよくある話な訳ですが、良記事なのでシェアさせていただきます。 クラスの命名のアンチパターン http://qiita.com/ …