JavaScript
コンソール

前書き

構文

• void console.log（obj1 [、obj2、...、objN]）;
• void console.log（msg [、sub1、...、subN]）;

パラメーター

備考

if (typeof window.console !== 'undefined')
{
   console.log("Hello World");
}

if (!window.console)
{ 
    console = {log: function() {}}; 
}

値の表記 - console.table（）

ほとんどの環境では、 console.table()を使用してオブジェクトと配列を表形式で表示できます。

例えば：

console.table(['Hello', 'world']);

次のような表示：

console.table({foo: 'bar', bar: 'baz'});

次のような表示：

"personId"：124、 "name"： "Amelia"：var personArr = {{"personId"：123、 "name"： "Jhon"、 "city"： "Melbourne"、 "phoneNo"： "1234567890" 「都市」：「都市」：「パース」、「電話番号」：「1234567890」}、「都市」：「シドニー」、「電話番号」：「1234567890」}、「personId」：125、「名前」：「エミリー」、 {"personId"：126、 "name"： "Abraham"、 "city"： "Perth"、 "phoneNo"： "1234567890"}];

console.table（personArr、['name'、 'personId']）;

次のような表示：

ロギング時にスタックトレースを含める - console.trace（）

function foo() {
  console.trace('My log statement');
}

foo();

これはコンソールに表示されます：

My log statement       VM696:1
  foo                  @ VM696:1
  (anonymous function) @ (program):1

注：同じスタックトレースがErrorオブジェクトのプロパティとしてアクセス可能であることがわかっている場合は、利用可能な場合は便利です。これは後処理や自動フィードバックの収集に役立ちます。

var e = new Error('foo');
console.log(e.stack);

ブラウザのデバッグコンソールへの印刷

簡単なメッセージを出力するために、ブラウザのデバッグコンソールを使用することができます。このデバッグやWebコンソールは 、直接ブラウザ（ほとんどのブラウザでF12キー -詳細については、以下の注意事項を参照）で開くことができ、 logの方法consoleオブジェクトは次のように入力して呼び出すことができますJavascriptを：

console.log('My message');

Enterキーを押すと、 My messageがデバッグコンソールにMy messageれMy message 。

console.log()は、現在のスコープで使用可能な任意の数の引数と変数で呼び出すことができます。複数の引数が1行に表示され、その間に小さなスペースがあります。

var obj = { test: 1 };
console.log(['string'], 1, obj, window);

logメソッドはデバッグコンソールに次のように表示されます：

['string']  1  Object { test: 1 }  Window { /* truncated */ }

普通の文字列の他に、 console.log()は、配列、オブジェクト、日付、関数などの他の型を扱うことができます。

console.log([0, 3, 32, 'a string']);
console.log({ key1: 'value', key2: 'another value'});

ディスプレイ：

Array [0, 3, 32, 'a string']
Object { key1: 'value', key2: 'another value'}

入れ子にされたオブジェクトは折りたたまれています：

console.log({ key1: 'val', key2: ['one', 'two'], key3: { a: 1, b: 2 } });

ディスプレイ：

Object { key1: 'val', key2: Array[2], key3: Object }

Dateオブジェクトやfunctionなどの特定の型は、別々に表示されることがあります。

console.log(new Date(0));
console.log(function test(a, b) { return c; });

ディスプレイ：

Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
function test(a, b) { return c; }

その他の印刷方法

logメソッドに加えて、現代のブラウザも同様のメソッドをサポートしています。

• console.info - 印刷された文字列またはオブジェクトの左側に小さな情報アイコン（ⓘ）が表示されます。

• console.warn - 小さな警告アイコン（！）が左側に表示されます。一部のブラウザでは、ログの背景が黄色です。

• console.error - 小さな時間アイコン（⊗）が左側に表示されます。一部のブラウザでは、ログの背景が赤です。

• console.timeStamp - 現在の時刻と指定された文字列を出力しますが、非標準です：

  console.timeStamp('msg');
  

  ディスプレイ：

  00:00:00.001 msg
  

• console.trace - 現在のスタックトレースを出力するか、グローバルスコープで呼び出された場合はlogメソッドと同じ出力を表示します。

  function sec() {
     first();
  }
  function first() {
     console.trace();
  }
  sec();
  

  ディスプレイ：

  first
  sec
  (anonymous function)
  

上記の画像は、Chromeバージョン56のtimeStamp除くすべての機能を示しています。

これらのメソッドはlogメソッドと同様に動作し、異なるデバッグコンソールでは異なる色や形式でレンダリングすることがあります。

特定のデバッガでは、個々のオブジェクト情報をさらに展開するには、印刷されたテキストをクリックするか、それぞれのオブジェクトプロパティを参照する小さな三角形（►）をクリックします。これらの折りたたまれているオブジェクトのプロパティは、ログ上で開いたり閉じたりできます。この追加情報については、 console.dirを参照してくださいconsole.dir

測定時間 - console.time（）

console.time()は、コード内のタスクの実行時間を測定するために使用できます。

console.time([label])呼び出すと、新しいタイマーが開始されます。 console.timeEnd([label])が呼び出されると、元の.time()呼び出しが計算されてロギングされてからの経過時間（ミリ秒単位.time() 。この動作により、元の.time()呼び出しが行われてからの経過時間を記録するために、同じラベルで.timeEnd()複数回呼び出すことができます。

例1：

console.time('response in');

alert('Click to continue');
console.timeEnd('response in');

alert('One more time');
console.timeEnd('response in');

出力されます：

response in: 774.967ms
response in: 1402.199ms

例2：

var elms = document.getElementsByTagName('*'); //select all elements on the page

console.time('Loop time');

for (var i = 0; i < 5000; i++) {
    for (var j = 0, length = elms.length; j < length; j++) {
        // nothing to do ...
    }
}

console.timeEnd('Loop time');

出力されます：

Loop time: 40.716ms

カウント - console.count（）

console.count([obj])は、引数として与えられたオブジェクトの値にカウンタを置きます。このメソッドが呼び出されるたびに、カウンタが増加します（空の文字列''は例外です）。番号付きのラベルは、次の形式に従ってデバッグコンソールに表示されます。

[label]: X

labelは引数として渡されたオブジェクトの値を表し、 Xはカウンタの値を表します。

変数が引数として指定されていても、オブジェクトの値は常に考慮されます。

var o1 = 1, o2 = '2', o3 = "";
console.count(o1);
console.count(o2);
console.count(o3);

console.count(1);
console.count('2');
console.count('');

ディスプレイ：

1: 1
2: 1
: 1
1: 2
2: 2
: 1

数値の文字列はNumberオブジェクトに変換されます。

console.count(42.3);
console.count(Number('42.3'));
console.count('42.3');

ディスプレイ：

42.3: 1
42.3: 2
42.3: 3

関数は常にグローバルFunctionオブジェクトを指します：

console.count(console.constructor);
console.count(function(){});
console.count(Object);
var fn1 = function myfn(){};
console.count(fn1);
console.count(Number);

ディスプレイ：

[object Function]: 1
[object Function]: 2
[object Function]: 3
[object Function]: 4
[object Function]: 5

特定のオブジェクトは、参照するオブジェクトの種類に関連付けられた特定のカウンタを取得します。

console.count(undefined);
console.count(document.Batman);
var obj;
console.count(obj);
console.count(Number(undefined));
console.count(NaN);
console.count(NaN+3);
console.count(1/0);
console.count(String(1/0));
console.count(window);
console.count(document);
console.count(console);
console.count(console.__proto__);
console.count(console.constructor.prototype);
console.count(console.__proto__.constructor.prototype);
console.count(Object.getPrototypeOf(console));
console.count(null);

ディスプレイ：

undefined: 1
undefined: 2
undefined: 3
NaN: 1
NaN: 2
NaN: 3
Infinity: 1
Infinity: 2
[object Window]: 1
[object HTMLDocument]: 1
[object Object]: 1
[object Object]: 2
[object Object]: 3
[object Object]: 4
[object Object]: 5
null: 1

空の文字列または引数がない

デバッグコンソールでcountメソッドを順番に入力している間に引数が指定されていない場合は、パラメータとして空の文字列が仮定されます。

> console.count();
  : 1
> console.count('');
  : 2
> console.count("");
  : 3

アサーションによるデバッグ - console.assert（）

アサーションがfalse場合、エラーメッセージをコンソールに書き込みfalse 。それ以外の場合、アサーションがtrue 、これは何もしません。

console.assert('one' === 1);

アサーションの後に複数の引数を指定することができます。これらの引数は、アサーションがfalse場合にのみ出力される文字列やその他のオブジェクトです。

console.assertはAssertionError （ Node.jsを除く）をスローしません console.assertつまり、このメソッドはほとんどのテストフレームワークと互換性がなく、失敗したアサーションでコードの実行が中断しません。

コンソール出力のフォーマット

コンソールの印刷メソッドの多くは、 %トークンを使用してCのような文字列フォーマットも処理できます 。

console.log('%s has %d points', 'Sam', 100);

ディスプレイSam has 100 pointsます。

Javascriptの書式指定子の完全なリストは次のとおりです。

高度なスタイリング

文字列の左側にCSSフォーマット指定子（ %c ）が置かれている場合、printメソッドはその文字列のフォーマットをきめ細かく制御できるCSSルールを持つ2番目のパラメータを受け取ります。

console.log('%cHello world!', 'color: blue; font-size: xx-large');

ディスプレイ：

複数の%cフォーマット指定子を使用することは可能です：

• %c右側の部分文字列には、printメソッドの対応するパラメータがあります。
• その同じ部分文字列にCSSルールを適用する必要がない場合は、このパラメータはemtpy文字列です。
• 2場合%cフォーマット指定が発見された、第^1（に包ま%c ）と2 ^番目のサブストリングは、それらのルールは、それぞれの印刷方法の第²および^第3のパラメータで定義したであろう。
• 3場合%cフォーマット指定が発見され、その後、第^1は 、2 ^番目と3 ^番目のストリングは、それらのルールはそうでそれぞれ2 ^番目 、3 ^番目と4 ^番目のパラメータで定義され、そして持っています...

console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

ディスプレイ：

グループを使用して出力を字下げする

出力は次の方法でデバッグコンソールの折りたたみ可能なグループに識別され、囲まれます。

• console.groupCollapsed() ：このメソッドが呼び出された後に実行されるすべてのエントリを表示するために、開示ボタンで展開できる折りたたまれたエントリのグループを作成します。
• console.group() ：このメソッドが呼び出された後にエントリを非表示にするために折りたたむことができる展開されたエントリのグループを作成します。

次の方法を使用して、後方エントリの識別情報を削除できます。

• console.groupEnd（） ：現在のグループを終了し、このメソッドが呼び出された後に親グループに新しいエントリが出力されるようにします。

グループをカスケードして、複数の識別された出力または折りたたみ可能なレイヤーを相互に許可することができます。

= Collapsed group expanded =>

コンソールのクリア - console.clear（）

console.clear()メソッドを使用してコンソールウィンドウをクリアすることができます。これにより、以前に印刷されたすべてのメッセージがコンソールで削除され、一部の環境で「コンソールが消去されました」などのメッセージが表示されることがあります。

対話的にオブジェクトとXMLを表示する - console.dir（）、console.dirxml（）

console.dir(object)は、指定されたJavaScriptオブジェクトのプロパティの対話型リストを表示します。出力は、子オブジェクトの内容を表示できる公開三角形を含む階層リストとして表示されます。

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dir(myObject);

表示：

console.dirxml(object)は、可能であればobjectの子孫要素のXML表現を出力し、そうでない場合はJavaScript表現を出力します。呼び出しconsole.dirxml() HTMLとXML要素にすることは呼び出すことと同等であるconsole.log() 。

例1：

console.dirxml(document)

表示：

例2：

console.log(document)

表示：

例3：

var myObject = {
    "foo":{
        "bar":"data"
    }
};

console.dirxml(myObject);

表示：