【小ネタ】実機で開発ツール使う


  • 実機はiPhoneを指しています
  • ブラウザはsafariです
  • Macユーザー向けのお話になります

実機あるある

さっそくですが、こんなことありません?

  • iPhonesafariでサイト見たらレイアウトが想定していたものと違っていた
  • PCのエミュレートでは起きていないので原因が調べられない

一体何がどうなっているんだ…起きていることの詳細知りたい…
そんな時は、safariの開発ツールを使うと便利です。

safariの開発ツールの使い方

実機でも開発ツール使えるんです!本当にありがたい。
使い方はこんな感じです。

  1. MaciPhoneをケーブルで繋いでください
  2. Macsafariを開いて「開発」をクリック。さっき繋いだiPhoneのデバイス名が表示されカーソル合わせたらiPhonesafariで閲覧しているURLが表示されます。
  3. 開発ツールでみたいURLを選択してください。するとこんな感じで開発ツールが出てきますので、調べたいところを選んで何が起きているか調査できます。

このブログよりもはるかに丁寧かつ分かりやすく書かれている記事ありましたので、ちょっと何言ってるか分からないとか、上記試したけどできなかった方はこちらをご覧ください。 kakke.site