iPhoneだけでWeb アプリの動作がおかしいときのデバック環境
先日React + Firebaseで簡単なWebアプリを開発していたのだが、なぜかiPhoneのみでバグがでてしまうという苦しい状態が続いていた
開発ではGoogle Chromeで動作確認を行いDeployを行っていたのだがDeployしてiPhoneで確認してみたらちゃんとうごいていない。
iPhoneでSafariではなくChromeを使って動作確認してみても同様にうごかない。Safari依存ではなくiOS依存?結構困ってしまった。
AndroidやPCでみるとなんにも問題がないのです。結構こまってしまいました。だいたいiPhoneのSafariにはConsoleはないのだからデバックの手法がかぎられてしまう。
なんとかならないかいろいろやってみたらバグがPCで再現できました。その方法は
MACのSafariの開発モードを使用する
MACのSafariのSafari -> 環境設定 ->詳細で「メニューバーに”開発”を表示する」の最下部にあるチェックボックスをオンにすると開発モードが使えるようになります。
これで開発がバーに表示されます
Webインスペクターを表示を選択するとGoogle Chromeで用意されているのと類似の開発者用の機能が開きます。最初はもしかしたら下部にでてくるかもしれませんが、表示の仕方のボタン[][]みたいなのをおせば右に移動できるばすです
これで問題を追求するツールを得ることができました。
僕の直面したバグは、少し寝かして本日解決に至りました。iPhoneでの日付の扱い方に起因するバグのようでした。iPhoneにバグがあるというわけではなく、データの扱い方の違いなのかもしれませんが、やるせなかったです。
ちなみにレスポンシブモードというものがあり、開発のメニューから選択するとデザインのチェックがとても効率的に行えます。Xcodeのシュミレータみたいで便利ですね。
まとめ
iPhoneだけでうまくいかない。そういうときはSafaliの開発モードを活用しましょう。機種依存はWebアプリでも起こりうるようです。フロントエンドも奥が深いですね。
この記事が気に入ったらサポートをしてみませんか?