iOS,Androidのブラウザデバッグ

この記事はMojirageアドベントカレンダーの24日目の記事です。
matatsuna.hatenablog.com

無茶なことをしていると環境ごとにブラウザの挙動が違うことがしばしばあります
スマホで開発者モードやコンソールをみる方法を紹介します
手元にMac,iOS端末とAndroid端末があることを前提としています

iOSブラウザでバッグ

環境

やり方

  • iOSの設定からsafari→詳細→Webインスペクタをon
  • ケーブルで繋いで、Mac Safariを開いて環境設定→詳細→開発メニューをon
  • 開発→iOS端末名と見たいタブをクリック

これだけで要素を掴んだりコンソールを打ち込んだりとできます
一応頑張ればwindows,iOSでも出来るようですけど、環境揃えるのが大変で動かないといったこともありました

Androidブラウザでバッグ

環境

やり方

  • Androidの設定で開発者向けオプションをonにしてUSBデバックをonにする
  • AndroidとPCをつなぎ、Chrome
chrome://inspect/#devices

にアクセス
gyazo.com
するとインスペクターを表示出来ます