flamingo IDEでは問題なく動作していたのに、スマホからだと期待した動きにならない。
最適化サイトを作成すると、そのような不具合が出ることも多くあります。
ですが、その不具合はOS特有の問題であることも多く、
PCだけでは調査も対処法もわからない、という事態も少なくありません。
そんな時、スマホで見ているサイトを直接PCで確認をする方法があります。
それが、Safariの開発モードです。
1. iPhoneでSafariの設定画面を開き、Webインスペクタをオンにする
Safariの設定画面まで遷移し、画面下部の詳細をタップしてください。
すると、中に『Webインスペクタ』という項目がありますので、これをオンにします。
この設定を行うことで、PCと繋げた際にPCからiPhoneにアクセスできるようになります。
2. PCでSafariを起動し、設定から開発メニューをオンにする
Safariの設定画面、詳細の項目を開きます。
最下部に『開発メニューを表示する』という項目があるので、チェックを入れて下さい。
3. バグを調査したいページをiPhoneのSafariで開き、PCと接続する
接続はUSBケーブルで行ってください。
4. PCでSafariを起動し開発メニューを開く
上部に『開発』という項目が追加されているので、ここをクリックして開きます。
5. 繋いでいるiPhone端末をクリックし、デバッグしたいページを選ぶ
複数ウィンドウ開いている場合はそれらが全て表示されますので、
その中から該当のページを選び、クリックしてください。
なお、該当ページにマウスオーバーさせるとiPhoneではこのように表示されます。
6. Webインスペクタが起動される
上記手順を踏むとWebインスペクタが起動されます。
htmlソースだけでなく、ページ内からリンクされているjsファイルも検証することが可能です。
また、ソース内の要素をクリックすると、該当の箇所をiPhone上で確認することができます。
一度1〜2の設定を行っておけば、いざデバッグしたいという時にすぐ確認ができますので、
是非設定だけでも今のうちに行っておくことをお勧めします。