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

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

Kayce Basques

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

コンソール。

図 1. コンソール。

概要

コンソールは REPL です。これは、読み取り、評価、出力、ループの略です。読み取られたのは JavaScript を入力すると、コードが評価され、結果が出力されます。 expression を実行し、最初のステップにループ戻します。

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 は、Google Cloud コンソールがこの式を評価する必要があります。
コンソールに次のコードを入力します。1 文字ずつ入力する代わりに、コピー&ペーストよりも効率的です
```
function add(a, b=20) {
  return a + b;
}
```
b=20 に精通していない場合は、関数の引数のデフォルト値を定義するをご覧ください。説明します。
次に、先ほど定義した関数を呼び出します。
```
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 リファレンスをご覧ください。