遇见前端

Appearance

本页目录

console使用方法大全 ​

前言 ​

对于一个前端开发来说console一定是开发过程中最常用的调试工具了，查看接口返回结果、查看执行状态、验证参数的正确性等等，那么对于console来说难道只有log一个实例方法吗，一起来看看console都有哪些不一样的神奇用法。

以下知识来源自MDNhttps://developer.mozilla.org/zh-CN/docs/Web/API/console

实例方法目录 ​

  • log
  • info
  • warn
  • error
  • clear
  • count
  • countReset
  • debug
  • dir
  • dirxml
  • group
  • groupCollapsed
  • groupEnd
  • table
  • time
  • timeEnd
  • timeLog
  • trace

实例方法使用介绍 ​

使用字符串替换 ​

对于console对象使用较多的四个方法log/error/info/warn，是支持字符串文本替换的，asset经过测试也是支持的,可以在传递给 console 的方法的时候使用下面的字符以期进行参数的替换。

替换字符的标记描述信息
%o 或 %O打印 JavaScript 对象。在审阅器点击对象名字可展开更多对象的信息。
%d 或 %i打印整数。支持数字格式化。例如，console.log("Foo %.2d", 1.1) 会输出有先导 0 的两位有效数字：Foo 01。
%s打印字符串。
%f打印浮点数。支持格式化，比如 console.log("Foo %.2f", 1.1) 会输出两位小数：Foo 1.10

log 普通信息、info 提示性信息、warn 警告信息、 Error错误信息 ​

ts
console.log('普通信息')
console.info('提示性信息')
console.warn('警告信息')
console.error('错误信息')

如图所示图片

打印一个或者多个参数，并尝试使用字符串替换方法

ts
console.log('%c普通信息', 'color: green', 1, { name: 'hello' }, Symbol(1))
console.info('%c提示性信息', 'color: green', 1, { name: 'hello' }, Symbol(1))
console.warn('%c警告信息', 'color: green', 1, { name: 'hello' }, Symbol(1))
console.error('%c错误信息', 'color: green', 1, { name: 'hello' }, Symbol(1))

由上图可视，使用字符串标记替换文，必须跟在需要替换字符串后边，不能隔开。

测试占位符替换字符串 ​

ts
console.log('普通信息, 字符串占位符是%s， 数字占位符是%d，对象占位符是%o，样式占位符%c：修改的样式', '我是s', 22, { name: '你好世界~' }, 'color: green;font-size: 20px;padding: 10px; border-radius: 4px;background: lightblue;')
console.info('提示性信息, 字符串占位符是%s， 数字占位符是%d，对象占位符是%o，样式占位符%c：修改的样式', '我是s', 22, { name: '你好世界~' }, 'color: green;font-size: 20px;padding: 10px; border-radius: 4px;background: lightblue;')
console.warn('警告信息, 字符串占位符是%s， 数字占位符是%d，对象占位符是%o，样式占位符%c：修改的样式', '我是s', 22, { name: '你好世界~' }, 'color: green;font-size: 20px;padding: 10px; border-radius: 4px;background: lightblue;')
console.error('错误信息, 字符串占位符是%s， 数字占位符是%d，对象占位符是%o，样式占位符%c：修改的样式', '我是s', 22, { name: '你好世界~' }, 'color: green;font-size: 20px;padding: 10px; border-radius: 4px;background: lightblue;')

测试占位符替换字符串

经测试 %c/%s/%d/%o,必须按照顺序书写，不然无效

另外根据MDN提示，%c支持的样式如下：

样式名称说明
background背景
border边框
border-radius圆角
box-decoration-breakbox-decoration-break 属性用来定义当元素跨多行、多列或多页时，元素的片段应如何呈现，蛮有意思的可以自己尝试拓展一下玩玩
box-shadow阴影
clear& float浮动以及浮动清除
color字体颜色
cursor鼠标类型
display元素属性
font字体相关简写，也可以是全写例如font-size、font-weight等
line-height行高
margin外边距
padding内边距
outline外框线
text-*文本属性
word-spacing & word-break文本换行
writing-modewriting-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）

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

console.clear() ​

console.clear() 方法会清空控制台，但前提是该控制台允许清空。像浏览器运行的图形控制台就允许清空，而像 Node 运行的终端上显示的控制台则不支持它，调用该方法将不会产生任何效果（也不会报错）。

console.count & console.countReset ​

console.count() 方法会记录调用 count() 的次数。

console.countReset(label) 方法会重新标记count的次数。 如果提供了参数label，此函数会重置与 label 关联的计数。 如果省略了参数label，此函数会重置默认的计数器。

ts
let start = 0

function say() {
  console.count()

  return start++
}
say()
say()
say()
say()

console.countReset()

console.count()

// 返回顺序
// 1
// 2
// 3
// 4
// 重置
// 1