このページは Cloud Translation API によって翻訳されました。

コンソールの概要

Kayce Basques

Twitter GitHub Glitch

このページでは、Chrome DevTools Console を使用してウェブページの開発を容易にする方法について説明します。コンソールでの主な用途は、ログに記録されたメッセージの表示と JavaScript の実行の 2 つです。

ログに記録されたメッセージの表示

ウェブデベロッパーは、JavaScript が期待どおりに動作していることを確認するために、コンソールにログメッセージを記録していることがよくあります。メッセージをログに記録するには、console.log('Hello, Console!') のような式を JavaScript に挿入します。ブラウザは、JavaScript を実行してそのような式を見つけると、メッセージをコンソールにログ出力するべきだと判断します。たとえば、次のようなページの HTML と JavaScript を記述しているとします。

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

図 1 は、ページを読み込んで 3 秒待機した後のコンソールを示しています。ブラウザがメッセージをログに記録した原因となっているコード行を特定してみてください。

コンソールパネル。

図 1. コンソールパネル。

ウェブデベロッパーがログメッセージを記録する一般的な理由は 2 つあります。

コードが正しい順序で実行されていることを確認する。
特定の時点での変数の値を検査する。

ロギングの実践的な経験を積むには、メッセージのロギングを開始するをご覧ください。console メソッドの一覧については、Console API リファレンスをご覧ください。各メソッドの主な違いは、ロギングするデータの表示方法です。

JavaScript の実行

コンソールも REPL です。コンソールで JavaScript を実行して、検査対象のページを操作できます。たとえば、図 2 では DevTools のホームページの横にコンソールが表示されています。図 3 では、コンソールを使用してページのタイトルを変更した後も同じページを示しています。

DevTools のホームページの横にある [Console] パネル。

図 2. DevTools のホームページの横にある [Console] パネル。

コンソールを使用してページのタイトルを変更する。

図 3. コンソールを使用してページのタイトルを変更する。

コンソールからページの window への完全アクセス権があるため、コンソールからページを変更できます。DevTools には、ページの検査を容易にするいくつかの便利な関数があります。たとえば、JavaScript に hideModal という関数が含まれているとします。debug(hideModal) を実行すると、次回呼び出されたときに hideModal の 1 行目のコードが一時停止します。ユーティリティ関数の全一覧については、コンソールユーティリティ API リファレンスをご覧ください。

JavaScript を実行すると、ページを操作する必要はありません。コンソールを使用して、ページに関連しない新しいコードを試すことができます。たとえば、組み込みの JavaScript の Array メソッド map() について学習し、これを試してみるとします。コンソールでは、この機能を試すことをおすすめします。

コンソールで JavaScript を実行する方法を実際に体験するには、JavaScript の実行を開始するをご覧ください。