前端快速提高调试效率的12种 console 相关的方法(建议收藏)

1. 1. 用 ES6 解构赋值输出变量名
• 2. 使用适当的打印类型
2. 3.过滤日志消息
3. 4. 使用 printf-type 的信息
4. 5. 带样式的风格
5. 6. 使用类似测试的断言
6. 7. 运行堆栈跟踪
7. 8. 组日志消息
8. 9. 使用定时器
9. 10. 按名称调试和监控函数
10. 11. 查找和修复事件监听器
11. 12. 复制属性到剪贴板
12. 结语

我现在在调试代码的时候基本用的都是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 );

12. 复制属性到剪贴板

控制台的copy()命令可以复制任何值到剪贴板。它可以是一个原始值、数组、对象或 DOM 节点。

当传递一个 DOM 节点时，copy()将该元素及其所有子元素的 HTML 放在剪贴板上。这与右键点击一个节点并选择复制，然后选择复制外层 HTML 是一样的。

命令 copy( document.documentElement ) 复制整个 HTML 文档。 这可以粘贴到文本编辑器中并进行美化增强可读性。

结语

以上就是今天为大家分享的前端快速提高调试效率的 12 种 console 相关的方法，建议收藏！方法是很多，根据情况自己选着用。