浏览器console调试技巧

理论

console支持的常见的占位符有以下几种：

• %s：字符串占位符
• %d：整数占位符
• %f：浮点数占位符
• %o：对象占位符(注意是字母o，不是数字0)
• %c: CSS样式占位符

在大部分情况下，我们在浏览器中调试DOM结构或者编辑一些文本时，会在Chrome Developer Tools的Elements选项中对DOM节点进行编辑，但是一旦节点过多，会很容易增加调试过程的困难。在控制台中输入下面所示的代码可以将浏览器直接转换为编辑器模式：

document.body.contentEditable = true;

示例

const data = [
  {
    id: 1,
    name: 'zhangsan',
    age: 18,
    sex: 0
  },
  {
    id: 2,
    name: 'lisi',
    age: 20,
    sex: 1
  }
];
console.log(data)
console.log("用户信息:%o",data) // %o：对象占位符
console.table(data)

结果：