2014年6月5日 3:09 PM  カテゴリー: web制作, ソフト・便利ツール

Webインスペクタとは。

iOS safariの開発者ツールです。下記画像のようにソースコードが丸見えで、Mac上でソースコードを簡易編集した部分もリアルタイムに反映されて行くため非常に便利です。コーダーやWEBデザイナーなどの制作者さんなら既にご存知かと思いますが非常に便利なので使用方法などを紹介します。

pc2

必要なアイテム

  • Mac
  • iphone
  • Lightningケーブル

iphone側の設定

  1. IMG_3729

    設定 > Safari

  2. IMG_3730

    Safari > 詳細

  3. IMG_3731

    詳細 > WebインスペクタをONに。

Mac側の設定

  1. pc1

    Safariを起動 > 開発 > iphone名 > iOS safariに起動中のサイト名を選択

  2. pc2

    これだけでソースコードを表示してくれます。

  3. IMG_3732

    iOSSafariの表示はこんな感じ。後はMac上のソースコードを改変するとリアルタイムにiOS safariの表示も動きます。私はChrome使用者で要素の検証を多用するのでこういうデバッグツールは慣れていて好きです。仮想ブラウザだとどうしても端末に表示されたときと変わってきてしまいますからね。知らなかった方は是非お試しください。

https://developer.apple.com/jp/safari/tools/

ABOUT

仕事と子育てを楽しむパパです。 趣味は漫画、映画、海外ドラマ、波乗り、スノボ、カメラ。 最近いけてないけど旅行も大好き。仕事はweb以外にも企業向け技術教育事業、投資、ディレクション、アパレル、写真、店舗プロデュースなどなどなんでもこなします。

Twitter