4

スタイル付きconsole.log

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

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


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


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

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

4
  • 4
    ワークアラウンドは不明ですが、Chromiumのバグとして報告されているようです。 bugs.chromium.org/p/chromium/issues/detail?id=810581
    – sakmas
    Commented 2018年4月12日 4:07
  • 1
    Consoleでスタイルつけるとブロック化されるのか何かで括られたような挙動になります。FireFoxではスタイル付きとスタイル無しの間に空白(ブロック区切り?)が開くのでconsole.log('%ca%cbc\ndef', 'color:red', 'background-color:#ffffff')としては如何でしょうか?Chromeはなぜかブロックが横並びになったような感じになりますね。console.log("%ca%cbc\ndef", "background-color:#ffaaaa", "background-color:#aaaaff");
    – user10259
    Commented 2018年4月12日 4:26
  • 確かにFirefoxは何かしらスタイル付けると空白消えますね。 color:blackあたりを付けることにします。 Chromeはしょうがないので素直にバグ修正を待ちます。 ところでコメントだと完了チェック付けられないですね...
    – tkrkt
    Commented 2018年4月12日 5:35
  • @tkrkt 完全ではないですが、回答として投稿しなおしておきました。
    – user10259
    Commented 2018年4月12日 6:34

1 件の回答 1

1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。