113
100

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Chromeでconsole.logにスタイルを適用する

Last updated at Posted at 2013-04-16

https://github.com/adamschwartz/log
これのソース読んでて知りました。

console.log('あいうえお%cかきくけこ', 'color: red');

このようにすると%cよりあとの文字(かきくけこ)にCSSが適用されて赤くなります。

console.log('%cred %cgreen %cblue', 'color: red', 'color: green; font-weight: bold', 'color: blue');

こんなふうに複数のCSSを使えます。

console.log('normal %cbold%c normal', 'font-weight: bold; font-size: large', '');

空の文字列を渡すと元のスタイルに戻るみたいです。

うまくログにスタイルをつければ、デバッグも捗るかな。

113
100
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
113
100

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?