设置console.log的颜色和变量，包括未格式化的文本

Question

问题

我编写了一个函数来演示如何以多种方式设置Chrome开发者控制台console.log（）消息的格式。但是，我遇到的麻烦是在左侧使用配色方案打印了一个变量，然后在中间没有样式的情况下打印了一个字符串，然后是另一个已设置样式的变量。这是一个图形说明：

此外，此HTML / CSS代码还将演示我正在尝试在开发人员控制台中生成的内容：

    <p>Array values printed out (equals sign not formatted):</p>

    <span style="background: #ffa600; color: #ffe4b3;">Array[index0]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.google.com</span><br>
    <span style="background: #ffa600; color: #ffe4b3;">Array[index1]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.pinterest.com</span><br>
    <span style="background: #ffa600; color: #ffe4b3;">Array[index2]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.facebook.com</span><br>


    <p>Multiple combinations of formatted and non formatted text:</p>
    <p>
        <span style="background:red;">Red</span>
        <span> and </span>
        <span style="background:aliceblue">AliceBlue</span>
        <span> OR </span>
        <span style="color:forestgreen; font-style: italic; font-weight: bold;">Forest Green</span>
        <span style="background: orange">Orange</span>
        <span>, also this: <span>
        <span style="background:pink; color: brown">  Error Styling </span>
        <span>, etc ...</span>
    </p>

我尝试过的没有用

来自JavaScript控制台“颜色”中 christianvuerings的以下代码可以连续打印两种不同的样式：

console.log("%cHello, "+"World","color:red;","color:blue;")

我的尝试基于该代码。麻烦在于，克里斯蒂安的代码没有考虑将非格式化代码夹在格式化代码之间，也没有考虑多个变量。我做了很多尝试来找到正确的代码和顺序组合，但是（对我而言）最有前途的三个是：

console.log("%c%s"+" is "+"%c%d"+"years old.", "color:red","Bob", "color:blue", 42).

console.log("%c%s"," is ","%c%d","years old.", "color:red","Bob", "color:blue", 42).

console.log("%c%s is %c%d years old.", "color:red", "Bob", "color:blue", 42).

我的问题

如何在同一行上同时打印具有格式化和未格式化代码的多个组合的console.log（）消息？

Answer 1

为了console.log()进行格式化，以便它允许在同一行中显示格式化和未格式化的文本，您必须在格式化的CSS之后“重置”更改的CSS。例如，要使日志以如下代码所示的格式显示

<span style="background: #ffa600; color: #ffe4b3;">Array[index0]</span> = <span style="background: yellow; color: black; font-style: italic;">http://www.google.com</span>

您将需要如下所示的console.log（）调用：

码

console.log("%c%s%c = %c%s","background:orange", "Array[index0]", "background:inherit;", "background:yellow;font-style: italic;", "google.com")

结果

请注意，在将第一个字符串插入字符串后，如何插入另一个%c格式化程序，并为其赋予其值以background:inherit重置元素背景，使它们从浏览器中控制台定义的css继承颜色。那是您的代码中唯一缺少的东西。