12种 console 相关的方法，帮你快速提高调试效率！

来源：.openreplay

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。

我现在在调试代码的时候基本用的都是console.log() 调试法，虽然低级，但好用呀。当然，遇到复杂点的就会借助其它工具，但日常开发中 console.log() 基本够用了。

前缀铺垫的差不多了，今天我们来看看 console.log() 中还有哪些花里胡哨的写法。

1. 用ES6解构赋值输出变量名

如果打印多个值的，为了区别我们一般会连同变量名打印出来:

const variableX = 42;

console.log(‘variableX:’, variableX);

// 或者

console.log(variableX: ${ variableX });

其实，还有一种很简洁的方式就是使用解构的方式：

const variableX = 42;

console.log({ variableX }); // { variableX: 42 }

2. 使用适当的打印类型

console.log() 一般这样用：

console.log(‘no-frills log message’);

但它不是唯一的类型。消息可以被归类为information （其处理方式与console.log()相同）。

console.info(‘this is an information message’);

警告：

console.warn(‘I warned you this could happen!’);

错误：

console.error(‘I’m sorry Dave, I’m afraid I can’t do that’);

或不太重要的调试信息:

console.debug(‘nothing to see here - please move along’);

console.table()可以以更友好的格式输出对象的值。

const obj = {

propA: 1,

propB: 2,

propC: 3

};

console.table( obj );

或对象的数组:

const arr2 = [

{ a: 1, b: 2, c: 3 },

{ a: 4, b: 5, c: 6 },

{ a: 7, b: 8, c: 9 }

];

console.table( arr2 );

其他选项包括:

• console.dir( obj ) 显示一个 JS 对象的交互式属性列表

• console.dirxml( element ) 显示指定的HTML或XML节点的子代元素的互动树。

• console.clear() 清除控制台之前的所有信息。

3.过滤日志消息

浏览器以适当的颜色显示日志信息，但也可以进行过滤，以显示特定的类型。点击控制台窗格左上方的图标，就可以打开Chrome的侧边栏。

注意，console.debug()信息只有在查看 verbose 选项时才会显示。

4. 使用 printf-type 的信息

所有的日志类型都可以使用c 语言风格的printf消息格式，该格式定义了一个模板，其中包含一个变量被替换的%指示器。例如

console.log(

‘The answer to %s is %d.’,

‘life, the universe and everything’,

42

);

// The answer to life, the universe and everything is 42.

带样式的风格

console.log(

‘%cOK, things are really bad now!’,

`

font-size: 2em;

padding: 0.5em 2em;

margin: 1em 0;

color: yellow;

background-color: red;

border-radius: 50%;

`

);

控制台中的结果:

6. 使用类似测试的断言

类似于测试的console.assert()命令可以用来在条件失败时输出一个信息。可以用一个条件和一个或多个对象来定义断言，当该条件失败时输出，例如

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总