Chrome 开发者控制台中不同颜色的变量类型是什么？答案

【问题标题】：What are the variable types for different colors in Chrome Developer Console?Chrome 开发者控制台中不同颜色的变量类型是什么？
【发布时间】：2015-11-02 11:33:11
【问题描述】：

Chrome 开发者控制台打印出变量console.log(variable) 的值根据变量的类型使用不同的颜色。例如，string 值为黑色，null 值为灰色。

是否有文档说明这些是如何定义的？
是否可以为不同的值类型修改自定义颜色？喜欢基本的控制台消息：console.log("%cBlue!", "color: blue;")

类型的默认颜色是固定的：

字符串值为黑色
null/undefined 是灰色的
数值为蓝色
布尔值是蓝色的
对象/数组值是黑色的（前面的箭头）
对象/数组属性为紫色
对象/数组属性字符串值为红色（引号）

您可以使用格式化程序修改某些类型（字符串、整数、浮点数）的输出，但您必须事先知道类型：https://developer.chrome.com/devtools/docs/console-api#consolelogobject-object

目前似乎无法为具有自动类型检测的类型。

【问题讨论】：

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

是否有文档说明这些是如何定义的？

是的。可以查看devtoolshere提供的所有控制台api。

是否可以为不同的值类型修改自定义颜色？

没有。您只能使用 api。 API 不是通用的，不能添加您自己的颜色或格式。基于日志的类型或任何使用适当的 api。喜欢console.log 或console.dirxml 等查看链接以获取更多api。

【讨论】：

找不到 console.log 的值类型和颜色。是的，您可以在控制台中修改颜色，例如：console.log("%cBlue!", "color: blue;");
是的，您可以使用自己的 css 样式打印字符串，例如 console.log("%csome text!", "color: Orange; font-weight:bold;text-decoration: underline;");，在此处查看格式化程序 developer.chrome.com/devtools/docs/…。但是您不能配置或更改问题中所述的默认行为 字符串值为黑色，空值为灰色。 正如文档本身所说，它仅适用于字符串 字符串替换和格式化 .所以改变 number/null/undefined 的颜色不在我们的控制范围内。

【解决方案2】：

按照 chrome doc 获取与控制台相关的所有信息

https://developer.chrome.com/devtools/docs/tips-and-tricks

【讨论】：