Chrome浏览器调试,console简述

作为一个前端开发者,不可避免的需要进行各种各样的调试。

在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程度上甚至超越了firebug。

虽然这篇介绍谷歌调试工具,但是还是要说一句,火狐的调试工具依然强大。二者都是业界调试工具的佼佼者。

谷歌开发者工具功能丰富,包括代码审查,样式调整,性能优化以及其他更高级的功能,调试方式多种多样,不一而足。

这里主要介绍控制台的console

打开控制台

Windows系统快捷键【三个】:

F12

Ctrl+shift+i

Ctrl+shift+j

鼠标操作1:如图【是不是多余了?】

Chrome浏览器调试,console简述

鼠标操作2:在网页上任意位置右键,最后一个选项:检查,如图

Chrome浏览器调试,console简述

打开后,可以看到这样的界面

Chrome浏览器调试,console简述

上面的不同的单词:Elements,Console,Source,Network等等,分别针对不同的功能面板。我们这里主要介绍Console面板。

上面的图上一大片空白,就是console面板输入区域。可以在这里直接输入JavaScript代码。网页中的报错信息,提示信息等也都会出现在这里。

console是浏览器开发者工具自带的API,并不是JavaScript原生对象。不过目前所有主流的浏览器均支持。可以在js代码中用console输出信息。

现在我们在面板里面输入console。

Chrome浏览器调试,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,布尔值,正则表达式),参数会输出在数字前面的冒号之前。

其输出结果一定会有一个冒号,冒号后面紧紧跟着数字。

也就是说,如果没有参数的话,会输出一个冒号和一个数字。

Chrome浏览器调试,console简述

在函数中写这个方法,可以记录该函数是第几次被调用。

console.dir()

用于输出一个对象。

console.dirxml()

输出dom对象

console.clear()

清空控制台信息,执行该方法,会清空控制台中的所有之前的输出信息

console.assert()

输出断言消息

console.assert( < ,"该断言是正确的断言,所以不会有任何输出");

console.assert( > ,"这句话是断言出错后输出的信息");

var a = ;

console.assert(a%===,"断言有两个参数,第一个是必须参数,断言语句,第二个参数是可选语句,断言出错后输出的信息,如果断言正确,则不输出断言");

console.trace()

跟踪该函数调用链,会输出该函数被哪些函数调用过。以下是谷歌浏览器效果。

Chrome浏览器调试,console简述

格式化输出数组或者对象:console.table()

console.table可以以表格形式输出数组或者对象,最好的数组格式是一维数组,每个元素都是一个类json对象,最好的对象格式是类json对象,每个属性的值都是相同元素个数的数组。

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

其他的是有关于性能方面的信息输出。

输出代码执行的时间。

console.time()

console.timeEnd();

console.time()和console.timeEnd()通常会一起使用,console.time()表示计时开始,console.timeEnd()表示计时结束,二者传递相同的参数,用以表示同一个计时标记

二者可以嵌套使用。

Chrome浏览器调试,console简述

显示代码执行过程中性能的情况

console.profile()

console.profileEnd()

Chrome浏览器调试,console简述

Chrome浏览器调试,console简述

通常这两个方法也是一起使用,二者都有一个可选的相同参数,表示记录标记。

输出的结果会再控制台,profile 栏显示。

分组显示:

console.group()

console.groupEnd()

console.group("kill");
console.log("hello");
console.error("pgp");
console.info("llllll",4545);
console.groupEnd("kill"); console.group("oo");
var c = {"name" : 'fff',"age" : 23};
console.dir(c);
console.info("hah");
console.groupEnd("oo");

效果如图:
Chrome浏览器调试,console简述

以上两个方法可以将输出的信息分组显示;儿者都有一个可选的参数,表示分组标记。可以嵌套使用。

总结:

提示信息:console.info()

警告提示:console.warn()

报错提示:console.error()

基本输出:console.log();

调试输出:console.debug()

代码跟踪:console.trace()

代码执行次数统计:console.count()

对象输出:console.dir()

输出DOM节点:console.dirxml()

输出代码执行时间:console.time(),console.timeEnd()

输出代码细节:console.profile(),console.profileEnd()

分组输出信息:console.group(),console.groupEnd()

格式化输出数组或对象:console.table()

清空控制台:console.clear()

以上是对于控制台console对象的简单介绍。

由于本人技术水平有限,对于不完善的地方,还望见谅,欢迎大家留言交流。本人QQ:2653807423。

上一篇:Apache ActiveMQ实战(1)-基本安装配置与消息类型


下一篇:selenium webdriver