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