Javascript 中的 console.log 和 CSS

在开发网页时，我们经常需要在控制台中输出调试信息，以便检查代码的正确性。在Javascript中，我们可以使用console.log()来输出信息。此外，我们也可以使用console中的一些CSS样式，以便更好地区分不同的信息类型。

console.log

console.log()是Javascript中常用的一个函数，它接收一个或多个参数，并将它们输出到控制台中。常用的语法格式如下：

console.log(arg1, arg2, ..., argN);

其中，arg1至argN是输出的参数，可以是字符串，数值，变量，对象等。例如：

console.log("Hello world!");    // 输出：Hello world!
console.log(42);                // 输出：42
console.log([1, 2, 3]);         // 输出：[1, 2, 3]

如果我们想同时输出多个参数，可以使用逗号隔开：

console.log("name:", "John", "age:", 30);   // 输出：name: John age: 30

console中的CSS样式

在console.log()中，我们可以使用console中的一些CSS样式，以便更好地区分不同的信息类型。常用的console样式有以下几种：

文字颜色

我们可以通过设置%c占位符，将后面的文字输出颜色设置为我们想要的颜色。常用的颜色包括：黑色（black），白色（white），红色（red），绿色（green），蓝色（blue），黄色（yellow），紫色（purple），灰色（gray）等。例如：

console.log('%cHello world!', 'color: red');  // 红色
console.log('%cHello world!', 'color: green'); // 绿色

背景颜色

我们可以通过设置%c占位符，将后面的文字输出背景颜色设置为我们想要的颜色。例如：

console.log('%cHello world!', 'background-color: yellow');  // 黄色背景
console.log('%cHello world!', 'background-color: purple; color: white'); // 紫色背景

字体大小

我们可以通过设置%c占位符，将后面的文字输出字体大小设置为我们想要的大小。例如：

console.log('%cHello world!', 'font-size: 24px');  // 字体大小为24px
console.log('%cHello world!', 'font-size: 48px; color: blue'); // 字体大小为48px，颜色为蓝色

其他样式

还有一些其他的样式可以让我们输出的信息更加醒目，例如：

• font-weight: bold：加粗
• text-shadow：文字阴影
• text-decoration: underline：下划线

示例代码

console.log('%cHello world!', 'color: red');
console.log('%cHello world!', 'background-color: yellow');
console.log('%cHello world!', 'font-size: 24px');
console.log('%cHello world!', 'font-size: 48px; color: blue');
console.log('%cHello world!', 'font-weight: bold; text-shadow: 1px 1px 1px #ccc');
console.log('%cHello world!', 'text-decoration: underline');

以上代码将输出如下结果：

Markdown代码：

## console.log

`console.log()`是Javascript中常用的一个函数，它接收一个或多个参数，并将它们输出到控制台中。常用的语法格式如下：

```javascript
console.log(arg1, arg2, ..., argN);

其中，arg1至argN是输出的参数，可以是字符串，数值，变量，对象等。例如：

console.log("Hello world!");    // 输出：Hello world!
console.log(42);                // 输出：42
console.log([1, 2, 3]);         // 输出：[1, 2, 3]

如果我们想同时输出多个参数，可以使用逗号隔开：

console.log("name:", "John", "age:", 30);   // 输出：name: John age: 30

console中的CSS样式

在console.log()中，我们可以使用console中的一些CSS样式，以便更好地区分不同的信息类型。常用的console样式有以下几种：

文字颜色

我们可以通过设置%c占位符，将后面的文字输出颜色设置为我们想要的颜色。常用的颜色包括：黑色（black），白色（white），红色（red），绿色（green），蓝色（blue），黄色（yellow），紫色（purple），灰色（gray）等。例如：

console.log('%cHello world!', 'color: red');  // 红色
console.log('%cHello world!', 'color: green'); // 绿色

背景颜色

我们可以通过设置%c占位符，将后面的文字输出背景颜色设置为我们想要的颜色。例如：

console.log('%cHello world!', 'background-color: yellow');  // 黄色背景
console.log('%cHello world!', 'background-color: purple; color: white'); // 紫色背景

字体大小

我们可以通过设置%c占位符，将后面的文字输出字体大小设置为我们想要的大小。例如：

console.log('%cHello world!', 'font-size: 24px');  // 字体大小为24px
console.log('%cHello world!', 'font-size: 48px; color: blue'); // 字体大小为48px，颜色为蓝色

其他样式

还有一些其他的样式可以让我们输出的信息更加醒目，例如：

• font-weight: bold：加粗
• text-shadow：文字阴影
• text-decoration: underline：下划线

示例代码

console.log('%cHello world!', 'color: red');
console.log('%cHello world!', 'background-color: yellow');
console.log('%cHello world!', 'font-size: 24px');
console.log('%cHello world!', 'font-size: 48px; color: blue');
console.log('%cHello world!', 'font-weight: bold; text-shadow: 1px 1px 1px #ccc');
console.log('%cHello world!', 'text-decoration: underline');

以上代码将输出如下结果：