スマホでもWeb検証ツールを使ってみる

Date:

Share post:

Web開発では度々お世話になるデベロッパーツール。(Chrome右クリックで出てくる検証のアレです)実はiOSのSafariでも検証ツールが使えるって知っていましたか?

用意するのはiOSとMacのSafari、USBケーブル。これだけで、iOS上で実行しているWebページを、PC上で検証することができるんです。

iOS Safari実機検証のやりかた

iOS Safariで検証ツールを使うには、macOSが必要です。

iPhone/iPadとMacをUSBで接続します

【iOS】設定アプリ → Safari → 詳細 → Webインスペクタを オン に

【Mac】Safari.app → 環境設定 → 詳細 → メニューバーに”開発”メニューを表示 をオンに

MacのSafariのメニューバーに開発の項目が追加されていたら準備OKです!

【iOS】Safariで検証したいページを開く

【Mac】Safari.app → 開発 → デバイスを選ぶ → ページを選ぶ

これでSafariのWebインスペクタが開いて、Chomeのデベロッパーツールと同じようにDOMやスタイルの確認書き換え、ネットワークのログの確認などができます。

とても簡単で便利なので、ぜひ使ってみてください。

Androidの方は…
AndroidのChromeでも、PCのChromeから同じ用にUSB経由で検証ツールを使う方法があります。Googleさんが紹介してくれているのでこちらをどうぞ↓
Android 端末のリモート デバッグを行う
https://developers.google.com/web/tools/chrome-devtools/remote-debugging?hl=ja

たろう
たろう
フロントエンドエンジニア。

Related articles

EC-CUBE 4系のプラグイン開発について その...

前回、プラグインを一旦有効化させて管理...

EC-CUBE 4系のプラグイン開発について その...

以前から作成したいと考えていたのですが...

Laravel Filamentを使用した管理画面...

前回Breezeをインストールしたこと...

Laravel Filamentを使用した管理画面...

前回、filamentでのリソース作成...