スマホでも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

画像検索の精度確認(4)

前回の投稿では、エンベディングの前処...

画像検索の精度確認(3)

過去の投稿を通して、TensorFl...

(ちょっとニッチな)FastAPI環境構築の巻(そ...

最近Tさんがすごい勢いで記事を書かれて...