console.logで改行を含んだ文字列にスタイルを付けると配置がおかしい

投稿者: Anonymous

スタイル付きconsole.log

↑の開発者ツールのスクリーンショットのように、
console.logでは二番目以降の引数を使ってスタイルを当てられます。

が、改行を含む文字列にスタイルを当てようとすると変なことになります。


Chrome(65.0.3325.181, 64bit macOS)ではなぜか二行目に文字が移動し、


Firefox(59.0.2, 64bit macOS)では余計な空白が入ります。

どっちも変な挙動に思えるのですが、スタイル指定の仕方が間違っているのでしょうか。
普通に表示させるための何か迂回策などあるでしょうか。

解決

Consoleでスタイルつけるとブロック化されるのか何かで括られたような挙動になります。
FireFoxではスタイル付きとスタイル無しの間に空白(ブロック区切り?)が開くので
console.log('%ca%cbcndef', 'color:red', 'background-color:#ffffff')
としては如何でしょうか?

Chromeはなぜかブロックが横並びになったような感じになりますね。
console.log("%ca%cbcndef", "background-color:#ffaaaa", "background-color:#aaaaff");
コメントで@sakmas さんが仰っているように不具合のようです。

回答者: user10259

Leave a Reply

Your email address will not be published. Required fields are marked *