ウェブサイトが正しく動作することをどうやって確認する？

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

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

自身のウェブサイトをオンラインで公開しましたか？素晴らしい！ただ、それは正しく動作しているでしょうか？

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

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

アクティブラーニング

利用可能なアクティブラーニングはまだありません。ぜひ協力をご検討ください。

より深く掘り下げる

ブラウザーでテストする

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

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

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

Oops, the 'unicorn' image is missing

Firefox のネットワークツール (ツール ➤ ウェブ開発者 ➤ ネットワーク) を開き、ページを再読み込みします。

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 など) が機能しなくなった、またはウェブサーバー自体に構成上の問題がある可能性があります。通常、ホスティングプロバイダーのサポートチームに頼るのが最善です。
503: Service unavailable: 通常、短期間のシステム過負荷が原因です。サーバーに何らかの問題があります。しばらくしてからもう一度試してください。

初心者が（簡単な）ウェブサイトをチェックする場合、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 correctly in the browser

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

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

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

よくあるエラー

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

アドレスのタイプミス

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

Address unreachable

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

404 エラー

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

JavaScript エラー

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

コンソールを開き (ツール ➤ ウェブ開発者 ➤ ウェブコンソール)、ページを再読み込みします。

A Javascript error is shown in the Console

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

その他の事項を確認する

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

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

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

Yslow diagnostics

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

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

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

次のステップ

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

人々は世界中からあなたのウェブサイトに来ることができるので、あなたはそれを誰にでもアクセス可能にすることを考慮すべきです。
ウェブサイトのデザインは少し荒すぎますか？ CSS についてもっと学ぶ時が来ました。