このインタラクティブなチュートリアルでは、Chrome DevTools コンソールで JavaScript を実行する方法について説明します。コンソールにメッセージを記録する方法については、メッセージ ロギングを使ってみるをご覧ください。JavaScript コードを一時停止して 1 行ずつステップ実行する方法については、JavaScript のデバッグを開始するをご覧ください。
図 1. コンソール。
概要
コンソールは REPL です。これは、読み取り、評価、出力、ループの略です。ここに入力した JavaScript を読み取り、コードを評価して、式の結果を出力してから、最初の手順に戻ります。
DevTools の設定
このチュートリアルは、ユーザーがデモを開いてすべてのワークフローをご自身で試すことができるように設計されています。実際にやってみると、後でワークフローを思い出せる可能性が高くなります。
Command+Option+J(Mac)または Ctrl+Shift+J(Windows、Linux、ChromeOS)を押して、このページから直接コンソールを開きます。
図 2. このチュートリアルは左側、DevTools は右側にあります。
ページの JavaScript または DOM を表示、変更する
ページを作成またはデバッグする際、ページの外観や実行方法を変更するために、コンソールでステートメントを実行すると便利な場合があります。
下のボタンのテキストに注目してください。
コンソールで「
document.getElementById('hello').textContent = 'Hello, Console!'
」と入力し、Enter キーを押して式を評価します。ボタン内のテキストの変化に注目してください。図 3. 上記の式を評価した後のコンソールの表示。
評価したコードの下に
"Hello, Console!"
が表示されています。REPL の 4 つのステップ つまり読み取り、評価、出力、ループを思い出してくださいコードを評価した後、REPL によって式の結果が出力されます。そのため、"Hello, Console!"
はdocument.getElementById('hello').textContent = 'Hello, Console!'
の評価結果である必要があります。
ページに関係のない任意の JavaScript を実行する
コードをテストしたり、馴染みのない JavaScript の新機能を試したりできるコード プレイグラウンドが必要な場合もあります。このようなテストには、コンソールが最適です。
- コンソールで「
5 + 15
」と入力します。結果20
は式の下に表示されます(式の評価に時間がかかりすぎる場合を除きます)。 Enter
を押して、式を評価します。コンソールにより、コードの下に式の結果が出力されます。下の図 4 は、この式の評価後のコンソールの見え方を示しています。コンソールに次のコードを入力します。コピーして貼り付けるのではなく、 1 文字ずつ入力してみてください。
function add(a, b=20) { return a + b; }
b=20
構文に慣れていない場合は、関数引数のデフォルト値を定義するをご覧ください。次に、先ほど定義した関数を呼び出します。
add(25);
図 4. 上記の式を評価した後のコンソールの表示。
2 番目の引数なしで
add
関数が呼び出されると、b
はデフォルトで20
になるため、add(25)
は45
と評価されます。
関数が返されるまで、このコンソール セッションでコードを実行することはできません。 時間がかかりすぎる場合は、タスク マネージャーを使用して、時間のかかる計算をキャンセルできます。ただし、その場合、現在のページが失敗し、入力したすべてのデータが失われます。
次のステップ
コンソールでの JavaScript の実行に関連するその他の機能については、JavaScript を実行するをご覧ください。
DevTools では、スクリプトの実行を途中で一時停止できます。一時停止しても、コンソールを使用して、その時点でページの window
または DOM
を表示して変更できます。これにより、強力なデバッグ ワークフローを実現できます。インタラクティブなチュートリアルについては、JavaScript のデバッグを開始するをご覧ください。
コンソールでは、形式指定子のセットもサポートされています。コンソール メッセージの書式設定とスタイル設定を行うすべての方法については、コンソールでのメッセージの書式とスタイル設定をご覧ください。
これとは別に、コンソールには、ページを簡単に操作できるようにする一連の便利な関数もあります。次に例を示します。
document.querySelector()
を入力して要素を選択する代わりに、「$()
」と入力します。この構文は jQuery にヒントを得ていますが、実際には jQuery ではありません。これは単にdocument.querySelector()
のエイリアスです。debug(function)
は、関数の最初の行にブレークポイントを効果的に設定します。keys(object)
は、指定されたオブジェクトのキーを含む配列を返します。
すべての便利な関数については、コンソール ユーティリティ API リファレンスをご覧ください。