Zenn
🚁

まだまだ知らない console の世界

2020/10/30に公開
JavaScript
tech

console とは

console オブジェクトは、ブラウザーのデバッグコンソール（下図）へアクセスする機能を提供します。
ブラウザーによって細部の動作は異なりますが、一般的に共通の機能が提供されています。
注意 本記事は Google Chrome の場合の挙動になります。

それでは、まだまだ知らない console の世界 を、コードと実行結果を見ながら体験してみましょう。

console.clear

console.clear はその名の通り、console をクリアできます。
任意の行より以前のログを一時的に消して、注視したいログだけにできますね。

console.log("hello");
console.clear();

実行結果

console.count

繰り返しのコード部分で何回実行されたか、暫定的なカウント変数を用意してデバッグすることもあるのではないでしょうか。そんな場合は、 console.count を使ってみましょう。

for(i=0;i<10;i++){
   console.count();
}
for(i=0;i<100;i++){
   console.count('item');
}

実行結果

console.countReset

console.countReset は任意のタイミングでカウントした数値をリセットできます。

for(i=0;i<3;i++){
   console.count('item');
}
console.countReset('item');
console.count('item');

実行結果

console.assert

console.assert を使えば、想定されている値かどうかを確認してログを出力できます。

const price = 50000;
const price_max = 10000;
const message = "[上限] " + price_max + "円 を超える料金が設定されています"
console.assert(price < price_max,message);

実行結果

console.dir

console.log と console.dir では出力結果が異なります。
特に DOM 要素を出力したときに違いがあります。
DOM 要素を JSON 状の表示にしたい場合は、console.dir を使いましょう。

<div id="sample">こんにちは</div>

console.log(document.getElementById("sample"));
console.dir(document.getElementById("sample"));

実行結果

console.error

これは、お馴染みですよね。他にも、console.info console.warn console.debug といったログレベルごとにログを出力可能です。

console.error("すごいエラーが起きました");

実行結果

console.group

console.group は結果をグルーピングできます。
ログを出しすぎて、どこの処理なのか分からないことがありますよね。
そんなときはグルーピングをしてみるのはいかがでしょうか。

const getData = ()=>{
  console.info('データ取得');
  console.info('データ整形');
} 

for(i=1;i<10;i++){
  console.group(i + "番目の処理開始");
  getData();
  console.groupEnd(); 
}

実行結果

console.groupCollapsed

console.group はログをグルーピングできますが、せっかくグルーピングしても展開された状態なのでログが多すぎて確認が困るという方もいるのではないでしょうか。
その場合は、console.groupCollapsed を使ってみましょう。

const getData = ()=>{
  console.info('データ取得');
  console.info('データ整形');
} 

for(i=1;i<10;i++){
  console.groupCollapsed(i + "番目の処理開始");
  getData();
  console.groupEnd(); 
}

実行結果

console.table

console.log で出力したときにデータを見やすいテーブル書式にしてくれます。
配列の場合に効果的ですが、配列ではない場合も大丈夫です。

const array = [{
	name: "すごい本",
	price: 100,
	author: "ぼく"
},{
	name: "まぁまぁすごい本",
	price: 300,
	author: "だれか"
}]
console.table(array)

const json = {
	name: "すごい本",
	price: 100,
	author: "ぼく"
}
console.table(json)

実行結果

console.time

アプリケーションのパフォーマンスを計測する際に、時間を計ることも多いのではないでしょうか。
専用のロギング処理を実装することもありますよね。
でも、console.timeを覚えておけば、たった 2行 で済んでしまいます。

console.time();
setTimeout(()=>{
  console.timeEnd();
},2000)

console.time("すごい処理");
setTimeout(()=>{
  console.timeEnd("すごい処理");
},1000)

実行結果

console.trace

エラーが起きているときの、呼び出し元を知りたい場合はありませんか。
そんなときは、呼び出し元を辿ってくれる console.trace を使いましょう。

const look = () => { take(); };
const take = () => { buy(); };
const buy = () => { thankyou(); };
const thankyou = () => { console.trace(); };
look();

実行結果

(番外編） 表示スタイルを変えてみる

番外編です。
みんなの書いている console.log は好きなようにスタイルを変えることができます。
すべての CSS プロパティが動くわけでは有りませんが、下記のようなスタイルで出力できます。

console.log('%c Twitter %c https://twitter.com/izuchy ',
  'border:1px solid white;padding: 4px 8px;font-size: 16px;font-weight:bold;background: #51A0EB;color: #fff;',
  'font-size: 16px;font-weight: bold')

実行結果

まとめ

いかがでしたでしょうか。今まで console.log だけを使っている方も多いのではないでしょうか。
存在を知っているだけで、みなさんの日々の開発が少しでも幸せになりそうなメソッドたちをご紹介しました。

この記事が気に入ったら、下のハートマークをおしてもらえると嬉しいです。

Discussion