Webインスペクタとは。
必要なアイテム
- Mac
- iphone
- Lightningケーブル
iphone側の設定
-
設定 ＞ Safari
-
Safari ＞ 詳細
-
詳細 ＞ WebインスペクタをONに。
Mac側の設定
-
Safariを起動 ＞ 開発 ＞ iphone名 ＞ iOS safariに起動中のサイト名を選択
-
これだけでソースコードを表示してくれます。
-
iOSSafariの表示はこんな感じ。後はMac上のソースコードを改変するとリアルタイムにiOS safariの表示も動きます。私はChrome使用者で要素の検証を多用するのでこういうデバッグツールは慣れていて好きです。仮想ブラウザだとどうしても端末に表示されたときと変わってきてしまいますからね。知らなかった方は是非お試しください。
https://developer.apple.com/jp/safari/tools/
iOS safariの開発者ツールです。下記画像のようにソースコードが丸見えで、Mac上でソースコードを簡易編集した部分もリアルタイムに反映されて行くため非常に便利です。コーダーやWEBデザイナーなどの制作者さんなら既にご存知かと思いますが非常に便利なので使用方法などを紹介します。