読み込み中...

カテゴリー

トラブルシューティング設定・環境構築実装設計学習メモ技術勉強会日常

アーカイブ

【JS】便利なconsoleメソッドについて

概要

こちらの記事は勉強会にて発表を行うための資料になっております。

自分は、console.log("~~~~~")しか基本的に使うことがないので、初めての情報に目から鱗状態でした！

今からでも遅くないconsoleを使いこなそう - Qiita

https://qiita.com/S4nTo/items/453b5e6ee933765211ec

対象者

JavaScriptを用いたことがある方。
console.log等を用いてログの出力を行ったことがある方。

本文

console.log()

個人的にはこれをよく使います。

console.log("ログを出力しています。");
console.log(10000);
console.log(true);

console.log(“”,CSS)

第二引数にCSSプロパティをくわえてあげることで、出力する内容を装飾することができるみたいです。

console.log("%ckt-tech.blog","background-color: blue; color: white; padding: 20px;");

console.table()

console.table()は表形式のデータ(配列やオブジェクト)をコンソール上において表で出力を行ってくれます。

console.table({
    'Date': new Date().getFullYear(),
    'platform': 'Qiita',
    'post1': 'blog1',
});

console.group()

console.groupを使用するとメッセージをグループ化して、インデントして表示することができます。

console.group("処理1");
console.log("処理1の内容です。");
console.log({"message":"成功です。"});
console.groupEnd()

console.group("処理2");
console.log("処理2の内容です。");
console.log({"message":"成功です。"});
console.groupEnd()

console.dir()

console.dir()を使用するとオブジェクトのプロパティを一覧形式でコンソールに表示することができます。

const user = {
  name: "kt",
  age: 23,
  address: {
    city: "Shizuoka",
    country: "Japan"
  }
};
console.dir(user);

console.time()

console.time()を使用すると処理にかかる時間を計測することができます。

console.time("test1")
let i=1;
while(i>10000){
	i++;
}
console.timeEnd("test1");

console.count()

呼び出された回数を記録するメソッドです。

function exampleFunction() {
  console.count('Function call count');
}
for (let i = 0; i < 5; i++) {
  exampleFunction();
}

console.error()

エラーメッセージを出力できます。コンソール上では赤色で表示されます。

console.error("これはerrorです。");

console.warn()

console.warn()はコンソールに警告メッセージを出力するのに用います。

console.warn("これは警告です。");

参考文献

今からでも遅くないconsoleを使いこなそう - Qiita

https://qiita.com/S4nTo/items/453b5e6ee933765211ec

さいごに

よく使うconsoleメソッドでしたが知らないオプションが多々あったので今後活用していきたいと思いました。

kt-tech.blog

最新記事