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

LINEで送る
Pocket

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/

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

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

コメントを残す

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

You may use these HTML tags and attributes:

<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="">