このページでは、Chrome DevTools Console を使用してウェブページの開発を容易にする方法について説明します。コンソールの主な用途には、ログに記録されたメッセージの表示と JavaScript の実行の 2 つがあります。
ログに記録されたメッセージを表示する
ウェブ デベロッパーは多くの場合、JavaScript が期待どおりに動作していることを確認するためにコンソールにメッセージを記録します。メッセージをログに記録するには、console.log('Hello, Console!')
などの式を JavaScript に挿入します。ブラウザで JavaScript が実行され、このような式が表示されると、ブラウザはメッセージを Console に記録することになっています。たとえば、ページの 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 は、コンソールを使用してページのタイトルを変更した後の同じページを示しています。
図 2. DevTools のホームページの横にある [Console] パネル
図 3. コンソールを使用してページのタイトルを変更する。
コンソールにはページの window
に対する完全アクセス権があるため、コンソールからページを変更できます。DevTools には、ページの検査を容易にする便利な関数がいくつかあります。たとえば、JavaScript に hideModal
という関数が含まれているとします。debug(hideModal)
を実行すると、次回呼び出されたときに hideModal
の最初の行でコードが一時停止します。ユーティリティ関数の全一覧については、コンソール ユーティリティ API リファレンスをご覧ください。
JavaScript を実行すれば、ページを操作する必要はありません。コンソールを使用して、ページに関係のない新しいコードを試すことができます。たとえば、組み込みの JavaScript 配列メソッド map()
について学んだので、それを使ってテストしたいとします。コンソールは
この機能を試すのに適しています
JavaScript の実行を開始するを参照して、コンソールで JavaScript を実行する演習を行います。