你所不知道的 Console

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 中有很多对我们调试代码有帮助的函数,我们可以在开发环境中配合 console 来调试代码,使得我们测试更加便利。

时间: 2024-08-14 02:45:25

你所不知道的 Console的相关文章

你所不知道的JavaScript数组

你所不知道的JavaScript数组 相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个

【javascript杂谈】你所不知道的replace函数

原文:[javascript杂谈]你所不知道的replace函数 前言 最近在做面试题的时候总会用到这个函数,这个函数总是和正则表达式联系到一起,并且效果很是不错,总能很简单出色的完成字符串的实际问题,大家肯定都会使用这个函数,像我一样的初学者可能对这个函数的了解还是不够深的,今天就总结一下,了解一下,再做几道网上的题目练练手,给将要面试的同学打打气. 介绍 使用一个替换值替换掉一个替换模式在原字符串中一个或所有的匹配项,并返回替换后的字符串,这个替换模式可以是字符串或者正则表达式,替换值可以是

JavaScript中你所不知道的Object(二)--Function篇

上一篇(JavaScript中你所不知道的Object(一))说到,Object对象有大量的内部属性,而其中多数和外部属性的操作有关.最后留了个悬念,就是Boolean.Date.Number.String.Function等有更多的内部属性,而它们分别是什么呢? 这些内部属性不能像Object的内部属性一样一言以蔽之,因为它们各有各的用处和特点.其中核心的部分自然是最特殊的对象,Function对象.我们先从简单的开始: [[PrimitiveValue]]: 值的类型是基础数据类型.所以所有

你所不知道的JSON.stringify

译者按: 老司机们,你知道JSON.stringify还有第二个和第三个可选参数吗?它们是什么呢? 原文: What you didn't know about JSON.Stringify 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. JSON已经逐渐替代XML被全世界的开发者广泛使用.本文深入讲解JavaScript中使用JSON.stringify的一些细节问题.首先简单回顾一下JSON和JavaScript: 不是所有的合法

你所不知道的html5与html中的那些事(二)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些

你所不知道的html5与html中的那些事(一)

分类: Web开发 文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5

JavaScript你所不知道的困惑(2)

困惑一: var obj1 = new Object(); var obj2 = obj1; obj1.name = "阳光小强"; alert(obj2.name); //输出结果:阳光小强 JavaScript中的5个基本类型:Undefined.Null.Boolean.Number和String都是按值访问的,可以操作保存在变量中的实际的值,内存空间如下: var num1 = 5; var num2 = num1; 引用类型的值是保存在内存中的对象,JavaScript不允许

JavaScript你所不知道的困惑(1)

困惑一: 先看一个例子: function test(){ message = "hi"; } test(); alert(message); 会输出字符串"hi" 在函数内部使用var定义的变量是局部变量,省略var操作符的变量是全局变量. 困惑二: alert(undefined == null) 结果是"true" 我们知道在js中分为基本类型和引用类型,基本类型包括number.string.boolean.undefined.null.

你所不知道的html5与html中的那些事(四)——文本标签

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作都可以达到真正的云方式呢?这一系列的问题你是否已经想明白了呢? 本系列文章将为您一一解答你所不知道的关于html5与html中的那些事;具体会包括如:html5新的理念与想法,html5的新标签的用意与具体开发中场景应用,html5与css3的感情经历(用法搭配),包括html5的父亲html的一些