作为一个前端开发者,不可避免的需要进行各种各样的调试。
在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程度上甚至超越了firebug。
虽然这篇介绍谷歌调试工具,但是还是要说一句,火狐的调试工具依然强大。二者都是业界调试工具的佼佼者。
谷歌开发者工具功能丰富,包括代码审查,样式调整,性能优化以及其他更高级的功能,调试方式多种多样,不一而足。
这里主要介绍控制台的console
打开控制台
Windows系统快捷键【三个】:
F12
Ctrl+shift+i
Ctrl+shift+j
鼠标操作1:如图【是不是多余了?】
鼠标操作2:在网页上任意位置右键,最后一个选项:检查,如图
打开后,可以看到这样的界面
上面的不同的单词:Elements,Console,Source,Network等等,分别针对不同的功能面板。我们这里主要介绍Console面板。
上面的图上一大片空白,就是console面板输入区域。可以在这里直接输入JavaScript代码。网页中的报错信息,提示信息等也都会出现在这里。
console是浏览器开发者工具自带的API,并不是JavaScript原生对象。不过目前所有主流的浏览器均支持。可以在js代码中用console输出信息。
现在我们在面板里面输入console。
可以看到console对象有这么多方法。
先来看以下五个方法:
console.log
console.error
console.info
console.warn
console.debug
这五个方法是我们比较常用的方法,也算是比较直观的方法。这几个方法的区别就是输出的结果的颜色不一样,还有输出结果前面的提示符号不同。具体如何,请按如下代码测试,讲log换成对应的info,warn,debug,error
关于这五个方法,有如下几点:
1.都可以输出任意类型的值,字符串,数值,对象,数组,函数;
console.log(100); console.log("pelli"); console.log(function hh(){}); console.log([1,2,3]); console.log({name:‘pelli‘}); console.log(null); console.log(undefined); console.log(true);
2.都可以有任意多个参数(65535个以内),可以运行以下代码,查看效果。顺便提一下,65535是一个特别的数字,有兴趣可以百度一下;
var str = ‘console.log("hello"‘; for(var i = 0; i < 100000; i++){ str = str + "," + i; } str += ‘);‘; eval(str);
3.都可以用占位符进行格式化输出,比如输出带样式的字符串,输出图片等。
一共有四种占位符:
浮点:%f
字符:%c
整数:%d或%i
对象:%o
请看以下代码:代码中的log可以和warn,info,debug,error随意互换
//输出带有样式的文字 console.log("%c这是蓝色的20号字","color:blue;font-size:20px;"); //输出图片 console.log("%c","background:url(‘http://www.baidu.com/img/tupian.jpg‘)"); //格式化输出日期 console.log("今天是%i年%i月%i日",2016,05,04); //输出小数 console.log("%f是圆周率",3.141592653);var obj = { name : ‘pelli‘, age : 24}console.log("%o",obj);
除了console.log外,还有其他很多方法。上面的图片中列出的是所有的方法。
console.count();
这个方法是用来记录该行所在的代码是第几次执行。一般写在循环和函数中。每一次执行到这一行的时候,都会在控制台输出一个数值----在前一个数值基础上加一。有一个可选参数,可选参数是任意值(字符串,数字,对象,数组,函数,null,undefined,布尔值,正则表达式),参数会输出在数字前面的冒号之前。
其输出结果一定会有一个冒号,冒号后面紧紧跟着数字。
也就是说,如果没有参数的话,会输出一个冒号和一个数字。
在函数中写这个方法,可以记录该函数是第几次被调用。
console.dir()
用于输出一个对象。
console.dirxml()
输出dom对象
console.clear()
清空控制台信息,执行该方法,会清空控制台中的所有之前的输出信息
console.assert()
输出断言消息
console.assert(3 < 4,"该断言是正确的断言,所以不会有任何输出"); console.assert(3 > 4,"这句话是断言出错后输出的信息"); var a = 100; console.assert(a%5===3,"断言有两个参数,第一个是必须参数,断言语句,第二个参数是可选语句,断言出错后输出的信息,如果断言正确,则不输出断言");
console.trace()
跟踪该函数调用链,会输出该函数被哪些函数调用过。以下是谷歌浏览器效果。
其他的是有关于性能方面的信息输出。
输出代码执行的时间。
console.time()
console.timeEnd();
console.time()和console.timeEnd()通常会一起使用,console.time()表示计时开始,console.timeEnd()表示计时结束,二者传递相同的参数,用以表示同一个计时标记。
二者可以嵌套使用。
显示代码执行过程中性能的情况
console.profile()
console.profileEnd()
通常这两个方法也是一起使用,二者都有一个可选的相同参数,表示记录标记。
输出的结果会再控制台,profile 栏显示。
分组显示:
console.group()
console.groupEnd()
以上两个方法可以将输出的信息分组显示;儿者都有一个可选的参数,表示分组标记。可以嵌套使用。
以上是对于控制台console对象的简单介绍。
还有很多不完善的地方,还望见谅。