みかづきブログ・カスタム

基本的にはちょちょいのほいです。

ディベロッパーツールに画像を出力する 📷

特に使いどころのない技なのですが、どうしてもディベロッパーツールに画像を出力したい場合。

❶ 複数行の空文字を出力
❷ paddingで幅をいい感じにする
❸ 背景画像を設定

という手順で出力できます。

f:id:kimizuka:20201005234913p:plain


DEMO


See the Pen
Display images on the console
by kimmy (@kimmy)
on CodePen.




JavaScript

console.log("\n\n\n\n\n\n\n\n\n");
console.log("%c ", "padding: 114px; background:url(data:image/png;base64,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) center no-repeat; background-size:contain");
console.log("\n\n\n\n\n\n\n\n\n\nHELLO!");