コンソールは、ブラウザの開発ツールがサポートするコンソールウィンドウにデバッグログなどを書き出すのに使用されます。
args, ... で指定したオブジェクトを開発ツールのコンソールに書き出します。
console.log("This is DEBUG message.");
最近のブラウザでは、引数にオブジェクトを指定した場合、オブジェクトのリファレンスのみが出力され、オブジェクトの内容は、値を書き出した時点ではなく、コンソールでオブジェクトの ▶ をクリックして開いた時点の値が表示されるので注意が必要です。下記の例では console.log() で値を書き出した時点の "Yamada" ではなく、コンソールでオブジェクトを開いた時点の "Suzuki" が表示されます。
var obj1 = {"name": "Yamada"};
var obj2 = {"obj": obj1};
console.log(obj2);
obj1.name = "Suzuki";
console.log() を呼び出した時点のログを確実に書き出すには下記の様にしてください。
console.log(JSON.parse(JSON.stringify(obj)))
下記の様に %s などの置換文字列を用いて、変数の値を表示することもできます。置換文字列には %s(文字列)、%o(オブジェクト)、%d(整数値)、%f(浮動小数点数値)などを指定できます。
var name = "Yamada";
var age = 26;
console.log("name=%s, age=%d", name, age);
%c を用いると CSS スタイルを適用することができます。
console.log("%cERROR:%c File Not Found.", "color:red", "color:black"); => ERROR: File Not Found.
デバッグログとして変数名とその値を書き出す際 console.log({変数名}) とすることで変数名と値を簡単に出力することができます。o = {"x":123}; を x = 123; o = {x}; と記述できることを利用しています。
height = 123;
console.log("height: " + height); // height: 123
console.log({height}); // {height: 123}
スタックトレースを出力します。args の使用方法は log() を参照してください。
function foo() { console.trace("STACK TRACE"); }
function bar() { foo(); }
function baz() { bar(); }
baz();
label で指定したラベルのタイマを開始します。label を省略すると "default" というラベルが使用されます。
console.time("TimerA");
console.timeEnd("TimerA");
label で指定したラベルのタイマの開始からの経過時間を出力します。label を省略すると "default" というラベルが使用されます。
console.time("TimerA");
console.timeLog("TimerA");
console.timeLog("TimerA");
console.timeEnd("TimerA");
label で指定したラベルのタイマを終了し、開始からの経過時間を出力します。label を省略すると "default" というラベルが使用されます。
console.time("TimerA");
console.timeEnd("TimerA");
指定したラベルで console.count() が呼び出された回数を表示します。label を省略すると "default" というラベルが使用されます。
console.count("ErrorCount");
指定したラベルのカウンターをリセットします。label を省略すると "default" というラベルが使用されます。
console.countReset("ErrorCount");
新たなインライングループを作成し、console.groupEnd() を呼び出すまでコンソールログを1段字下げします。label を使用するとグループの名前として label が表示されます。
console.log("A");
console.group();
console.log("A-1");
console.log("A-2");
console.groupEnd();
console.log("B");
group() と似ていますが、グループをデフォルトで閉じた状態で表示する点が異なります。
console.log("A");
console.groupCollapsed();
console.log("A-1");
console.log("A-2");
console.groupEnd();
console.log("B");
現在のグルーピングを終了します。
console.group(); : console.groupEnd();
condition が false の時のみ args, ... をエラーメッセージとして書き出します。
console.assert(result == 1, "Result is not 1.");
コンソールの表示をすべて削除(クリア)します。
console.clear();
オブジェクト情報を書き出します。console.log() と比べて引数に単一のオブジェクトしか指定できませんが、console.log() がオブジェクト情報を省略して出力することがあるのに対し、console.dir() はすべてのオブジェクト情報を書き出すことができます。
console.log(document.body); # 主要情報のみ表示 console.dir(document.body); # 属性情報などもすべて表示
XML/HTML要素をツリー構造として書き出します。
console.dirxml(document.body);
データをテーブル形式で表示します。
# ラベル無し一次元配列 var data = ["Red", "Green", "Blue"]; console.table(data); # ラベル付き一次元配列 var data = {"red":"#f00", "green":"#0f0", "blue":"#00f"}; console.table(data); # ラベル無し二次元配列 var data = [["A1", "A2", "A3"], ["B1", "B2", "B3"]]; console.table(data); # ラベル有り二次元配列 var data = {"A": {"X":"AX", "Y":"AY"}, "B": {"X":"BX", "Y":"BY"}}; console.table(data);
第二引数を指定すると、表示する列を制限することができます。
var data = {"A": {"X": "AX", "Y": "AY"}, "B": {"X": "BX", "Y":"BY"}};
console.table(data, ["X"]);