【豆知識】スマホの実機からデベロッパツールを使う方法

Chromeだとうまく表示されてるのに、実際にスマホだと上手く表示されていないことってよくありますよね!

今回はそんなお悩みを解決する、スマホ実機からデベロッパツールを使う方法を解説します。

※画像用いたらもっとわかりすいと思うのですが、これは記録ようなもんで、すみません。

もっとわかりやすいページはこっち→https://dezanari.com/iphone-developer-tools/

スマホですること

1iPhoneの設定からSafari→詳細→webインスペクタをオンにする

2デベロッパツールを使いたいページを開いておく

スマホですることは以上です

PCですること

1まず、PCとスマホをUSB変換ハブなどを使って接続してください

※すみません多分macでしかできない

2macのsafariを開いて、上部タブの「開発」をクリック

3ユーザーエージェントの下にある「(ユーザー名)のiphone」をホバーすると先ほど、iphoneで開いたページのサイトURLが表示されると思うので、そこをクリック→デベロッパーツール使用可能!

以上です!

簡単すぎでしょ!

まとめ

今回のは多分iphoneとmacの組み合わせなら絶対できます。僕の環境がそれなので他を検証できないのがあれですが、、

でも、これから詰まった時、この記事が役立つ人が多ければよしとおもいます!
ありがとうございました!

この記事を書いた人