【JS】便利なconsoleメソッドについて
勉強会約4分で読めます
この記事でわかること
- console.log 以外の 8 つの console メソッドと、それぞれの実行結果
- 配列やオブジェクトを表で見る console.table、処理時間を測る console.time の使いどころ
- %c と CSS でログを装飾する書き方
JavaScript を書いたことがあり、console.log でログを出した経験があれば十分です。ブラウザの開発者ツールが開ければその場で試せます。
概要
こちらの記事は勉強会にて発表を行うための資料になっております。
自分は、console.log("~~~~~")しか基本的に使うことがないので、初めての情報に目から鱗状態でした！
下記の記事をもとに、自分なりの解釈を加えて作成しています。
参考: console.log だけじゃない！便利な console メソッド（Qiita）
console.log()
個人的にはこれをよく使います。
console.log("ログを出力しています。");
console.log(10000);
console.log(true);console.log() を CSS で装飾する
第一引数の中に %c を置き、第二引数に CSS を渡すと、%c 以降の出力を装飾できます。
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.time() と console.timeEnd() に渡すラベルは一致させる必要があります。違う名前を渡すと「Timer 'xxx' does not exist」と警告が出て計測結果が出ません。ラベルを省略すると default という名前になります。
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メソッドでしたが知らないオプションが多々あったので今後活用していきたいと思いました。
Tips
ここで紹介したメソッドは、本番ビルドに残さないのが基本です。
console.table や console.time はデバッグ中に強い一方、消し忘れるとユーザーのコンソールにそのまま出ます。ESLint の no-console を入れておくと、リントの段階で気づけます。参考リンク
更新履歴
- console.time のコード例のループ条件が while (i > 10000) となっておりループが一度も回らなかったのを修正。time / timeEnd のラベル一致についての注意を追加。%c の使い方の説明を正確にし、見出しを整理（「本文」の空見出しを削除、見出しの表記ゆれを統一）。本番ビルドに残さないための補足を追加。裸 URL をタイトル付きリンクに変更し、参考リンクを末尾に集約。
- 記事内リンクと OGP Description の修正
