30
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

console.log でログに色付けたり枠付けたり

Log – Console.log with Style を見て初めて知ったのでメモ。

こんなことができる:

スクリーンショット

%c 以降にスタイルが適応される。スタイルの属性は CSS と同じ。

console.log('%cfoo', 'color:red');
// => 赤い foo

console.log('%cfoo%cbar', 'color:red', '');
// => 赤い foo 普通の bar
// 空文字でリセット

console.log('%cfoo', 'font-size:20px; padding: 10px; background: #999; border-radius: 5px;');
// => 灰色背景の foo

よくよく調べると、%o なんてものもあるんですね。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
30
Help us understand the problem. What are the problem?