Web サイトが正しく機能することをどうやって確認しますか?

この記事では、Webサイトのさまざまなトラブルシューティングの手順と、これらの問題を解決するための基本的な操作について説明します。

前提条件: Web サーバにファイルをアップロードする方法を知る必要があります。
目標: 自身の Web サイトで実行できるいくつかの基本的な問題を診断して解決する方法を学びます。

自身の Web サイトをオンラインで公開しましたか? 素晴らしい! ただ、それは適切に動作しているでしょうか?

別の場所にある Web サーバ は、ローカル Web サーバとはまったく異なった動作をすることが多いため、オンラインになったら Web サイトをテストすることをお勧めします。画像が表示されない、ページが読み込まれない、または読み込みが遅くなるなど、多くの問題が発生するのに驚くかもしれません。ほとんどの場合、大したことではなく、簡単な間違いや Web ホスティング設定の問題です。

これらの問題を診断して解決する方法を見てみましょう。

アクティブラーニング

アクティブラーニングはまだありません。 Please, consider contributing.

より深く掘り下げる

ブラウザでテストする

Web サイトが正しく機能しているかどうかを知りたければ、まずブラウザを起動し、テストしたいページに移動します。

ええと、そのイメージはどこですか?

Let's look at our personal website, http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

個人的な Web サイト http://demozilla.examplehostingprovider.net/ を見てみましょう。予想していた画像ではありません。

Oops, the ‘unicorn’ image is missing

Firefox のネットワークツール (ツールWeb 開発者ネットワーク) を開き、ページをリロードします。

The image has a 404 error

一番下に「404」という問題があります。"404" は "リソースが見つかりません" という意味です。そのため、画像が表示されませんでした。

HTTP ステータス

サーバは、リクエストを受信するたびにステータスメッセージで応答します。最も一般的なステータスは次のとおりです。

200: OK
求めているリソースが配信されました。
301: Moved permanently
リソースは新しい場所に移動しました。あなたのブラウザでこれをあまり見ないでしょう、しかし検索エンジンがインデックスを更新するのにこの情報をたくさん使うので "301" について知るのは良いことです。
304: Not modified
最後にファイルをリクエストしてからファイルが変更されていないため、ブラウザはキャッシュからバージョンを表示できるので、応答時間が短縮され、帯域幅がより効率的に使用されます。
403: Forbidden
そのリソースを表示することを許可されていません。通常それは設定ミス (例えばあなたのホスティングプロバイダがディレクトリへのアクセス権を与えるのを忘れた) と関係があります。
404: Not found
一目瞭然です。これを解決する方法を以下で説明します。
500: Internal server error
サーバで何か問題が発生しました。たとえば、サーバサイドの言語 (PHP、.Net など) が機能しなくなった、または Web サーバ自体に構成上の問題がある可能性があります。通常、ホスティングプロバイダのサポートチームに頼るのが最善です。
503: Service unavailable
通常、短期間のシステム過負荷が原因です。サーバに何らかの問題があります。しばらくしてからもう一度試してください。

初心者が私たちの (単純な) Web サイトをチェックするとき、私たちは200、304、403、そして404を最もよく扱うでしょう。

404 を修正する

では何が悪かったのでしょうか?

Le list of images in our project

一見したところ、私たちが求める画像は正しい場所にあるようです...しかしネットワークツールは "404" を報告しました。 HTML コードに unicorn_pic.png ではなく unicorn_pics.png という入力ミスをしたことがわかりました。画像の src 属性を変更して、コードエディタのタイプミスを修正します。

Deleting the ‘s’

保存してサーバにプッシュし、ブラウザでページをリロードします。

The image loads corectly in the browser

There you go! Let's look at the HTTP statuses again:

そこに行きます!HTTP ステータスをもう一度見てみましょう:

  • /unicorn_pic.png200 の場合は、ページと画像の再読み込みに成功したことを意味します。
  • basic.css304  は、このファイルが最後のリクエスト以降変更されていないことを意味します。したがって、ブラウザは新しいコピーを受信するのではなく、キャッシュ内のファイルを使用できます。

さて、エラーを修正し、途中でいくつかの HTTP ステータスを学習しました。

よくあるエラー

最もよく見かけるエラーはこれらです:

アドレスのタイプミス

http://demozilla.examplehostingprovider.net/ と入力したいのですが、入力が速すぎて「l」を忘れていました。

Address unreachable

アドレスが見つかりません。確かに。

404 エラー

多くの場合、エラーは単にタイプミスが原因ですが、リソースのアップロードを忘れたか、アップロード中にネットワーク接続が切断された可能性もあります。まずファイルパスの綴りと正確さを確認し、それでも問題が解決しない場合は、ファイルをもう一度アップロードしてください。おそらく問題は解決するでしょう。

JavaScript エラー

誰か (おそらくあなた) がそのページにスクリプトを追加する中で間違えました。これでページの読み込みが妨げられることはありませんが、問題が発生したと感じるでしょう。

コンソールを開き (ツールWeb 開発者Web コンソール)、ページをリロードします。

A Javascript error is shown in the Console

この例では、エラーが何かを (非常に明確に) 学び、それを修正することができます (別の一連の記事で JavaScript について説明します)。

その他の事項を確認する

Web サイトが正しく機能していることを確認する簡単な方法、および発生する可能性がある最も一般的なエラーとそれらの修正方法を示しました。ページがこれらの基準を満たしているかどうかをテストすることもできます。

パフォーマンスはどうですか?

ページの読み込みは十分速いですか? WebPagetest.org のようなリソースや YSlow のようなブラウザアドオンをしようすることで、いくつか興味深いことが分かります。

Yslow diagnostics

グレードは A から F までです。私たちのページはごくわずかで、ほとんどの基準を満たしています。しかし、CDN を使った方が良いでしょう。1つの画像だけを配信する場合はそれほど重要ではありませんが、広帯域幅の Web サイトで何千もの画像を配信する場合は重要になります。

サーバーは十分に応答しますか?

ping は指定したドメイン名をテストし、サーバが応答しているかどうかを知らせる便利なシェルツールです。

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
^C
--- mozilla.org ping statistics ---
4 packets transmitted, 4 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms

便利なキーボードショートカット、すなわち Ctrl+C を覚えておいてください。Ctrl+C はランタイムに「割り込み」信号を送り、停止するように伝えます。ランタイムを停止しないと、ping は サーバに無期限に ping を実行します。

簡単なチェックリスト

  • 404 をチェックします
  • すべての Web ページが期待通りに動作していることを確認します
  • それが一貫してレンダリングすることを確認するためにいくつかのブラウザで Web サイトをチェックしてください

次のステップ

おめでとうございます、Web サイトは誰もが訪れることができるようになっています。それは大きな成果です。これで、さまざまなテーマに深く掘り下げていくことができます。

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, mdnwebdocs-bot
最終更新者: silverskyvicto,