|
|
51CTO旗下网站
|
|
移动端

熟练掌握JS console.log,拯救你的代码

在浏览器控制台中输出信息对开发人员来说就像一次拯救行动。在代码调试中遇到种种疑难杂症时,Console.log()就像灵丹妙药。其实,除了最常用的Console.log()语句,还有其他简化调试过程的方式。

作者:读芯术来源:今日头条|2020-01-09 08:26

来源:Pexels JS Console

调试就如同在犯罪电影中同时扮演侦探和凶手。

——Filipe Fortes

大多数的开发人员喜欢在浏览器中输出信息以更多地了解问题。笔者应该不是唯一一个这样做的。

在浏览器控制台中输出信息对开发人员来说就像一次拯救行动。在代码调试中遇到种种疑难杂症时,Console.log()就像灵丹妙药。

其实,除了最常用的Console.log()语句,还有其他简化调试过程的方式。

接下来,小芯将通过例子逐个介绍它们。

1. console.assert()

只想输出选定日志时这一指令非常实用,它将只输出错误参数,如果第一个参数正确,它就不起作用。

熟练掌握JS console.log,拯救你的代码

断言(assertion)

2. console.group() & console.groupEnd( )

可以使用控制台将消息分组。

熟练掌握JS console.log,拯救你的代码

将消息分组

3. console.trace()

该方法会追踪并显示代码在何时终止运行。

熟练掌握JS console.log,拯救你的代码

追踪

熟练掌握JS console.log,拯救你的代码

来源:Pexels JS Console

4. console.count()

该函数记录count()函数的调用次数,有一个可选的参数label。

如果调用时提供了label,该函数将记录使用该特定label调用count()的次数。

如果调用时省略label,函数将记录在这一行调用count()的次数。

熟练掌握JS console.log,拯救你的代码

计数

5. console.table ()

希望看到合适易读的JSON文本吗?

熟练掌握JS console.log,拯救你的代码

对数组进行更好的可视化处理!

6. 在控制台消息中添加样式

所有控制台消息看起来都一样吗?现在就不一样了,让调试日志中重要的部分看起来更加醒目。

熟练掌握JS console.log,拯救你的代码

带颜色的消息

可以通过以下方式改变日志中特定单词的颜色:

熟练掌握JS console.log,拯救你的代码

高亮显示特定单词

7. console.time()

console.time()用于跟踪操作耗时,它是跟踪JavaScript执行所耗费的短暂时间的好方法。

熟练掌握JS console.log,拯救你的代码

8. 控制台中的HTML

从控制台中获取HTML元素,跟检查元素的方式相同。

HTNL元素展示

9. console.dir()

输出指定对象的JSON形式。

熟练掌握JS console.log,拯救你的代码

10. console.memory( )

想知道Javascript应用占用了多少浏览器内存?

熟练掌握JS console.log,拯救你的代码

内存

熟练掌握JS console.log,拯救你的代码

来源:Pexels JS Console

11. 使用占位符

各种不同的占位符如下所示:

  • %o :接受一个对象,
  • %s :接受一个字符串
  • %d :接受一个小数或整数

熟练掌握JS console.log,拯救你的代码

占位符介绍

12. console.log() | info( ) | debug( ) | warn( ) | error( )

这些语句将根据事件的类型用不同颜色标识原始字符串。

熟练掌握JS console.log,拯救你的代码

console log/info/debug/warn/error

13. console.clear( )

最后但也很重要的一点是,使用clear()命令清除所有控制台消息。

以下是要点补充。

https://gist.github.com/Harshmakadia/fc25e56cb8f49145f4c9b3528f04215f

  1. // time and time end 
  2. console.time("This"); 
  3. let total =0
  4. for (let j =0; j <10000; j++) { 
  5. total += j 
  6. console.log("Result", total); 
  7. console.timeEnd("This"); 
  8. // Memory 
  9. console.memory() 
  10. // Assertion 
  11. consterrorMsg='Hey! The number is not even'
  12. for (let number =2; number <=5; number +=1) { 
  13. console.assert(number %2===0, {number: number, errorMsg: errorMsg}); 
  14. // Count 
  15. for (let i =0; i <11; i++) { 
  16. console.count(); 
  17. // group & groupEnd 
  18. console.group(); 
  19. console.log('Test message'); 
  20. console.group(); 
  21. console.log('Another message'); 
  22. console.log('Something else'); 
  23. console.groupEnd(); 
  24. console.groupEnd(); 
  25. // Table 
  26. constitems= [ 
  27. name:"chair", 
  28. inventory:5, 
  29. unitPrice:45.99 
  30. }, 
  31. name:"table", 
  32. inventory:10, 
  33. unitPrice:123.75 
  34. }, 
  35. name:"sofa", 
  36. inventory:2, 
  37. unitPrice:399.50 
  38. ]; 
  39. console.table(items) 
  40. // Clear 
  41. console.clear() 
  42. // HTML Element 
  43. let element =document.getElementsByTagName("BODY")[0]; 
  44. console.log(element) 
  45. // Dir 
  46. constuserInfo= {"name":"John Miller", "id":2522, "theme":"dark"} 
  47. console.dir(userInfo); 
  48. // Color 
  49. console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); 
  50. // pass object, variable 
  51. constuserDetails= {"name":"John Miller", "id":2522, "theme":"dark"} 
  52. console.log("Hey %s, here is your details %o in form of object", "John", userDetails); 
  53. // Default 
  54. console.log('console.log'); 
  55. console.info('console.info'); 
  56. console.debug('console.debug'); 
  57. console.warn('console.warn'); 
  58. console.error('console.error'); 

【编辑推荐】

  1. 2020年,前端开发人员应该学习的10件事
  2. 2020年值得探究的五款微软开发者技术
  3. 聊一聊优秀的代码都是如何分层的?
  4. 真的吗,Java 的 JSP 已经被淘汰了?
  5. MIT推出预测代码速度新工具Ithemal,纯文本自动学习,无需手动添加特征
【责任编辑:赵宁宁 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

Python应用场景实战手册

Python应用场景实战手册

Python应用场景实战手册
共3章 | KaliArch

115人订阅学习

一步到位玩儿透Ansible

一步到位玩儿透Ansible

Ansible
共17章 | 骏马金龙1

182人订阅学习

云架构师修炼手册

云架构师修炼手册

云架构师的必备技能
共3章 | Allen在路上

131人订阅学习

读 书 +更多

C#高级编程(第4版)

C#经典名著!2006年最受读者喜爱的十大技术开发类图书!也是Wrox红皮书中最畅销的品种之一,从第一版开始就名满天下;其第3版被中华读书报...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微