JavaScript

【2019年4月版】JavaScriptのconsoleがすごいことになってた。


JavaScript の console がすごいことになっているらしい。

本日、以下の記事を見つけました。

この記事で紹介されている console のメソッド全然知らなかったのでビックリしましたが、実際にどう表示されるのか載っていなかったのでChromeのコンソールでスクショを取ってみました。


console.log()

本文によるとlogメソッド内のテキストリテラルは以下の書式で値のフォーマットと置換ができるそうです。


  • %o / %O - for objects;

  • %d / %i - for integers;

  • %s - for strings;

  • %f - for floating-point numbers;

マジすか・・・

そんなわけで以下のコード

console.log("Object value: %o with string substitution",

{string: "str", number: 10});

%oのところに後ろで定義したオブジェクトが置換されて以下のようにログが出力されます。

55398949-b5768c00-5584-11e9-9d9a-b7c811e833e1.png

バッチリ、はめ込まれてますね・・・

つづいて CSS が効くんですって?!

console.log("Example %cCSS-styled%c %clog!",

"color: red; font-family: monoscope;",
"",
"color: green; font-size: large; font-weight: bold");

ぱっと見わかりにくいですが、%cが3つと後ろでCSSを指定してると思しき文字列が3つ、です。

以下のように出力されます。

55399158-4d747580-5585-11e9-975d-08a50ca0b82a.png

オーマイ。。。CSS効いてる。。。


console.group()

グループの作成も可能だそうです。

console.group();

console.log("Inside 1st group");
console.group();
console.log("Inside 2nd group");
console.groupEnd();
console.groupEnd();
console.log("Outer scope");

これが、以下のようになります。

55399270-9f1d0000-5585-11e9-80ca-a34f6046f7c3.png

階層が作れてしっかり閉じたり開いたりできます。

ちなみに、console.groupCollapsed()なんていうメソッドもありました。

こちらグループを閉じた状態でログをバンバン追記できるのでうるさくないログをまとめて出したいときに便利かもしれません。

ただしgroupgroupCollapsedの数とGroupEndの数を合わせないと階層がおかしくなったりCollapsedなグループにログが追加されていて気づかなかったりするので、作ったグループの数だけ終わらせるのはマストです。


console.trace()

traceメソッドでスタックトレースが一撃です。

console.trace("Logging the way down here!");

55399347-d25f8f00-5585-11e9-9421-abd2a3c5ed25.png

コンソールで直接、表示していますので1階層だけですが・・・すいません。


warn(), error() など

ログレベルによって表示・非表示が切り替えられたり表示する効果が変わったりは前からありましたね!デフォルトではdebugレベルのログは表示されなかったのでログレベル変えて表示してます。

でもassertもあったんだ・・・

console.warn("This is a warning!");

console.error("This is an error!");
console.info("This is very informative!");
console.debug("Debugging a bug!");
console.assert(true, "This won't be logged!");
console.assert(false, "This will be logged!");

55399826-25861180-5587-11e9-81e6-82ac46ea2565.png

本文によるとinfodebugも表示が変わるそうですが、自分のChromeでは特に特殊効果はなかったようです。


time()

時間も記録できる、だと?!

console.time();

console.timeLog();
console.timeEnd();

55400202-2ec3ae00-5588-11e9-89db-d1fad8f863b7.png

いや、けっこう必要だったよコレ?いつからあったのさ・・・


count()

も〜、カウンタもconsoleだけでできるんだね。。。まぁカウンタ1つだけだけどね。

console.count(); // default: 1

console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count();

55400376-b4dff480-5588-11e9-8d13-0ac0ed2a987a.png

はい、文句ないです。


カウンタを複数

@cfm-art 様にご教示いただきました複数カウンタ、こんな感じです!

console.count();

console.count("for");
console.count("if");
console.count("if");
console.countReset("if");
console.count("for");
console.count("if");
console.count("if");
console.countReset("if");
console.count("for");
console.countReset("for");
console.count();

55454393-c1149200-561a-11e9-842c-2c98914ca6a8.png

ラベルがいくらでも指定できて素敵です!


table()

2次元の配列には表形式でも出力可能だそうです。。。

console.table([[0,1,2,3,4], [5,6,7,8,9]]);

55400460-e8228380-5588-11e9-9c4c-12d77de04c1c.png

もうHTML側じゃなくてコンソールでいろいろやりたくなってくるね。。。


番外編:ASCIIアート

本文の最後に表示されていたスクリプト、最初意味がわからなかったのですが、このページのログを見て納得がいきましたw

import imageToAscii from "image-to-ascii";

imageToAscii(
"https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png",
{
colored: false,
}, (err, converted) => {
console.log(err || converted);
});

これ、以下のようにログが出てまして・・・

55400684-831b5d80-5589-11e9-9df4-584564b6c71f.png

なんか・・・JS??

で、上記のスクリプトで指定してるhttps://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.pngって画像が、

tumblr_lsus01g1ik1qies3uo1_400.png

これですw

いやーASCIIアートできるw

全っ然、知りませんでした!w


関連ネタ

弊社の @prononam 氏がコンソールネタを投下してくれました!

そして私も便乗しました・・・w

こちらもどうぞ!

consoleオブジェクトのイケてるメソッドでモダンなログライフを!