consoleの使い方〜モダンなJavaScript

「Console」オブジェクトについて

JavaScriptで開発を行う際に「console.log()」は非常によく使われるし便利なものです。
そもそも、「Console」オブジェクトは、ブラウザのデバッグコンソールへアクセスするためのオブジェクトです。

「Console」オブジェクトは「log()」メソッドだけではなく便利なメソッドを用意しています。
メソッドの詳細は「console – Web API インターフェイス | MDN」のページで紹介されていますので確認しておくと良いでしょう。

console.log()の使用例

console.log('Hello!');
console.log(123);
console.log(true);
console.log([1,2,3,4]);
console.log({a:1,b:2});

結果

「table」メソッドについて

「Console」オブジェクトの「table」はオブジェクト形式のデータを、テーブルを使用して表示するものです。

console.table()使用例

console.table({ a: 1, b: 2, c: 3, d:4 });

結果

「time」メソッドと「timeEnd」メソッドについて

「time」メソッドと「timeEnd」メソッドは通常セットで使います。
「time」メソッドはパラメータとして指定された名前のタイマーを開始します。
「timeEnd」メソッドは指定されたタイマーを停止して、そのタイマーを開始してからの時間を秒単位でログに出力するものです。
尚、ページあたり最大 10,000 個のタイマーを同時に動かすことができます。

「time」メソッドと「timeEnd」メソッドの使用例

console.time('Hello');
console.log('Hello! Tahara');
console.log('Hello! Tahara');
console.log('Hello! Tahara');
console.log('Hello! Tahara');
console.timeEnd('Hello');

結果

「count」メソッドについて

「count」メソッドは何回呼ばれたかカウントします。そしてパラメータに指定した値を文字列として評価して表示します。

「count」メソッド使用例

var name = 'Tahara';
console.count(name);
console.count(name);
console.count(name);

結果

「clear」メソッドについて

コンソール画面をクリアすることができます。

「clear」メソッド使用例

console.clear();