格式化控制台输出

许多控制台的打印方法也可以使用%令牌处理类似 C 的字符串格式

console.log('%s has %d points', 'Sam', 100);

显示 Sam has 100 points

Javascript 中的格式说明符的完整列表是:

输出
%s 将值格式化为字符串
%i%d 将值格式化为整数
%f 将值格式化为浮点值
%o 将值格式化为可扩展 DOM 元素
%O 将值格式化为可扩展的 JavaScript 对象
%c 将 CSS 样式规则应用于第二个参数指定的输出字符串

高级造型

当 CSS 格式说明符(%c)放在字符串的左侧时,print 方法将接受带有 CSS 规则的第二个参数,该参数允许对该字符串的格式进行细粒度控制:

console.log('%cHello world!', 'color: blue; font-size: xx-large');

显示:

StackOverflow 文档

可以使用多个%c 格式说明符:

  • %c 右侧的任何子字符串在 print 方法中都有相应的参数;
  • 如果不需要将 CSS 规则应用于相同的子字符串,则此参数可以是 emtpy 字符串;
  • 如果两个%c 格式说明找到,1 (在%c 包裹)和 2 字符串将在 2 中所定义他们的规则 第二 和 3 分别打印方法的参数。
  • 如果三个%c 格式说明找到,则 1 ,2 和 3 的子字符串将在 2 中所定义他们的规则 ND ,3 和 4 分别的参数,等等…
console.log("%cHello %cWorld%c!!", // string to be printed
            "color: blue;", // applies color formatting to the 1st substring
            "font-size: xx-large;", // applies font formatting to the 2nd substring
            "/* no CSS rule*/" // does not apply any rule to the remaing substring
);

显示:

StackOverflow 文档

使用组缩进输出

可以使用以下方法在调试控制台的可折叠组中对输出进行设计和封装:

  • console.groupCollapsed() :创建一个折叠的条目组,可以通过公开按钮进行扩展,以显示调用此方法后执行的所有条目;
  • console.group() :创建一个扩展的条目组,可以折叠这些条目,以便在调用此方法后隐藏条目。

可以使用以下方法删除后验条目的标识:

  • console.groupEnd() :退出当前组,允许在调用此方法后在父组中打印较新的条目。

可以级联组以允许多个同名的输出或可折叠的图层彼此:

StackOverflow 文档 = Collapsed group expanded => StackOverflow 文档