你所不知道的 Console

2016-12-19 ZHANGXIANGLIANG JavaScript

转自 https://segmentfault.com/a/119000000672160

1.凡人视角

打印字符串

代码:

console.log("I am a 凡人");

打印提示消息

代码:

console.info("Yes, you arm a 凡人");

打印警告消息

代码:

console.warn("凡人你居然敢窥视我");

打印错误消息

代码:

console.error("天兵天将,把这个凡人给我打入地狱");

打印调试信息

console.debug("我就是传说中的debug");

2.上帝视角

查看所有方法

console 除了上面的几个方法还有什么方法呢?log 除了能打印字符串外,还能打印出对象,我们可以利用 console.log 打印自己。

代码:

console.log(console);

输出:

Object {

   assert: ...,

   clear: ...,

   count: ...,

   debug: ...,

   dir: ...,

   dirxml: ...,

   error: ...,

   group: ...,

   groupCollapsed: ...,

   groupEnd: ...,

   info: ...,

   log: ...,

   markTimeline: ...,

   profile: ...,

   profileEnd: ...,

   table: ...,

   time: ...,

   timeEnd: ...,

   timeStamp: ...,

   timeline: ...,

   timelineEnd: ...,

   trace: ...,

   warn: ...

}

啊咧咧?怎么这么多方法。其实上面的 console 方法 不一定每个浏览器 都有实现,我这边使用的是 chrome浏览器 。所以说,这个特性是非标准的,请尽量不要在 生产环境 中使用它。

但是我们可以在 开发环境 中,合理的利用 这些方法来帮助我们开发。

清理控制台

如果我们在控制台调试的时候,难免 强迫症 发作想清理掉已经乱七八糟的控制台。浏览器和命令行 clear 一样提供了一个清理函数 console.clear() 。

console.clear()

当然我们也可以用 chrome 的 command line api 来清理控制台。

clear()

又或者可以使用按键Mac上 cmd + k ,Win ctrl + l(我用的是chrome浏览器)。

分组

当代码非常长,或者我们需要把一个函数,或者一个文件中的函数等区分出来。我们可以使用分组来实现。

代码:

console.group('凡人');

console.log("手");

console.log("脚");

console.groupEnd();

 

console.group('神');

console.log("法力无边");

console.log("腾云架雾");

console.groupEnd();

输出:

如果想要输出为折叠,我们可以使用 console.groupCollapsed ,用法和 console.group 类似。

查看对象信息

有时候我们需要打印出对象信息,可以使用 console.log 来进行简单的输出。

代码:

var person = {

   head: 1,

   hand: 2,

   leg: 2

};

console.log(person);

呜呜,可是这个显示得好丑,我们这个时候就可以使用传说中的神器 console.table 来帮助我们清楚的显示 关联数组信息。

var data = [

   {

       '姓名': '幼儿园',

       '性别': '女'

   },

   {

       '姓名': '李狗嗨',

       '数量': 1

   }

];

console.table(data);

输出:

但是如果想要看详细的对象信息,我们可以使用 console.dir,将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,它还能打印出函数等。

console.dir(clear);

什么?你想看某个节点中的html代码?没事,我们可以用 console.dirxml 来查看页面中对应元素的 html/xml 内容。

html代码:

<div id='person'>

   <p>I am a 凡人</p>

</div>

javascirpt代码:

var person = document.getElementById('person');

console.dirxml(person);

性能测试

雷军粑粑老是喜欢说:“不服?跑个分。”有时候,我们也需要对代码跑个分。这个时候,我们可以使用console.time和console.timeEnd,他们可以记录代码运行所花费的时间。

console.time("神机妙算");

(function () {

   for(var i = 0; i < 10; i++) {

       var sum = (function () {

           var flog = 0;

           for(var i = 0; i < 10; i++) {

               flog+=i;

           }

       })();

   }

})();

console.timeEnd("神机妙算");

啊咧咧?你这个顶多就是 计时器 怎么能说是 性能测试 。客官别急,我们这还有一个叫做 console.profile 和 console.profileEnd 姐妹呢~~

console.profile("神机妙算");

(function () {

   for(var i = 0; i < 10; i++) {

       var sum = (function () {

           var flog = 0;

           for(var i = 0; i < 10; i++) {

               flog+=i;

           }

       })();

   }

})();

console.profileEnd("神机妙算");

输出会显示在 profile

什么还是不够?你还想知道运行时的结果栈?可以可以,我们这还有一位 console.trace 哦。他可以看透大爷你的一局一动哦。 
代码:

function add(num) {

   if (0 < num) {

       console.trace("现在num的值为", num);

       return num + add(num - 1);

   } else {

       return 0;

   }

}

 

var a =3;

add(3);

输出:

判断真假

平时我们在写代码是时候,经常需要判断一下当前值的真假情况,使用if或者三元表达式来达到目的。我们现在也可以使用 console.assert 来判断,该方法会在条件为错误时,返回一个 console.error 的输出。

console.assert(1 == 1);

console.assert(1 == 0);

console.assert(!(1 == 0));

统计次数

有时候我们需要统计一个函数或者被调用了几次,我们通常会增加一个变量 count 来记录,然后在控制台中查看。这样相当的麻烦,我们可以使用 console.count 函数来帮忙我们记录次数,并输出。

function hi(name) {

   console.count(name);

   return "hi " + name;

}

 

for(var i = 0; i < 10; i++) {

   if(i < 4) {

       hi("person");

   } else {

       hi("god");

   }

}

console的更多相关文章

  1. console的高级使用

    1.console.table()用来表格化展示数据. var people = { zqz: { name: 'zhaoqize', age: 'guess?' }, wdx: { name: 'w ...

  2. const let,console.log('a',a)跟console.log('a'+a)的区别

    const 创建一个只读的常量 let块级作用域 const let重复赋值都会报错 console.log('a',a) a console.log('a'+a) a2 逗号的值会有空格:用加号的值 ...

  3. 学习笔记之(console)

    今天小颖在逛博客园时,发现一位帅锅写的有意思的Console小颖看了后,就自己敲了一遍嘻嘻,为了方便以后查看,小颖把它记录下来嘻嘻,有兴趣的小伙伴也可以自己试试哦. 格式占位符 作用 %s 字符串 % ...

  4. Node.js:console模块

    console模块提供了一个简单的调试功能,类似与web浏览器的javscript console. 下面简单介绍下该模块的使用以及用途,我使用了ES6的模版字符串(使用反引号标识),有兴趣的可以去了 ...

  5. console.log("A"-"B"+"3")=?

    (点击上方的订阅号,可快速关注,关注有惊喜哦^_^) 前不久看到一道JS基础题目,做了一下竟然错了一半...在此分享一下: 先把题目放上来,大家可以自己测试一下再看答案哦^_^ ①console.lo ...

  6. [No000090]C#捕获控制台(console)关闭事件及响应cmd快捷键

    捕获控制台(console)关闭事件: 1.Ctrl+C信号: 2.Ctrl+Break信号: 3.用户系统关闭Console时: 4.用户退出系统时: 5.系统将要关闭时: using System ...

  7. 简单的浏览器调试——console命令

    一.显示信息 <script type="text/javascript"> console.log('hello'); console.info('信息'); con ...

  8. 浏览器控制台命令调试——console

    控制台命令调试时通过浏览器开发工具中的控制台命令嵌入到JavaScript中,输出特定的信息或日志,从而达到调试的目的. 我们常用的Chrome和FireFox,都可以通过F12来打开开发工具. 下面 ...

  9. Chrome浏览器调试,console简述

    作为一个前端开发者,不可避免的需要进行各种各样的调试. 在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程 ...

  10. 尝试在你浏览器的Console(F12)中运行一下,你会发现页面被不同的颜色块高亮了(css调试中学到的js)

    现在到处都是JavaScript,每天都能知道点新东西.一旦你入了门,你总能从这里或是那里领悟到很多知识. 一旦我发现一些有意思的东西,我喜欢去感觉他们的源代码,看一看它是怎么办到的. 今天我想分享A ...

随机推荐

  1. VS 与JIRA Bamboo的连接

    atlassian-vs-connector 可以百度下地址 一些配置     效果:        

  2. django中文配置的问题

    language_code:'zh-hans' 生成的语言文件请使用zh_Hans,这样才能你的app和系统的app完全翻译成中文,掉此坑的请在下面留言

  3. PHPExcel导出功能

    对于第一次弄这个导出,总结下思路: 1.下载在http://phpexcel.codeplex.com/下载最新PHPExcel放到Vendor下,注意位置:ThinkPHP\Extend\Vendo ...

  4. linux 下链接无线网络

    无线网卡配置此页由Linux Wiki用户Chenxing于2008年11月27日 (星期四) 09:28的最后更改. 在1233456的工作基础上.本文介绍在Linux命令行界面中手动配置无线网卡的 ...

  5. java加法流程图

  6. Scala学习笔记之二--基本数据类型

    前言 本篇主要讲Scala的基本数据类型,更多教程请参考:Scala教程 基本数据类型 Scala一共提供了9中数据类型,Scala的基本数据类型与java中的基本数据类型是一一对应的,这是Scala ...

  7. 头疼:为什么chrome不能访问本地文件(带--disable-web-security --allow-file-access-from-files )

    如题,寻求帮助! chrome 带参数启动 --disable-web-security  --allow-file-access-from-files 照理应该可以加载本地文件,找遍google和英 ...

  8. Dynamics AX 2012 R2 无法创建类"Excel.Application"的COM对象

        Reinhard在做一个Excel导入项目时,发现X++代码一旦执行到Excel组件部分,就会报如下错误: 无法创建类"Excel.Application"的COM对象.请 ...

  9. 【转】缺少servlet-api.jar包

    转载地址:http://blog.sina.com.cn/s/blog_6cfb18070100n7pu.html 在Eclipse中缺省servlet-api.jar包,由于servlet-apbi ...

  10. 关键字nullable,nonnull,null_resettable,_Null_unspecified详解

    相信在开发过程中,很多小伙伴们儿都会见到nullable,nonnull,null_resettable,_Null_unspecified这几个关键字,但是并不知道它们是什么意思,下面我就给大家一一 ...