iPhoneだけでWeb アプリの動作がおかしいときのデバック環境

rectangle_large_type_2_47e47e82499be268d30e2d4624842eec.png

先日React + Firebaseで簡単なWebアプリを開発していたのだが、なぜかiPhoneのみでバグがでてしまうという苦しい状態が続いていた。遊びがてらでHeadmap Calendarを追加したのだが、Headmap Calenderがうまく動かないという状態であったのです

https://alis-programming-event.firebaseapp.com/

開発環境

開発ではGoogle Chromeで動作確認を行いDeployを行っていたのだがDeployしてiPhoneで確認してみたらちゃんとうごいていない。

iPhoneでSafariではなくChromeを使って動作確認してみても同様にうごかない。Safari依存ではなくiOS依存?結構困ってしまった。

AndroidやPCでみるとなんにも問題がないのです。結構こまってしまいました。だいたいiPhoneのSafariにはConsoleはないのだからデバックの手法がかぎられてしまう。

なんとかならないかいろいろやってみたらバグがPCで再現できました。

その方法は...

MACのSafariの開発モードを使用する

MACのSafariのSafari -> 環境設定 ->詳細で「メニューバーに”開発”を表示する」の最下部にあるチェックボックスをオンにすると開発モードが使えるようになります。

スクリーンショット 2020-02-23 14.49.31.png

これで開発がバーに表示されます

スクリーンショット 2020-02-23 14.52.55.png

Webインスペクターを表示を選択するとGoogle Chromeで用意されているのと類似の開発者用の機能が開きます。最初はもしかしたら下部にでてくるかもしれませんが、表示の仕方のボタン[][]みたいなのをおせば右に移動できるばすです

スクリーンショット 2020-02-23 14.53.37.png

これで問題を追求するツールを得ることができました

直面したバグは、少し寝かして本日解決に至りました。iPhoneでの日付の扱い方に起因するバグのようでした。iPhoneにバグがあるというわけではなく、データの扱い方の違いなのかもしれませんが、やるせなかったです。

ちなみにレスポンシブモードというものがあり、開発のメニューから選択するとデザインのチェックがとても効率的に行えます。Xcodeのシュミレータみたいで便利ですね。

スクリーンショット 2020-02-23 15.05.36.png

まとめ

iPhoneだけでうまくいかない。そういうときはSafaliの開発モードを活用しましょう。機種依存はWebアプリでも起こりうるようです。フロントエンドも奥が深いですね。

Originally published at note.com
ツイッターでシェア
みんなに共有、忘れないようにメモ

はるか先生🍊クリプト界隈に漂う癒し

仮想通貨とブロックチェーンの最新技術ビジネス/dAppsとProtocol周りが得意/各メディアにブロックチェーンの技術関連の寄稿も積極的にやってます

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!
ボードとは?

関連記事

コメント