コンソールで JavaScript を実行する

Kayce Basques
Kayce Basques
X GitHub

このインタラクティブなチュートリアルでは、Chrome DevTools コンソールで JavaScript を実行する方法について説明します。コンソールにメッセージを記録する方法については、 メッセージのロギングを始めるをご覧ください。JavaScript コードを一時停止して 1 行ずつステップ実行する方法については、JavaScript のデバッグを始める をご覧ください。

コンソール。

図 1 。コンソール 。

概要

コンソール は REPL（Read, Evaluate, Print, Loop）です。入力された JavaScript を読み取り、コードを評価して、 式の結果を出力し、最初のステップに戻ります。

DevTools を設定する

このチュートリアルでは、デモを開いてすべてのワークフローを自分で試せるように設計されています。実際に操作することで、ワークフローを後で思い出しやすくなります。

  1. Command+Option+J キー（Mac）または Ctrl+Shift+J キー（Windows、Linux、ChromeOS）を押して、このページで コンソール を開きます。

    左側にチュートリアル、右側に DevTools が表示されています。

    図 2 。左側にこのチュートリアル、右側に DevTools。

ページの JavaScript または DOM を表示して変更する

ページをビルドまたはデバッグするときに、コンソール でステートメントを実行して、ページの表示方法や動作を変更すると便利なことがよくあります。

  1. 下のボタンのテキストに注目してください。

  2. document.getElementById('hello').textContent = 'Hello, Console!' を コンソール に入力し、 Enter キーを押して式を評価します。ボタン内のテキストがどのように変化するかを確認してください。

    上記の式を評価した後のコンソールの様子。

    図 3 。上記の式を評価した後のコンソールの様子。

    評価したコードの下に"Hello, Console!"が表示されます。REPL の 4 つのステップ（読み取り、評価、出力、ループ）を思い出してください。コードを評価すると、REPL は式の結果を出力します。 したがって、"Hello, Console!" は document.getElementById('hello').textContent = 'Hello, Console!' の評価結果である必要があります。

ページに関係のない任意の JavaScript を実行する

コードをテストしたり、使い慣れていない新しい JavaScript 機能を使ってみたりできるコード プレイグラウンドが必要になることがあります。コンソールは、このような実験に最適な場所です。

  1. コンソールに「5 + 15」と入力します。式の評価に時間がかかりすぎない限り、式の直下に結果 20 が表示されます。
  2. Enter キーを押して式を評価します。コンソールに、コードの下に式の結果が出力されます。図 4 は、この式を評価した後のコンソールの様子を示しています。

  3. コンソール に次のコードを入力します。コピーして貼り付けるのではなく、1 文字ずつ入力してみてください。

    function add(a, b=20) {
  return a + b;
}

  4. 次に、定義した関数を呼び出します。

    add(25);

    上記の式を評価した後のコンソールの様子。

    図 4 。上記の式を評価した後のコンソールの様子。

    add(25) は 45 に評価されます。これは、2 番目の引数なしで add 関数が呼び出されると、 b がデフォルトで 20 になるためです。

関数が返されるまで、このコンソール セッションでコードを実行することはできません。 時間がかかりすぎる場合は、タスク マネージャー を使用して時間のかかる計算をキャンセルできます。ただし、現在のページが失敗し、入力したデータがすべて失われます。

次のステップ

コンソールで JavaScript を実行する関連機能について詳しくは、JavaScript を実行するをご覧ください。

DevTools では、スクリプトの実行中に一時停止できます。一時停止中は、コンソール を使用して、その時点のページの window または DOM を表示して変更できます。これにより、強力なデバッグ ワークフローが実現します。インタラクティブな チュートリアルについては、JavaScript のデバッグを始めるをご覧ください。

コンソール では、一連のフォーマット指定子もサポートされています。コンソール メッセージのフォーマットとスタイルの設定方法については、コンソールでメッセージのフォーマットとスタイルを設定するをご覧ください。

また、コンソール には、ページとのやり取りを簡単にする便利な関数が用意されています。 次に例を示します。

  • document.querySelector() と入力して要素を選択するのではなく、$() と入力できます。この構文は jQuery にインスパイアされていますが、実際には jQuery ではありません。document.querySelector() のエイリアスです。
  • debug(function) は、その関数の最初の行にブレークポイントを設定します。
  • keys(object) は、指定されたオブジェクトのキーを含む配列を返します。

便利な関数について詳しくは、コンソール ユーティリティ API リファレンスをご覧ください。