前端调试方法

一些前端调试方法

console

log

console.log() 用于在控制台输出信息。参数类型 String 或 Object

info, warn, error

这三个 API 更多的是给开发人员提供额外的信息，来查看页面的运行情况，更多用于被封装过后的组件或框架中。

// Info
console.info('Hi, This is message')

// warning 警告
console.warn('On, Your operation may cause a security breach!')

// Error 报错
console.error('Shit! Variable does not exist!')

table

console.table()只接受一个数组或者对象, 可以接受一个额外的参数来描述表格的列数。它会把数据通过表格的形式打印出来, 这样我们看数据的时候就能直观了很多。

var array = [
  { name: 'Jack', age: 12 },
  { name: 'Tome', age: 18 },
  { name: 'baka', age: 15 }
];

console.table(array);

group

console.group() 和 console.groupEnd() 是成对出现的，就像我们使用的标签一样。
console.group()在控制台创建一个新的分组, 输出到控制台上的内容都会被添加一个缩进, 表示该内容属于当前分组, 直到调用 console.group() 之后, 当前分组才结束。

var boys = [
  { name: 'Jack', age: 12 },
  { name: 'Tom', age: 18 },
  { name: 'Rose', age: 15 }
]

boys.forEach(item => {
  console.group(`${item.name}`)
  console.log(`This is ${item.name}`);
  console.log(`${item.name} is ${item.age} years old`);
  console.log(`${item.name} is ${item.age * 7} years old`);
  console.groupEnd(`${item.name}`)
})

原文出自：作者：anran758 来源：知乎