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

# JavaScript の console がすごいことになっているらしい。
本日、以下の記事を見つけました。

- [Getting creative with the Console API!](https://areknawo.com/getting-creative-with-the-console-api/)

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

# console.log()

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

- %o / %O - for objects;
- %d / %i - for integers;
- %s - for strings;
- %f - for floating-point numbers;

マジすか・・・
そんなわけで以下のコード

```javascript
console.log("Object value: %o with string substitution",
   {string: "str", number: 10});
```
は`%o`のところに後ろで定義したオブジェクトが置換されて以下のようにログが出力されます。
![55398949-b5768c00-5584-11e9-9d9a-b7c811e833e1.png](https://qiita-image-store.s3.amazonaws.com/0/335150/0c606442-6ab9-f74f-cf94-e09bf7b7ac86.png)
バッチリ、はめ込まれてますね・・・

つづいて CSS が効くんですって？！

```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/335150/dbad30e1-1564-e1ce-7cbf-695da89428a6.png)
オーマイ。。。CSS効いてる。。。

# console.group()

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

```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/335150/bf8ad525-ceca-90b5-15dd-ad89c6b0720a.png)
階層が作れてしっかり閉じたり開いたりできます。
ちなみに、`console.groupCollapsed()`なんていうメソッドもありました。
こちらグループを閉じた状態でログをバンバン追記できるのでうるさくないログをまとめて出したいときに便利かもしれません。
ただし`group`や`groupCollapsed`の数と`GroupEnd`の数を合わせないと階層がおかしくなったり`Collapsed`なグループにログが追加されていて気づかなかったりするので、**作ったグループの数だけ終わらせる**のはマストです。

# console.trace()

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

```javascript
console.trace("Logging the way down here!");
```
![55399347-d25f8f00-5585-11e9-9421-abd2a3c5ed25.png](https://qiita-image-store.s3.amazonaws.com/0/335150/290bf801-3d64-1c6f-bbb9-3a42a09c4207.png)
コンソールで直接、表示していますので1階層だけですが・・・すいません。

# warn(), error() など

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

```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/335150/3835cb08-b5e3-539c-1def-b72e02ac0ab5.png)

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

# time()

時間も記録できる、だと？！

```javascript
console.time();
console.timeLog();
console.timeEnd();
```
![55400202-2ec3ae00-5588-11e9-89db-d1fad8f863b7.png](https://qiita-image-store.s3.amazonaws.com/0/335150/80972493-d6d6-b268-b403-bc59a03490ac.png)
いや、けっこう必要だったよコレ？いつからあったのさ・・・

# count()

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

```javascript
console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count();
```
![55400376-b4dff480-5588-11e9-8d13-0ac0ed2a987a.png](https://qiita-image-store.s3.amazonaws.com/0/335150/5c0ad29d-485e-a2de-a802-b9e40d49be55.png)
はい、文句ないです。

## カウンタを複数

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

```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/335150/adc40a1d-d517-fa2c-706c-eb1917274541.png)
ラベルがいくらでも指定できて素敵です！

# table()

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

```javascript
console.table([[0,1,2,3,4], [5,6,7,8,9]]);
```
![55400460-e8228380-5588-11e9-9c4c-12d77de04c1c.png](https://qiita-image-store.s3.amazonaws.com/0/335150/aa2e4715-60f5-afa9-1465-fe986950f5e8.png)

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

# 番外編：ASCIIアート

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

```javascript
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](https://qiita-image-store.s3.amazonaws.com/0/335150/8165335e-4e0f-2063-f1dd-a493a9dece2c.png)

なんか・・・JS？？


で、上記のスクリプトで指定してる`https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png`って画像が、
![tumblr_lsus01g1ik1qies3uo1_400.png](https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png)
これですw

いやーASCIIアートできるw

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

# 関連ネタ

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

- [console.log()でスネークゲームを出力する](https://qiita.com/prononami/items/7571ce9bb382981a56bb)

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

- [【2019年4月版】JavaScriptのconsoleでスネークゲームをワンライナー！](https://qiita.com/koinori/items/95dc204f8c7243fd39f6)

こちらもどうぞ！

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