JavaScript console调试工具（js调试工具的基本功能）

一、显示信息的命令

console.log("normal"); // 用于输出普通信息

console.info("information"); // 用于输出提示性信息

console.error("error"); // 用于输出错误信息

console.warn("warn"); // 用于输出警示信息

console.clear() // 清除控制台信息

二、点位符：字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o);

console.log("%s","string"); //字符(%s)

console.log("%d年%d月%d日",2016,8,29); //整数(%d或%i)

console.log("圆周率是%f",3.1415926); //浮点数(%f)

var dog = {};

dog.name = "大毛";

dog.color = "黄色";

dog.sex = "母狗";

console.log("%o",dog); //对象(%o)

三、将对象以树状结构展现 (console.dir()可以显示一个对象所有的属性和方法)

var info = {

name : "Alan",

age : "27",

grilFriend : "nothing",

getName : function(){

return this.name;

}

}

console.dir(info);

遍历对象和属性

console.dir(document);

console.dir(document.body);

四、计时功能 (console.time()和console.timeEnd(), 用来显示代码的运行时间)

console.time("控制台计时器");

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

for(var j = 0; j < 10000; j++){}

}

console.timeEnd("控制台计时器");

五、性能分析performance profile (就是分析程序各个部分的运行时间, 找出瓶颈所在, 使用的方法是console.profile()和console.proileEnd();)

function All(){

// alert(11);

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

funcA(100);

}

funcB(1000);

}

function funcA(count){

for(var i = 0; i < count; i++){};

}

function funcB(count){

for(var i = 0; i < count; i++){};

}

console.profile("性能分析器");

All();

console.profileEnd();

六、利用控制台输出文字,图片,以%c开头, 后面的文字就打印的信息，后面一个参数就是样式属性；

console.log("请在邮件中注明%c 来自:console","font-size:16px;color:red;font-weight:bold;");

七、追踪函数的调用轨迹。

console.trace()用来追踪函数的调用轨迹。

/*函数是如何被调用的，在其中加入console.trace()方法就可以了*/

function add(a,b){

console.trace();

　　return a+b;

}

var x = add3(1,1);

function add3(a,b){return add2(a,b);}

function add2(a,b){return add1(a,b);}

function add1(a,b){return add(a,b);}

可以在控制台中查看

add @ forin.html:46

add1 @ forin.html:52

add2 @ forin.html:51

add3 @ forin.html:50

(anonymous) @ forin.html:49

八、显示某个节点的内容 (console.dirxml()用来显示网页的某个节点(node)所包含的html/xml代码)

var node = document.getElementById("info");

node.innerHTML += "<p>追加的元素显示吗</p>";

console.dirxml(node);

九、console.count()统计代码被执行的次数

function myFunction(){

console.count("myFunction 被执行的次数");

}

myFunction(); //myFunction 被执行的次数: 1

myFunction(); //myFunction 被执行的次数: 2

myFunction(); //myFunction 被执行的次数: 3

以上调试工具使用chome浏览器测试工具使用