每个前端开发都会使用JavaScript控制台进行日志记录或调试，掌握这些console小技巧，可以提高开发的效率。

console.trace()

console.trace()的工作原理与console.log()完全相同，但它可以输出整个堆栈的跟踪，因此可以确切定位到问题的所在

const outer = () => {
     const inner = () => console.trace("Hello");
     inner();
};

outer();
复制代码

console.dir()

console.dir()可以显示一个对象所有的属性和方法

console.dir(document.body);
复制代码

console.group()

console.group()允许将日志分组为可折叠的结构，当有多个日志时特别有用

console.group("Outer");          // Create a group labelled 'Outer'
console.log("Hello");            // Log inside 'Outer'
console.groupCollapsed("Inner"); // Create a group labelled 'Inner', collapsed
console.log("Hellooooo");        // Log inside 'Inner'
console.groupEnd();              // End of current group, 'Inner'
console.groupEnd();              // End of current group, 'Outer'
console.log("Hi");
复制代码

记录类

除了有console.log()，还有console.debug()，console.info()，console.warn()和console.error()

console.debug("Debug");
console.info("Info");
console.warn("Warning");
console.error("Error");
复制代码

console.assert()

console.assert()提供了一种简便的方法，仅在断言失败时（即，当第一个参数为时false）将某些内容记录为错误，否则将完全跳过该记录

const age = 18;

console.assert(age === 18, "年龄不是18");
console.assert(age === 20, "年龄不是20");
复制代码

console.count()

可以使用console.count()用来计算一段代码执行了多少次

Array.from({ length: 4 }).forEach(
     () => console.count("items") // 使用items标记，可以是任意字符串
);
console.countReset("items");
复制代码

console.time()

console.time()提供了一种快速的方法来检查代码的性能，但由于其准确性较低，因此不建议用于真正的测试，推荐使用Performance

console.time("slow"); //启动计时器
console.timeLog("slow"); // 记录计时器的值
console.timeEnd("slow"); //停止并记录计时器
复制代码

控制台的css

可以在console.log()中使用%c字符串包裹其他字符串，这样可以将CSS使用于日志的各个部分

console.log(
     "改变 %cconsole log%c %c的样式%c!", // 需要格式化的字符串   
     // 使用 %c
     "color: #fff; background: #1e90ff; padding: 4px", // 应用样式
     "", // 清除所有样式
     "color: #f00; font-weight: bold", // 应用样式
     "" // 清除所有样式
);
复制代码