文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

12种 Console 相关的方法,帮你快速提高调试效率!

2024-12-14 00:58

关注

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

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

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

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

  1. const variableX = 42; 
  2. console.log('variableX:', variableX); 
  3. // 或者 
  4. console.log(`variableX: ${ variableX }`); 

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

  1. const variableX = 42; 
  2. console.log({ variableX }); // { variableX: 42 } 

2. 使用适当的打印类型

console.log() 一般这样用:

  1. console.log('no-frills log message'); 

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

  1. console.info('this is an information message'); 

警告:

  1. console.warn('I warned you this could happen!'); 

错误:

  1. console.error('I\'m sorry Dave, I\'m afraid I can\'t do that'); 

或不太重要的调试信息:

  1. console.debug('nothing to see here - please move along'); 

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

  1. const obj = { 
  2.     propA: 1, 
  3.     propB: 2, 
  4.     propC: 3 
  5.   }; 
  6. console.table( obj ); 

或对象的数组:

  1. const arr2 = [ 
  2.     { a: 1, b: 2, c: 3 }, 
  3.     { a: 4, b: 5, c: 6 }, 
  4.     { a: 7, b: 8, c: 9 } 
  5.   ]; 
  6.  
  7. console.table( arr2 ); 

其他选项包括:

3.过滤日志消息

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

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

4. 使用 printf-type 的信息

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

  1. console.log( 
  2.   'The answer to %s is %d.'
  3.   'life, the universe and everything'
  4.   42 
  5. ); 
  6. // The answer to life, the universe and everything is 42. 

带样式的风格

  1. console.log( 
  2.   '%cOK, things are really bad now!'
  3.   ` 
  4.   font-size: 2em; 
  5.   padding: 0.5em 2em; 
  6.   margin: 1em 0; 
  7.   color: yellow; 
  8.   background-color: red; 
  9.   border-radius: 50%; 
  10.   ` 
  11. ); 

控制台中的结果:

6. 使用类似测试的断言

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

  1. console.assert( 
  2.   life === 42, 
  3.   'life is expected to be'
  4.   42, 
  5.   'but is set to'
  6.   life 
  7. ); 

另外,也可以使用一个信息和替换值。

  1. console.assert( 
  2.   life === 42, 
  3.   'life is expected to be %s but is set to %s'
  4.   42, 
  5.   life 
  6. ); 

当条件失败时,这两个选项都会显示一个断言错误。

7. 运行堆栈跟踪

可以使用 console.trace() 输出构成当前执行点的所有函数调用的日志。

  1. function callMeTwo() { 
  2.   console.trace(); 
  3.   return true
  4. function callMeOne() { 
  5.   return callMeTwo(); 
  6. const r = callMeOne(); 

跟踪显示每次调用是哪一行,并且可以在控制台窗格中折叠或展开:

8. 组日志消息

打印日志时,可以在开头使用console.group( label ) 和结尾使用 console.groupEnd() 将日志消息分成命名组。消息组可以嵌套和折叠或展开(console.groupCollapsed( label ) 最初显示处于折叠状态的组):

  1. // start log group 
  2. console.group('iloop'); 
  3.  
  4. for (let i = 3; i > 0; i--) { 
  5.  
  6.   console.log(i); 
  7.  
  8.   // start collapsed log group 
  9.   console.groupCollapsed('jloop'); 
  10.  
  11.   for (let j = 97; j < 100; j++) { 
  12.     console.log(j); 
  13.   } 
  14.  
  15.   // end log group (jloop) 
  16.   console.groupEnd(); 
  17.  
  18.  
  19. // end log group (iloop) 
  20. console.groupEnd(); 

9. 使用定时器

console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要,JavaScript的执行性能也日益受到重视,WEB开发人员知道一些性能测试机器是必须的。

console.time方法是开始计算时间,console.timeEnd 是停止计时,输出脚本执行的时间。

  1. // 启动计时器 
  2. console.time('testForEach'); 
  3.  
  4. // (写一些测试用代码) 
  5.  
  6. // 停止计时,输出时间 
  7. console.timeEnd('testForEach'); 
  8.  
  9. // 4522.303ms 

这两个方法中都可以传人一个参数,作为计时器的名称,它的作用是在代码并行运行时分清楚各个计时器。对console.timeEnd的调用会立即输出执行总共消耗的时间,单位是毫秒。

10. 按名称调试和监控函数

DevTools Sources 面板(或 Firefox 中的调试器)允许打开一个文件,并通过单击行号设置断点。基于chrome的浏览器也允许你通过在控制台中输入debug(functionName)来设置断点,例如:

  1. debug( doSomething ); 

该函数必须在全局命名空间中可用,并且浏览器将在调用它时立即启动调试器。可以使用undebug(functionName)或重新加载页面来取消调试。

monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。

而unmonitor(function)便是用来停止这一监听。

11. 查找和修复事件监听器

Firefox DevTools Inspector 面板会在任何附加了处理程序的DOM元素旁边显示一个 event 图标。单击图标查看函数名,然后单击左边的箭头图标展开代码。或者,“在调试器中打开”图标将在“调试器”窗格中定位处理程序,以便可以设置断点

Chrome的实现没有那么好,但可以通过getEventListeners()函数传递一个DOM节点来查看所有事件监听器。例如,getEventListeners($0)显示应用于当前Elements面板中高亮显示的DOM节点的侦听器

12. 复制属性到剪贴板

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

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

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

~完,方法是很多,自己选着用,我是小智,刷碗去了,我们下期见~

作者:Craig Buckler 译者:前端小智 来源:.openreplay 原文:https://blog.openreplay.com/12-ways-to-improve-your-devtools-console-logging

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

 

来源:大迁世界内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯