blocks|key|4652725|text|可以，您可以使用以下内容设置console.log()的格式：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4652726|console.log("%25cExtra+Large+Yellow+Text+with+Red+Background",+"background:+red;+color:+yellow;+font-size:+x-large");|code-block|syntax|javascript|4652727|注意第一个参数中文本之前的%25c和第二个参数中的样式规范。文本将看起来像您的示例。|4652728|有关详细信息，请参阅Google's+"Styling+Console+Output+with+CSS"或FireBug's+Console+Documentation。|4652729|文档链接还包括其他一些巧妙的技巧，比如在控制台日志中包含对象链接。|4652730|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css|1|http://getfirebug.com/wiki/index.php/Console.log^0|E|D|0|0|D|2|0|A|16|0|1H|V|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]|$9|1B|A|1C|1|1D]]|E|$]]|$1|O|3|P|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

Yes, you can format the <code>console.log()</code> with something like this:

<pre><code>console.log("%cExtra Large Yellow Text with Red Background", "background: red; color: yellow; font-size: x-large");
</code></pre>

Note the <code>%c</code> preceding the text in the first argument and the style specifications in the second argument. The text will look like your example.

See <a href="https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css" rel="noreferrer">Google's "Styling Console Output with CSS"</a> or <a href="http://getfirebug.com/wiki/index.php/Console.log" rel="noreferrer">FireBug's Console Documentation</a> for more details.

The documentation links also include some other neat tricks like including object links in a console log as well.

blocks|key|4652763|text|来自谷歌网站：site|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4652764|console.log("%25cThis+will+be+formatted+with+large,+blue+text",+"color:+blue;+font-size:+x-large");|code-block|syntax|javascript|4652765|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css^0|7|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

From Google's website: <a href="https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css" rel="nofollow noreferrer">site</a>

<pre><code>console.log("%cThis will be formatted with large, blue text", "color: blue; font-size: x-large");
</code></pre>

blocks|key|4652799|text|还可以设置子字符串的格式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4652800|var+red+=+'color:red';
var+blue+=+'color:blue';
console.log('%25cHello+%25cWorld+%25cfoo+%25cbar',+red,+blue,+red,+blue);|code-block|syntax|javascript|4652801|​|4652802|📷|atomic|offset|length|4652803|4652804|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/1aa36312be599d8b79a63130ae9320ce.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

You can also format substrings.

<pre><code>var red = 'color:red';
var blue = 'color:blue';
console.log('%cHello %cWorld %cfoo %cbar', red, blue, red, blue);
</code></pre>

<a href="https://i.stack.imgur.com/HbGoJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HbGoJ.png" alt="enter image description here"></a>

blocks|key|146228|text|只需扩展其他答案，您就可以重用选择器、类、元素等现有css样式。在SO控制台窗口中尝试此操作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|146229|const+customLog+=+(message,+cssSelector)+=>
++console.log(
++++`%25c${message}`,
++++Object.entries(getComputedStyle(document.querySelector(cssSelector)))
++++++.map(([k,+v])+=>+`${k}:${v}`)
++++++.join(";")
++);

customLog("Hello+StackOverflow",+"#question-header+>+div+>+a");

customLog("Hello+StackOverflow",+"strong");

customLog("Hello+StackOverflow",+"a");|code-block|syntax|javascript|146230|​|146231|📷|atomic|offset|length|146232|146233|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/93c80cb12b569313096201eceb570dbf.png|imageAlt^0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|10|8|@]|9|@$L|11|M|12|1|13]]|A|$]]|$1|N|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V|W|-4]]]]

Just extending other answers and you can reuse the existing css style of selector, class, element. Try this in SO console window.
<pre><code>const customLog = (message, cssSelector) =&gt;
 console.log(
 `%c${message}`,
 Object.entries(getComputedStyle(document.querySelector(cssSelector)))
 .map(([k, v]) =&gt; `${k}:${v}`)
 .join(&quot;;&quot;)
 );

customLog(&quot;Hello StackOverflow&quot;, &quot;#question-header &gt; div &gt; a&quot;);

customLog(&quot;Hello StackOverflow&quot;, &quot;strong&quot;);

customLog(&quot;Hello StackOverflow&quot;, &quot;a&quot;);
</code></pre>
<a href="https://i.stack.imgur.com/EQ55f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EQ55f.png" alt="enter image description here" /></a>

I 'waddled' by the Console in Chrome on Facebook today. 
Surprisingly I got this message in the console. 
<img src="https://i.imgur.com/sFWLCkr.png" alt=""> 
Now my question is: How is this possible? 
I know that there are a few 'exploit' methods for the console, but how can you make such font formatting in the console? (and is it console.log?)

How do I create formatted javascript console log messages

今天我在Facebook的Chrome控制台上“摇摇摆摆”。令人惊讶的是，我在控制台上收到了这条消息。现在我的问题是：这怎麽可能？我知道控制台有一些“利用”的方法，但是你如何在控制台中设置这样的字体格式呢？(它是console.log吗？)

问如何创建格式化的javascript控制台日志消息
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建格式化的javascript控制台日志消息EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建格式化的javascript控制台日志消息
EN