ブラウザに最初から入っているツールを開いて、ページを調べ、試し、原因を突き止めましょう。
このレッスンを Kodokon で開くあなたのブラウザには、すでにインストール済みで無料の、そしてほとんどの人が一生開くことのない、本格的な作業場が隠れています。これを開発者ツール、縮めてdevtoolsと呼びます。開くにはF12キーを押すか、ページのどこかを右クリックして「検証」を選びます。MacでのショートカットはCmd + Option + Iです。すると、ウィンドウの横または下にパネルが開き、いくつかのタブが並びます。
最初のタブは、ブラウザによってElementsまたはインスペクターと呼ばれ、ブラウザのメモリ上にいま存在しているページのHTMLを表示します。行の上にマウスを乗せてみてください。対応する部分がページ上で光ります。テキストをダブルクリックすれば、書き換えて変化を即座に見ることができます。他人のページを分解してみることこそ、ページの組み立て方を理解する最良の方法です。
Consoleタブは、あなたがいちばん長く過ごすことになるタブです。何かが壊れると赤いエラーメッセージを表示し、さらに、あなたが直接打ち込んだ命令も受け付けて、開いているページの文脈でそれを実行します。どんなサイトでもいいので試してみましょう。1行打ち込み、Enterを押して、何が起きるか観察してください。
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"Networkタブは、これまでのレッスンで学んだことを目に見えるようにしてくれます。開いてから、F5でページを再読み込みしてください。リクエストが1つずつ行になって現れ、アドレス、メソッド、ステータスコード、サイズ、かかった時間が並びます。赤い行は失敗したリクエストの印です。たとえば、画像が表示されないのは 404 が返っているからだ、と気づくのはここです。