Web制作を仕事にしていると、日々のちょっとした気づきが後々の作業効率に大きく影響することがあります。
今回はそんな小さなトラブルとその解決法を、自分用の備忘録も兼ねてご紹介します。
サイト分析中、デベロッパーツールを開くとエラーが発生？
「1日1サイト分析」を自分の勉強習慣として継続しているのですが、その中で少し不思議なサイトに出会いました。
Chromeのデベロッパーツールを開いた瞬間に、そのサイトがネットワークエラーになってしまうんです。
「もしかして、コード上で情報取得をブロックしてるのかも？」と思い、ChatGPTにもコード確認してもらったのですが、そういった記述は見当たらず…。
原因がわからず悩んでいたところ、意外なところで解決できました。
解決方法：Networkの設定を「No throttling」に
エラーの原因はなんと、Chromeデベロッパーツールの「Network」設定でした。
手順は以下の通りです：
- デベロッパーツールを開く
- 上部の「Network」タブを選択
- 上部バーのネットワークスピード設定を確認
- 「No throttling」に変更！
私の場合、初期設定がなぜか「Offline」になっていたようで、そのせいでサイトが正常に読み込めていなかったようです。
今後の対策
自分では意識して設定を変えたつもりがなくても、何かの拍子に変更されてしまっていることがあります。
今後も実装や検証の際に「あれ？」と思ったら、まずはこの設定を見直すのがおすすめです。
設定を変更する前に、「元は何の設定だったか」をメモしておくと、元に戻したくなったときにも安心です。
よくある質問
Q. デベロッパーツールを閉じるとサイトが表示されるのはなぜ？
スロットリング（通信速度の制限）は、デベロッパーツールを開いている間だけ適用されるためです。「Offline」に設定されていると、ツールを開いた瞬間だけ通信が遮断され、閉じると元に戻ります。サイト側がブロックしているわけではありません。
Q. 勝手に「Offline」になることはある？
あります。オフライン動作の検証などで一度切り替えると、その設定が保持されたままになります。私も意識せず変えてしまっていました。
Q. Networkタブ以外に確認すべき設定は？
「Disable cache」にチェックが入っていると、キャッシュを使わず毎回読み込むため、表示が遅くなることがあります。挙動がおかしいと感じたら、あわせて確認してみてください。
まとめ
今回は、
- デベロッパーツールを開くとネットワークエラーになる現象
- 原因は「Network」タブの設定だった
- 「No throttling」にすることで正常に動作した
という内容を紹介しました。
ちょっとしたことですが、同じように困っている方のヒントになればうれしいです！
