# 学习使用花里胡哨的Console

# 基础方法

# Console.assert()

判断第一个参数是否为真,false 的话抛出异常并且在控制台输出相应信息。

# Console.clear()

清空控制台,并输出 Console was cleared。

# Console.count()

以参数为标识记录调用的次数,调用时在控制台打印标识以及调用次数。

# Console.countReset()

重置指定标签的计数器值。

# Console.debug()

在控制台打印一条 "debug" 级别的消息。

# Console.dir()

显示一个由特定的 Javascript 对象列表组成的可交互列表。这个列表可以使用三角形隐藏和显示来审查子对象的内容。

# Console.dirxml()

打印 XML/HTML 元素表示的指定对象,否则显示 JavaScript 对象视图。

# Console.error()

打印一条错误信息,使用方法可以参考 string substitution。

# Console.group()

创建一个新的内联 group, 后续所有打印内容将会以子层级的形式展示。调用 groupEnd()来闭合组。

# Console.groupCollapsed()

创建一个新的内联 group。使用方法和 group() 相同,不同的是,groupCollapsed() 方法打印出来的内容默认是折叠的。调用groupEnd()来闭合组。

# Console.groupEnd()

闭合当前内联 group。

# Console.info()

打印资讯类说明信息,使用方法可以参考 string substitution。

# Console.log()

打印内容的通用方法,使用方法可以参考 string substitution。

# Console.table()

将列表型的数据打印成表格。

# Console.time()

启动一个以入参作为特定名称的计时器,在显示页面中可同时运行的计时器上限为10,000.

# Console.timeEnd()

结束特定的 计时器 并以豪秒打印其从开始到结束所用的时间。

# Console.timeLog()

打印特定 计时器 所运行的时间。

# Console.timeStamp()

添加一个标记到浏览器的 Timeline 或 Waterfall 工具。

# Console.trace()

输出一个 stack trace。

# Console.warn()

打印一个警告信息,可以使用 string substitution 和额外的参数。

# 定义样式

例如:

console.log("This is %cMy stylish message", "color: yellow; font-style: italic; background-color: blue;padding: 2px");

%c 语法可用的属性如下 (至少在 Firefox 中是这样,别的浏览器会有诸多不同):

  • background 与其全写版本。
  • border 与其全写版本。
  • border-radius
  • box-decoration-break
  • box-shadow
  • clear 和 float
  • color
  • cursor
  • display
  • font 与其全写版本。
  • line-height
  • margin
  • outline 与其全写版本。
  • padding
  • text-transform 这类 text-* 属性
  • white-space
  • word-spacing 和 word-break
  • writing-mode

注意

注意: 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果,你应当这样设置display: inline-block.。

发布日期: 1/4/2021, 3:15:05 AM