console オブジェクトとコンソール

コンソールオブジェクト

console オブジェクトは JavaScript のネイティブオブジェクトであり、Unix システムの標準出力 stdout や標準エラー stderr に似ており、さまざまな情報をコンソールに出力でき、また多くの便利な補助メソッドも提供します。。

「console」には 2 つの一般的な用途があります。

プログラムをデバッグし、Web ページのコードの実行時にエラーメッセージを表示します。
Web ページのコードを操作するためのコマンドラインインターフェイスを提供します。

「console」オブジェクトのブラウザ実装は、ブラウザに付属の開発ツールに含まれています。 Chromeブラウザの「開発者ツール」を例にすると、以下の3つの方法で開くことができます。

F12 キーまたは「Control + Shift + i」 (PC) / 「Command + Option + i」 (Mac) を押します。
ブラウザのメニューから「ツール/開発者ツール」を選択します。
ページ要素上で右クリックメニューを開き、[要素の検査] を選択します。

開発者ツールを開くと、上部に複数のパネルが表示されます。

要素: Web ページの HTML ソースコードと CSS コードを表示します。
リソース: Web ページによってロードされたさまざまなリソースファイル (コードファイル、フォントファイル、CSS ファイルなど) と、ハードディスク上に作成されたさまざまなコンテンツ (ローカルキャッシュ、Cookie、ローカルファイルなど) を表示します。保管など）。
ネットワーク: Web ページの HTTP 通信ステータスを表示します。
ソース: Web ページによってロードされたスクリプトのソースコードを表示します。
タイムライン: さまざまな Web ページの動作の時間の経過に伴う変化を表示します。
パフォーマンス: CPU やメモリの消費量など、Web ページのパフォーマンスを表示します。
コンソール: JavaScript コマンドを実行するために使用されます。

これらのパネルにはそれぞれ独自の目的があります。以下では、「コンソール」パネル (コンソールとも呼ばれます) のみを紹介します。

「コンソール」パネルは基本的に、プロンプトでさまざまなコマンドを入力できるコマンドラインウィンドウです。

コンソールオブジェクトの静的メソッド

「console」オブジェクトによって提供されるさまざまな静的メソッドは、コンソールウィンドウと対話するために使用されます。

console.log()、console.info()、console.debug()

console.log メソッドは、情報をコンソールに出力するために使用されます。 1 つ以上のパラメータを受け入れ、それらを連結して出力できます。

console.log('Hello World')
// こんにちは世界
console.log('a', 'b', 'c')
// a b c

「console.log」メソッドは、各出力の末尾に改行文字を自動的に追加します。

コンソール.ログ(1);
コンソール.ログ(2);
コンソール.ログ(3);
// 1
// 2
// 3

最初のパラメータがフォーマット文字列である場合 (フォーマットプレースホルダが使用される)、console.log メソッドはプレースホルダを後続のパラメータに置き換えて出力します。

console.log(' %s + %s = %s', 1, 1, 2)
// 1 + 1 = 2

上記のコードでは、「console.log」メソッドの最初のパラメータには 3 つのプレースホルダ (「%s」) があり、2 番目、3 番目、および 4 番目のパラメータは表示時にこれら 3 つのプレースホルダを順番に置き換えます。

「console.log」メソッドは次のプレースホルダーをサポートしており、さまざまな種類のデータは対応するプレースホルダーを使用する必要があります。

%s 文字列
%d 整数
%i 整数
%f 浮動小数点数
%o オブジェクトへのリンク
%c CSS フォーマット文字列

変数番号 = 11 * 9;
var color = '赤';

console.log('%d %s バルーン', 数, 色);
// 赤い風船 99 個

上記のコードでは、2 番目のパラメータは数値で、対応するプレースホルダは %d、3 番目のパラメータは文字列で、対応するプレースホルダは %s です。

%c プレースホルダーを使用する場合、対応するパラメーターは、出力コンテンツの CSS レンダリングに使用される CSS コードである必要があります。

コンソール.log(
  '%cこのテキストにはスタイルが設定されています!',
  '色: 赤; フォントサイズ: 24 ピクセル;
)

上記のコードを実行すると、出力内容が黄色の背景に赤色の文字で表示されます。

「console.log」メソッドの 2 つのパラメータ形式は一緒に使用できます。

console.log(' %s + %s ', 1, 1, '= 2')
// 1 + 1 = 2

引数がオブジェクトの場合、「console.log」にはオブジェクトの値が表示されます。

console.log({foo: 'bar'})
// オブジェクト {foo: "bar"}
console.log(日付)
// 関数 Date() { [ネイティブコード] }

上記のコードは Date オブジェクトの値を出力し、その結果はコンストラクターです。

console.info は console.log メソッドのエイリアスであり、その使用法はまったく同じです。 console.info メソッドが出力情報の前に青いアイコンを追加するだけです。

console.debug メソッドは console.log メソッドに似ており、デバッグ情報をコンソールに出力します。ただし、デフォルトでは、console.debug によって出力される情報は表示されず、表示レベルが verbose に設定されている場合にのみ表示されます。

「console」オブジェクトのすべてのメソッドはオーバーライドできます。したがって、独自のニーズに応じて console.log メソッドを定義できます。

['ログ', '情報', '警告', 'エラー'].forEach(function(method) {
  コンソール[メソッド] = コンソール[メソッド].bind(
    コンソール、
    new Date().toISOString()
  );
});

console.log("エラーが発生しました!");
// 2014-05-18T09:00.000Z 問題が発生しました。

上記のコードは、カスタムの「console.log」メソッドを使用して、表示結果に現在時刻を追加できることを示しています。

console.warn()、console.error()

「warn」メソッドと「error」メソッドもコンソールに情報を出力します。「log」メソッドとの違いは、「warn」メソッドが情報を出力する場合、先頭に黄色の三角形が追加されていることを示します。 warning; error メソッドが情報を出力する場合、エラーを示すために先頭に赤い十字を追加します。同時に、出力テキストとエラーが発生したスタックが強調表示されます。他はすべて同じです。

console.error('エラー: %s (%i)', 'サーバーが応答していません', 500)
// エラー: サーバーが応答していません (500)
console.warn('警告! ノードが少なすぎます (%d)', document.childNodes.length)
// 警告! ノードが少なすぎます (1)

log メソッドは標準出力 (stdout) に書き込み、warn メソッドと error メソッドは標準エラー (stderr) に書き込みを行うことがわかります。

console.table()

一部の複合タイプのデータについては、「console.table」メソッドを使用してテーブル表示に変換できます。

var 言語 = [
  { 名前: "JavaScript"、ファイル拡張子: ".js" },
  { 名前: "TypeScript"、ファイル拡張子: ".ts" },
  { 名前: "CoffeeScript"、ファイル拡張子: ".coffee" }
];

コンソール.テーブル(言語);

上記コードの「言語」変数を表に変換して表示すると以下のようになります。

(インデックス)	名前	ファイル拡張子
0	"JavaScript"	".js"
1	"TypeScript"	".ts"
2	"CoffeeScript"	".coffee"

以下はテーブルの内容を表示する例です。

var 言語 = {
  csharp: { 名前: "C#"、パラダイム: "オブジェクト指向" },
  fsharp: { 名前: "F#"、パラダイム: "関数型" }
};

コンソール.テーブル(言語);

上記コードの「言語」を表に変換して表示すると以下のようになります。

(インデックス)	名前	パラダイム
csharp	"C#"	"オブジェクト指向"
fsharp	"F#"	"機能的"

console.count()

countメソッドは、呼び出された回数をカウントして出力するために使用されます。

関数挨拶(ユーザー) {
  コンソール.カウント();
  'こんにちは' + ユーザーを返します。
}

挨拶('ボブ')
// : 1
// 「こんにちはボブ」

挨拶('アリス')
// : 2
// 「こんにちは、アリス」

挨拶('ボブ')
// : 3
// 「こんにちはボブ」

上記のコードが greet 関数を呼び出すたびに、内部の console.count メソッドが実行回数を出力します。

このメソッドは、実行数を分類するためのラベルとして文字列をパラメーターとして受け入れることができます。

関数挨拶(ユーザー) {
  コンソール.カウント(ユーザー);
  「こんにちは」 + ユーザーを返します。
}

挨拶('ボブ')
// ボブ: 1
// 「こんにちはボブ」

挨拶('アリス')
// アリス: 1
// 「こんにちは、アリス」

挨拶('ボブ')
// ボブ: 2
// 「こんにちはボブ」

上記のコードは、パラメータに応じて bob が 2 回実行され、alice が 1 回実行されることを示しています。

console.dir()、console.dirxml()

dir メソッドは、オブジェクトを検査し、読みやすく印刷しやすい形式で表示するために使用されます。

console.log({f1: 'foo', f2: 'bar'})
// オブジェクト {f1: "foo", f2: "bar"}

console.dir({f1: 'foo', f2: 'bar'})
// 物体
// f1: "フー"
// f2: "バー"
// __proto__: オブジェクト

上記のコードは、dir メソッドの出力を表示します。これは、log メソッドよりも読みやすく、有益です。

このメソッドは、DOM オブジェクトのすべてのプロパティが表示されるため、DOM オブジェクトを出力する場合に便利です。

console.dir(ドキュメント.ボディ)

Node 環境では、コードの強調表示の形式で出力を指定することもできます。

console.dir(obj, {colors: true})

dirxml メソッドは主に DOM ノードをディレクトリツリーの形式で表示するために使用されます。

console.dirxml(document.body)

パラメータが DOM ノードではなく、通常の JavaScript オブジェクトである場合、console.dirxml は console.dir と同等です。

console.dirxml([1, 2, 3])
// と同等
console.dir([1, 2, 3])

console.assert()

「console.assert」メソッドは主にプログラム実行中の条件を判断するために使用され、条件を満たさない場合にはエラーが表示されますが、プログラムの実行は中断されません。これは、内部状態が正しくないことをユーザーにプロンプトするのと同じです。

2 つのパラメータを受け入れます。最初のパラメータは式、2 番目のパラメータは文字列です。最初のパラメータが「false」の場合のみ、エラーが表示され、2 番目のパラメータがコンソールに出力されます。それ以外の場合、結果はありません。

console.assert(false, '判定条件が成立しません')
// Assertion failed: 判定条件が成立しない

// と同等
試す {
  if (!false) {
    throw new Error('判定条件が成立しません');
  }
} キャッチ(e) {
  コンソール.エラー(e);
}

以下は、子ノードの数が 500 以上であるかどうかを判断する例です。

console.assert(list.childNodes.length < 500, 'ノード数は 500 以上です')

上記のコードでは、修飾されたノードの数が 500 未満の場合は出力されません。500 以上の場合のみ、コンソールにエラーが表示され、指定されたテキストが表示されます。

console.time()、console.timeEnd()

これら 2 つの方法はタイミングに使用され、操作にかかる正確な時間を計算できます。

console.time('配列の初期化');

var 配列 = 新しい配列(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  配列[i] = 新しいオブジェクト();
};

console.timeEnd('配列の初期化');
// 配列の初期化: 1914.481ms

「time」メソッドは計時開始を示し、「timeEnd」メソッドは計時終了を示します。彼らの引数はタイマーの名前です。 timeEnd メソッドを呼び出すと、コンソールに「タイマー名: 経過時間」が表示されます。

console.group()、console.groupEnd()、console.groupCollapsed()

表示される情報をグループ化するために、console.group と console.groupEnd という 2 つのメソッドが使用されます。大量の情報を出力する場合にのみ、グループ化された情報をマウスで折りたたんだり展開したりすることができます。

console.group('第 1 レベルのグループ');
console.log('第 1 レベルのグループの内容');

console.group('第 2 レベルのグループ');
console.log('セカンダリグループの内容');

console.groupEnd(); // 二次グループ化の終了
console.groupEnd(); //第 1 レベルのグループ化の終了

上記のコードは、「第 1 レベルのグループ化」内に「第 2 のグループ化」を表示します。また、「第 1 レベルのグループ化」と「第 2 のグループ化」の前に折りたたみ記号があり、このレベルのコンテンツを折りたたむために使用できます。

console.groupCollapsed メソッドは console.group メソッドとよく似ていますが、唯一の違いは、グループの内容が最初に表示されるときに展開されるのではなく折りたたまれることです。

console.groupCollapsed('データの取得');

console.log('リクエスト送信');
console.error('エラー: サーバーが応答しません (500)');

console.groupEnd();

上記のコードは「データの取得」を 1 行だけ表示していますが、クリックすると展開されてその中に含まれる 2 行が表示されます。

console.trace()、console.clear()

console.trace メソッドは、現在実行されているコードのスタック内の呼び出しパスを表示します。

コンソール.トレース()
// コンソール.trace()
// (匿名関数)
// InjectedScript._evaluateOn
// InjectedScript._evaluateAndWrap
//InjectedScript.evaluate

console.clear メソッドは、現在のコンソールのすべての出力をクリアし、カーソルを最初の行に戻すために使用されます。ユーザーがコンソールの「ログを保存」オプションをチェックした場合、console.clear メソッドは機能しません。

コンソールコマンドライン API

ブラウザコンソールでは、「console」オブジェクトの使用に加えて、コンソールに付属のコマンドラインメソッドの一部を使用することもできます。

(1)$_

$_ 属性は、前の式の値を返します。

2+2
// 4
$_
// 4

(2)$0〜$4

コンソールは、要素パネルで選択した最後の 5 つの DOM 要素を保存します。$0 は最初から最後 (最新) を表し、$1 は最後から 2 番目を表し、$4 まで同様に続きます。

(3)$(セレクター)

$(selector) は、document.querySelector() に相当する、最初に一致した要素を返します。ページスクリプトに $ の定義がある場合、元の定義は上書きされることに注意してください。たとえば、ページに jQuery がある場合、コンソールで $(selector) を実行すると、jQuery 実装が使用され、配列が返されます。

(4)$$(セレクター)

$$(selector) は、選択された DOM オブジェクトを返します。これは、document.querySelectorAll と同等です。

(5)「$x(パス)」

$x(path) メソッドは、特定の XPath 式に一致するすべての DOM 要素を含む配列を返します。

$x("//p[a]")

上記のコードは、「a」要素を含むすべての「p」要素を返します。

(6)「検査(オブジェクト)」

inspect(object) メソッドは、関連するパネルを開き、対応する要素を選択してその詳細を表示します。 DOM 要素は「要素」パネルに表示されます。たとえば、「inspect(document)」は「要素」パネルに「document」要素を表示します。 JavaScript オブジェクトは、「inspect(window)」など、コンソールパネルの「プロファイル」パネルに表示されます。

(7)「getEventListeners(オブジェクト)」

getEventListeners(object) メソッドはオブジェクトを返します。このオブジェクトのメンバーは、object のコールバック関数のさまざまなイベント (click や keydown など) を登録します。各イベントは配列に対応します。配列の要素はイベントコールバック関数です。

(8) キー(オブジェクト)、値(オブジェクト)

keys(object) メソッドは、object のすべてのキー名を含む配列を返します。

values(object) メソッドは、object のすべてのキー値を含む配列を返します。

var o = {'p1': 'a', 'p2': 'b'};

キー(o)
// ["p1", "p2"]
値(o)
// ["a", "b"]

(9)monitorEvents(object[, events]), unmonitorEvents(object[, events])

monitorEvents(object[, events]) メソッドは、特定のオブジェクトで発生する特定のイベントを監視します。イベントが発生すると、イベントに関する情報を含む Event オブジェクトが返されます。監視を停止するには、unmonitorEvents メソッドを使用します。

MonitorEvents(ウィンドウ, "サイズ変更");
MonitorEvents(ウィンドウ, ["サイズ変更", "スクロール"])

上記のコードは、単一イベントと複数イベントのそれぞれのリスニングメソッドを表しています。

モニターイベント($0, 'マウス');
unmonitorEvents($0, 'mousemove');

上記のコードは、リスニングを停止する方法を示しています。

monitorEvents を使用すると、同じ一般カテゴリのイベントを監視できます。すべてのイベントは、大きく 4 つのカテゴリに分類できます。

マウス: 「マウスダウン」、「マウスアップ」、「クリック」、「dblclick」、「mousemove」、「mouseover」、「mouseout」、「mousewheel」
キー: 「キーダウン」、「キーアップ」、「キープレス」、「テキスト入力」
タッチ：「タッチスタート」、「タッチムーブ」、「タッチエンド」、「タッチキャンセル」
コントロール: 「サイズ変更」、「スクロール」、「ズーム」、「フォーカス」、「ぼかし」、「選択」、「変更」、「送信」、「リセット」

モニターイベント($("#msg"), "キー");

上記のコードは、「key」カテゴリのすべてのイベントが監視されることを示しています。

(10) その他の方法

コマンドライン API では、次のメソッドも提供されます。

clear(): コンソールの履歴をクリアします。
copy(object): 特定の DOM 要素をクリップボードにコピーします。
dir(object): 特定のオブジェクトのすべてのプロパティを表示します。これは、console.dir メソッドのエイリアスです。
dirxml(object): 特定のオブジェクトの XML 形式を表示します。これは、console.dirxml メソッドのエイリアスです。

デバッガーステートメント

debugger ステートメントは主にデバッグに使用され、その機能はブレークポイントを設定することです。デバッグツールが実行されている場合、プログラムは debugger ステートメントに到達すると自動的に停止します。デバッグツールがないと、「debugger」ステートメントは結果を生成せず、JavaScript エンジンはこの文を自動的にスキップします。

Chrome ブラウザでは、コードが「debugger」ステートメントに到達すると一時停止し、スクリプトソースコードインターフェイスが自動的に開きます。

for(var i = 0; i < 5; i++){
  コンソール.ログ(i);
  if (i === 2) デバッガ;
}

上記のコードが 0、1、および 2 を出力した後、一時停止してソースコードインターフェイスを自動的に開き、さらなる処理を待ちます。

参考リンク

Chrome デベロッパーツール、コンソールの使用
Matt West、開発者ツールコンソールのマスター
Firebug Wiki、コンソール API
Axel Rauschmayer、JavaScript コンソール API
Marius Schulz、console.table() を使用した高度な JavaScript デバッグ
Google 開発者、コマンドライン API リファレンス

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章