あなたのウェブサイトが正しく機能することをどうやって確認しますか？

あなたはあなたのウェブサイトをオンラインで公開しましたか？ 素晴らしい！ しかし、あなたはそれが適切に動作していると思いますか？

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

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

アクティブラーニング

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

より深く掘り下げる

ブラウザでテストする

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

Uh-oh, where's the image?

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

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

HTTP ステータス

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

 200: OK

あなたが求めるリソースが配信されました。

301: Moved permanently

The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.

304: Not modified

The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.

403: Forbidden

You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).

404: Not found

Self-explanatory. We'll discuss how to solve this below.

500: Internal server error

Something went wrong on the server. For instance, maybe the server-side language (PHP, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.

503: Service unavailable

Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

Fixing the 404

So what went wrong?

At first glance, the image we asked for seems to be in the right place... but the Network tool reported a "404". It turns out that we made a typo in our HTML code: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

Save, push to the server, and reload the page in your browser:

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

• 200 for / and for unicorn_pic.png means that we succeeded in reloading the page and the image.
• 304 for basic.css means that this file has not changed since the last request, so the browser can use the file in its cache rather than receiving a fresh copy.

So we fixed the error and learned a few HTTP statuses along the way!

Frequent errors

The most frequent errors that we find are these:

Typos in the address

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

The address cannot be found. Indeed.

404 errors

Many times the error just results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

JavaScript errors

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading but you will feel something went wrong.

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

その他の事項を確認する

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

How's the performance?

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a CDN. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

Is the server responsive enough?

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

$ 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

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

簡単なチェックリスト

• Check for 404s
• Make sure all webpages are behaving as you expect
• Check your website in several browsers to make sure it renders consistently

次のステップ

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

• Since people can come to your website from all over the world, you should consider making it accessible to everybody.
• Is the design of your website a bit too rough? It's time to learn more about CSS.