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/ を見てみましょう。予想していた画像ではありません。

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

一番下に「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 を修正する

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

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

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

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

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

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

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

よくあるエラー

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

アドレスのタイプミス

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

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

404 エラー

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

JavaScript エラー

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

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

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

その他の事項を確認する

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

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

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

グレードは 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 サイトは誰もが訪れることができるようになっています。それは大きな成果です。これで、さまざまなテーマに深く掘り下げていくことができます。

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