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

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

创新互联公司是一家集网站建设,石家庄企业网站建设,石家庄品牌网站建设,网站定制,石家庄网站建设报价,网络营销,网络优化,石家庄网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

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

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

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

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

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

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

2. 使用适当的打印类型

console.log() 一般这样用：

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

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

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

警告：

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

错误：

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

或不太重要的调试信息:

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

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

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

或对象的数组:

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

其他选项包括:

  • console.dir( obj ) 显示一个 JS 对象的交互式属性列表
  • console.dirxml( element ) 显示指定的HTML或XML节点的子代元素的互动树。
  • console.clear() 清除控制台之前的所有信息。

3.过滤日志消息

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

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

4. 使用 printf-type 的信息

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

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

带样式的风格

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

控制台中的结果:

6. 使用类似测试的断言

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

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

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

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

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

7. 运行堆栈跟踪

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

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

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

8. 组日志消息

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

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

9. 使用定时器

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

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

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

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

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

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

 
 
 
 
    
  
  
  
  
  1. debug( doSomething ); 
    2.

该函数必须在全局命名空间中可用，并且浏览器将在调用它时立即启动调试器。可以使用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

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

网页标题：12种Console相关的方法，帮你快速提高调试效率！
URL网址：http://www.stwzsj.com/qtweb/news21/12371.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

搜索引擎优化知识

分类信息网

四川晃众门窗　　 　成都微信小程序开发　　 　四川主机托管　　 　不锈钢防护栏　　 　成都h5网站建设　　 　成都网站推广　　 　手机APP开发　　 　成都机柜租用　　 　三台网站建设　　 　成都微信开发　　 　seo优化　　 　手机网站　　 　成都艾瑞格　　 　兴久牧业　　 　贵阳联通机房　　 　网站建设方案　　 　成都防护栏　　 　主机租用　　 　网络口碑营销　　 　香港机房服务器托管