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

コンソールの概要

Kayce Basques

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

ログに記録されたメッセージを表示する

ウェブ開発者は多くの場合、JavaScript が正しく機能していることを確かめるためにコンソールにメッセージを記録します。あります。メッセージをログに記録するには、console.log('Hello, Console!') のような式を使用できます。ブラウザは 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 つあります。

コードが正しい順序で実行されるようにする。
特定の時点の変数の値を検査する。

実際にロギングを体験するには、メッセージロギングを使ってみるをご覧ください。コンソール API リファレンスでは、console メソッドの全リストを参照できます。両者の主な違いは、メソッドが、ロギングするデータをどのように表示するかということです。

JavaScript の実行

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

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

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

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

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

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

JavaScript を実行すれば、ページを操作する必要はありません。コンソールを使用してページと関係のない新しいコードが表示されますたとえば、組み込みの Google Kubernetes Engine JavaScript 配列メソッド map() をテストし、コンソールは関数を試すことができます

JavaScript の実行を開始するを参照して、JavaScript を実際に実行してみてください。できます。