Vueで作った画面がスマホで「Load failed」になるときの原因と実際の30秒でできるデバッグ手順

VueでSPAを作ってFirebase Hostingに置いたら、スマホでだけ「Load failed」が出る。「次へ」ボタンを押した後、ブラウザの「戻る」で戻って、もう一度「次へ」を押すと再現しやすい。

読者

どうやってこの現象デバッグすればいいの？

PCやAndroid Chromeでは起きないけど、Safariだけで起きるのは、こういう仕様があるから：

ごりら

・メモリ制限がキツい・Service Workerのキャッシュがシビア・「戻る」操作でページが再読み込まれないことがある・DOM内容やイベントが再バインドされない

スマホでコンソールを確認するのに便利なのが「Eruda」ってやつ。公式CDNを読み込めば、DevToolsみたいなヤツをスマホ内に表示できる。

読者

そのCDNってどこに追加すればいい？

例：

<script src="https://cdn.jsdelivr.net/npm/eruda" crossorigin="anonymous"></script>
<script>eruda.init();</script>

ごりら

これで、スマホで開くと画面下にグレーのボタンが出るよ

1. さっきのスクリプトを public/index.html に追加

2. Firebase Hosting にデプロイ

読者

普通の本番にそのまま入れても大丈夫？

3. スマホでURLを開くと、画面下にボタンが現れる

4. Console タブでログやエラーを確認

ごりら

本番に使わない場合は if(process.env.NODE_ENV === ‘development’) で分岐しよう

まとめ

「Load failed」や「Script error.」は、スマホのメモリ制限やバーフォーワードキャッシュの影響が大きい。VueでSPAを作る場合は、router-viewに key を付けるといった基本に加えて、Erudaでモバイル内で確認できるようにするのが効果的。

ごりら

スマホのエラーはPCのデバッグでは見れないことが多いから、Erudaは一番手っ取り早い手段だね