- 1. 用 ES6 解构赋值输出变量名
- 3.过滤日志消息
- 4. 使用 printf-type 的信息
- 5. 带样式的风格
- 6. 使用类似测试的断言
- 7. 运行堆栈跟踪
- 8. 组日志消息
- 9. 使用定时器
- 10. 按名称调试和监控函数
- 11. 查找和修复事件监听器
- 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 相关的方法,建议收藏!方法是很多,根据情况自己选着用。