iOS safariのデバッグツール、webインスペクタが便利

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

• Mac
• iphone
• Lightningケーブル

1. 

   設定　＞　Safari

2. 

   Safari　＞　詳細

3. 

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

1. 

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

2. 

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

3. 

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