有什么方法可以检测浏览器控制台是否能够呈现颜色？答案

【问题标题】：Any way of detecting whether a browsers console is able to render colors?有什么方法可以检测浏览器控制台是否能够呈现颜色？
【发布时间】：2013-05-05 07:19:42
【问题描述】：

有没有办法检查浏览器是否能够在不嗅探的情况下使用控制台颜色？

console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

例如，在 chrome 26+ 和 firebug 中将打印彩色输出。

【问题讨论】：

为什么需要在 consol 中打印颜色？它仅用于调试目的
我正在用js构建一个调试工具...
为什么只问“你为什么需要……”的人会得到 +1？我讨厌这个问题！为什么与某人需要某样东西有关？

标签： javascript console

【解决方案1】：

这是浏览器版本检测似乎是有效方法的少数情况之一。为了尽量减少这种方法的危险，请确保使用黑名单而不是白名单，无论现在感觉多么不直观（以确保您不会像许多旧的以 netscape 为重点的代码一样遗漏新的未来浏览器）。我知道这不是您想听到的答案，但由于console.log 是本机功能，因此无法观察到它的效果，所以据我所知，唯一的选择是进行浏览器版本检测.

【讨论】：

浏览器检测？ Firefox 不支持颜色，而 Firebug 支持。
我认为这很明显，但您可以使用 (window.console.firebug || window.console.exception) 检查是否使用了 firebug 控制台。第一个适用于较旧的 firebug 版本，但遗憾的是 firebug 决定删除此 code.google.com/p/fbug/issues/detail?id=4772
您也可以通过console.__mozillaConsole__检测Firefox的内置控制台。

【解决方案2】：

我写了 Console.js https://github.com/icodeforlove/Console.js 让我们更容易做到这一点

Console.styles.register({
  red: 'color: red',
  underline: 'text-decoration: underline',
  bold: 'font-weight: bold'
});

那么你可以这样做

console.log('red text '.red + 'red underlined text'.red.underline + 'red bold text'.red.bold);

它会像这样优雅地降级

【讨论】：

不错的库，你是如何检测颜色是否可以使用的？
@lededje 不幸的是浏览器检测 (github.com/icodeforlove/Console.js/blob/master/src/…)
不错的库，但没有回答问题。只有评论才能回答问题。
此时控制台内的颜色支持率超过 95%。当这个问题最初被问到时，它不到 40%。答案是用户代理嗅探。从那时起，上面列出的库从支持旧版浏览器转变为仅使用现代 API，并使样式更容易。