Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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オブジェクトのイケてるメソッドでモダンなログライフを!

koinori
最近の記事はタグが5つじゃ足りない。
pro-japan
ソフトウェアの受託開発・SES・メディア事業・ブロックチェーンの開発提案など。「あったらいいな」を実現します!
https://www.pro-japan.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした