Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1781
Help us understand the problem. What is going on with this article?
@koinori

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

1781
Help us understand the problem. What is going on with this article?
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
koinori
最近の記事はタグが5つじゃ足りない。
pro-japan
さまざまな価値観を持ち、日々変化し続ける技術を探究し、チャレンジし続けることで、楽しみながら「あったらいいな」を創り上げ、実現します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1781
Help us understand the problem. What is going on with this article?