如何使用CSS在JavaScript控制台上自定义调试

Google chrome和Mozilla Firefox允许你使用console.log方法自定义控制台中的消息。但是, 这有什么用呢？好吧, 我不能给你一个正确的答案, 但是我认为你会使用它来使调试消息看起来更酷。

要使用css进行定制, 我们将使用％c [characters]标识符在第一个参数的字符串中启用此功能, 第二个参数将是将应用于消息的css字符串, 例如：

console.log('%cThe library says : you rocks !', 'background: #005454; color: #BFF8F8');

前面的代码应该输出类似：

你甚至可以在1条消息中使用CSS不同的字符串进行组合和自定义, 标识符％c可以帮助控制台将字符串与另一个字符串区分开：

％c这是第一个块, ％cHere开始第二个块, ％cHere是第三个块

所有字符串都需要封装在console.log函数的第一个参数中, 然后其他参数分别封装为css字符串, 例如：

console.log("%cString1 "+"%cString2", "color:blue;", "color:orange;");

前面的代码应该输出类似：

在Google Chrome和Firefox(旧版-32)中, 此功能不可用, 但是有些默认的控制台功能已经过自定义：

console.info("Important information"); // displays a blue circle with an i before the string
console.warn("Warning, don't do that"); // displays a white triangle (warning symbol) with an exclamation character

并且应该看起来像：

尽管仅使用css来定制日志消息是非常令人印象深刻的, 但是还有比这更令人印象深刻的事情！使用标记自定义日志, 但是该功能是通过库实现的。

该库为Log, 你可以在此处查看有效的演示。然后, 你将能够插入标记(在此处了解有关标记的更多信息)作为log函数的第一个参数：

log('this is *italic string*'); // output italic string with italic style
log('this is [c="color: red"]red[c] and this is [c="color: blue"]blue[c]');