![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
・iPhoneでデベロッパーツール使える?
こんな疑問にお答えします。
なぜかiPhoneの時だけレイアウトが崩れる。。
という問題は、コーディングしていると間違いなく訪れるものだと思います!
実はiPhoneでもデベロッパーツールを使って、スタイル変更の確認をすることが可能なんですよね。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
知っておくとかなり便利!!
ということで、この記事では「iPhoneのスマホでデベロッパーツールを使う方法」について解説していきます!
・iPhoneのスマホでデベロッパーツールを使う方法
目次
【裏技】iPhoneのスマホでデベロッパーツールを使う方法【Safari】
そんなiPhoneでデベロッパーツールを使う方法が、下記の手順↓
- iPhoneでWebインスペクタを有効に
- iPhoneとMacを接続
- Macにてデベロッパーツールを使う
順に解説していきます。
まずiPhone側の設定です。
Webインスペクタを有効にしましょう。
まず設定アプリから「Safari」へ↓
![](https://jito-site.com/wp-content/uploads/2023/01/32C1A8CF-3CBA-4203-B735-7CB8F350EC8E.jpeg)
次に一番下までスクロールして「詳細」をクリック↓
![](https://jito-site.com/wp-content/uploads/2023/01/591C761D-3BF4-4FEB-98C4-5B8C65455680.jpeg)
最後に「Webインスペクタ」をオンにしましょう↓
![](https://jito-site.com/wp-content/uploads/2023/01/0B69B945-E027-482F-A37E-A319404A219C.jpeg)
2つ目の手順が、iPhoneとMacを接続することです。
ようはケーブルを使って繋げるということ。
注意点としてLightningケーブルだけでは、Macと接続することができません。Mac側にさせませんからね。
そのためにUSB変換アダプタが必要です。
例えばこういうやつ↓
今後コーディングを仕事にしていく人は、1つぐらい持っておいても損はしません。
使う時がいつかきますからね。
iPhoneとMacが接続できたら、いよいよデベロッパーツールを使えるようになります。
まず大前提として、検証したいサイトをiPhone側のSafariで開いておきましょう。
そしたらMac側のSafariで「開発」⇒「ユーザー名」⇒「検証したいサイトのリンク」へとクリックしていきます。
![](https://jito-site.com/wp-content/uploads/2023/01/0281f27629aebd283b2c2a06776ba769.jpg)
すると下記画像のようになり、iPhone実機のデベロッパーツールを使用することができます!
![](https://jito-site.com/wp-content/uploads/2023/01/img_8077.jpg)
![](https://jito-site.com/wp-content/uploads/2023/01/9e8d29fc7a59b267ed71a23980777bc6.jpg)
(Macでは検証ツール、iPhoneではレイアウト画面が表示)
これでiPhoneでのレイアウト崩れを、検証ツールを使って対策することが可能に。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
めちゃくちゃ便利!
僕もでしたが最初「開発」というタブがメニューにないんだけど??
となった人がいるはず。。
が、安心してください。簡単に表示させれます。
➀:「Safari」⇒「環境設定」をクリック
![](https://jito-site.com/wp-content/uploads/2023/01/bcf331ee80de317f6537addf46abe464.jpg)
➁:「詳細」⇒「メニューバーに”開発”メニューを表示」をオンに
![](https://jito-site.com/wp-content/uploads/2023/01/cfc89c75a697fff9ef51b97b66bc0e04.jpg)
これでOk!開発のタブがメニューに表示されているはずです!
【裏技】iPhoneのスマホでデベロッパーツールを使う方法【Safari】:まとめ
- iPhoneでWebインスペクタを有効に
- iPhoneとMacを接続(USB変換アダプタが必要)
- Mac側のSafariで「開発」⇒「ユーザー名」⇒「検証したいサイトのリンク」をクリック
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
iPhone側のレイアウトが崩れたときに使えるので覚えておこう!