Javascript调试命令——你只会Console.log() ?

Console对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会介绍一些大都会提供的接口特性。

目前创新互联已为上1000家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、连城网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

Console对象可以在任何全局对象中访问，如 Window，WorkerGlobalScope 以及通过属性工作台提供的特殊定义。

它被浏览器定义为 Window.Console，也可被简单的 Console 调用。

最常用的方法就是Console.log(),就是在控制台输出内容。刚开始学前端的时候看到大家都是用的Console.log(),几乎没有见过Console的其他用法，难道Console真的没有别的用法了？查了一下后发现Console还是非常强大的，至于为什么很少看到有人用可能是因为用过都删掉了吧。在此记录一下Console的其他用法。

注意：因为Console 对象提供对浏览器控制台的接入 所以在不同浏览器中的支持及表现形式可能不太一样，但是调试内容只有我们开发者会看，所以保证开发环境能用这些方法就可以了，下面演示全部都为Chrome上面的效果。

分类输出

不同类别信息的输出

 
 
 
 
      
  
  
  
  1. console.log('文字信息');  
    2.   
  
  
  
  2. console.info('提示信息');  
    3.   
  
  
  
  3. console.warn('警告信息');  
    4.   
  
  
  
  4. console.error('错误信息'); 
    5.

分组输出

使用Console.group()和Console.groupEnd()包裹分组内容。

还可以使用Console.groupCollapsed()来代替Console.group()生成折叠的分组。

 
 
 
 
      
  
  
  
  1. console.group('第一个组');  
    2.   
  
  
  
  2.     console.log("1-1");  
    3.   
  
  
  
  3.     console.log("1-2");  
    4.   
  
  
  
  4.     console.log("1-3");  
    5.   
  
  
  
  5. console.groupEnd();  
    6.   
  
  
  
  6. console.group('第二个组');  
    7.   
  
  
  
  7.     console.log("2-1");  
    8.   
  
  
  
  8.     console.log("2-2");  
    9.   
  
  
  
  9.     console.log("2-3");  
    10.   
  
  
  
  10. console.groupEnd();  
    11.

Console.group()还可以嵌套使用

 
 
 
 
      
  
  
  
  1. console.group('第一个组');  
    2.   
  
  
  
  2.     console.group("1-1");  
    3.   
  
  
  
  3.         console.group("1-1-1");  
    4.   
  
  
  
  4.             console.log('内容');  
    5.   
  
  
  
  5.         console.groupEnd();  
    6.   
  
  
  
  6.     console.groupEnd();  
    7.   
  
  
  
  7.     console.group("1-2");  
    8.   
  
  
  
  8.         console.log('内容');  
    9.   
  
  
  
  9.         console.log('内容');  
    10.   
  
  
  
  10.         console.log('内容');  
    11.   
  
  
  
  11.     console.groupEnd();  
    12.   
  
  
  
  12. console.groupEnd(); 
    13.   
  
  
  
  13.  console.groupCollapsed('第二个组');  
    14.   
  
  
  
  14.     console.group("2-1");  
    15.   
  
  
  
  15.     console.groupEnd();  
    16.   
  
  
  
  16.     console.group("2-2");  
    17.   
  
  
  
  17.     console.groupEnd();  
    18.   
  
  
  
  18. console.groupEnd(); 
    19.

表格输出

使用console.table()可以将传入的对象，或数组以表格形式输出。适合排列整齐的元素

 
 
 
 
      
  
  
  
  1. var Obj = {  
    2.   
  
  
  
  2.     Obj1: {  
    3.   
  
  
  
  3.         a: "aaa",  
    4.   
  
  
  
  4.         b: "bbb",  
    5.   
  
  
  
  5.         c: "ccc"  
    6.   
  
  
  
  6.     }, 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.     Obj2: {  
    9.   
  
  
  
  9.         a: "aaa",  
    10.   
  
  
  
  10.         b: "bbb",  
    11.   
  
  
  
  11.         c: "ccc"  
    12.   
  
  
  
  12.     }, 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.     Obj3: {  
    15.   
  
  
  
  15.         a: "aaa",  
    16.   
  
  
  
  16.         b: "bbb",  
    17.   
  
  
  
  17.         c: "ccc"  
    18.   
  
  
  
  18.     }, 
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.     Obj4: {  
    21.   
  
  
  
  21.         a: "aaa",  
    22.   
  
  
  
  22.         b: "bbb",  
    23.   
  
  
  
  23.         c: "ccc"  
    24.   
  
  
  
  24.     } 
    25.   
  
  
  
  25.  }  
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27.  
    28.   
  
  
  
  28. console.table(Obj);  
    29.   
  
  
  
  29.  
    30.   
  
  
  
  30. var Arr = [  
    31.   
  
  
  
  31.     ["aa","bb","cc"],  
    32.   
  
  
  
  32.     ["dd","ee","ff"],  
    33.   
  
  
  
  33.     ["gg","hh","ii"],  
    34.   
  
  
  
  34. ]   
    35.   
  
  
  
  35. console.table(Arr); 
    36.

查看对象

使用Console.dir()显示一个对象的所有属性和方法

在Chrome中Console.dir()和Console.log()效果相同

 
 
 
 
      
  
  
  
  1. var CodeDeer = {  
    2.   
  
  
  
  2.     nema: 'CodeDeer',  
    3.   
  
  
  
  3.     blog: 'www.xluos.com',   
    4.   
  
  
  
  4.  }  
    5.   
  
  
  
  5. console.log("console.dir(CodeDeer)");  
    6.   
  
  
  
  6. console.dir(CodeDeer);  
    7.   
  
  
  
  7. console.log("console.log(CodeDeer)");  
    8.   
  
  
  
  8. console.log(CodeDeer); 
    9.

查看节点

使用Console.dirxml()显示一个对象的所有属性和方法

在Chrome中Console.dirxml()和Console.log()效果相同

百度首页logo的节点信息

条件输出

利用console.assert(),可以进行条件输出。

  • 当第一个参数或返回值为真时，不输出内容
  • 当第一个参数或返回值为假时，输出后面的内容并抛出异常 
 
 
 
 
      
  
  
  
  1. console.assert(true, "你永远看不见我"); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. console.assert((function() { return true;})(), "你永远看不见我"); 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. console.assert(false, "你看得见我"); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. console.assert((function() { return false;})(), "你看得见我"); 
    8.

计次输出

使用Console.count()输出内容和被调用的次数

 
 
 
 
      
  
  
  
  1. (function () {  
    2.   
  
  
  
  2.     for(var i = 0; i < 3; i++){  
    3.   
  
  
  
  3.         console.count("运行次数：");  
    4.   
  
  
  
  4.     }  
    5.   
  
  
  
  5. })() 
    6.

追踪调用堆栈

使用Console.trace()来追踪函数被调用的过程，在复杂项目时调用过程非常多，用这个命令来帮你缕清。

 
 
 
 
      
  
  
  
  1. function add(a, b) {  
    2.   
  
  
  
  2.     console.trace("Add function");  
    3.   
  
  
  
  3.     return a + b;  
    4.   
  
  
  
  4. }  
    5.   
  
  
  
  5. function add3(a, b) {  
    6.   
  
  
  
  6.     return add2(a, b);  
    7.   
  
  
  
  7. }  
    8.   
  
  
  
  8. function add2(a, b) {  
    9.   
  
  
  
  9.     return add1(a, b);  
    10.   
  
  
  
  10. } 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12. function add1(a, b) {  
    13.   
  
  
  
  13.     return add(a, b);  
    14.   
  
  
  
  14. }  
    15.   
  
  
  
  15. var x = add3(1, 1); 
    16.

计时功能

使用Console.time()和Console.timeEnd()包裹需要计时的代码片段，输出运行这段代码的事件。

  • Console.time()中的参数作为计时器的标识，具有唯一性。
  • Console.timeEnd()中的参数来结束此标识的计时器，并以毫秒为单位返回运行时间。
  • 最多同时运行10000个计时器。 
 
 
 
 
      
  
  
  
  1. console.time("Chrome中循环1000次的时间");  
    2.   
  
  
  
  2. for(var i = 0; i < 1000; i++)  
    3.   
  
  
  
  3. { 
    4.   
  
  
  
  4. }  
    5.   
  
  
  
  5. console.timeEnd("Chrome中循环1000次的时间"); 
    6.

性能分析

使用Console.profile()和Console.profile()进行性能分析，查看代码各部分运行消耗的时间，但是我在Chrome自带的调试工具中并没有找到在哪里查看这两个方法生成的分析报告。应该需要其他的调试工具。

具体参考这里：

http://www.oschina.net/transl...

有趣的Console.log()

最后再来介绍一下强大的Console.log(),这个方法有很多的用法（其他输出方法的用法，如error()等，可以参照log()使用）。

一、提示输出

可以再输出的对象、变量前加上提示信息，增加辨识度

 
 
 
 
      
  
  
  
  1. var ans = 12345;  
    2.   
  
  
  
  2. console.log("这是临时变量ans的值：",ans); 
    3.

二、格式化输出

占位符 含义

%s 字符串输出

%d or %i 整数输出

%f 浮点数输出

%o 打印javascript对象，可以是整数、字符串以及JSON数据

样例：

 
 
 
 
      
  
  
  
  1. var arr = ["小明", "小红"]; 
    2.   
  
  
  
  2. console.log("欢迎%s和%s两位新同学",arr[0],arr[1]);  
    3.   
  
  
  
  3. console.log("圆周率整数部分：%d，带上小数是：%f",3.1415,3.1415); 
    4.

三、自定义样式

使用%c为打印内容定义样式,再输出信息前加上%c，后面写上标准的css样式，就可以为输出的信息添加样式了

 
 
 
 
      
  
  
  
  1. console.log("%cMy stylish message", "color: red; font-style: italic"); 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. console.log("%c3D Text", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em"); 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. console.log('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;'); 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. console.log('%cMy name is classicemi.', 'color: #fff; background: #f40; font-size: 24px;'); 
    8.

总结

Console的用法很多，有些再调试过程中非常实用，可以节省很多时间。当然我知道debug还是用断点调试的方法比较好，但是小问题用“printf大法”也是很好用的（滑稽脸）。

参考资料

  • https://developer.mozilla.org...
  • http://www.jb51.net/article/5...
  • https://segmentfault.com/a/11...
  • https://www.cnblogs.com/liyun... 

当前题目：Javascript调试命令——你只会Console.log() ?
文章出自：http://www.36103.cn/qtweb/news1/39951.html

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

广告

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

猜你还喜欢下面的内容

用户体验知识

分类信息网

达州网站建设　　 　腾讯香港免备案空间　　 　乐山电信机房　　 　王君美油画　　 　成都网站设计　　 　成都托管服务器　　 　企业网站设计　　 　眉山做网站　　 　高端网站设计　　 　大吉雪茄　　 　成都网络营销　　 　云锦斋建筑　　 　四川电信高防服务器托管　　 　成都微信小程序　　 　温江网站建设　　 　成都圣月服饰　　 　成都网站建设　　 　宜宾做网站　　 　重庆网络营销　　 　成都网站维护