Console.log 总结

Posted by

不论是 chrome firefox ie(8以上版本) 还是 360急速浏览器 搜狗浏览器 等等,只要按 F12 就能打开控制台。
其实对于这 F12 而言,最确切的叫法是开发人员工具,Console 这一项才是控制台。点击右键的 Clear console 菜单 或者 输入 clear() 然后按回车即可清空控制台内容。
我们进行第一步用 console.log 输出信息吧。
分别输入 console.log(“hehe..”) 和 console.log(“hehe..”, “haha..”) 然后按回车,可以在控制台看到输出结果。

其实就是输出信息而,非常简单,用他代替 alert 和 document.write 调试,你的工作会变的非常轻松的。
例如调试一个循环这部分的代码,可是数组里却有几十个甚至上百个元素,alert 的话你会点疯掉的,
document.write 也不是不行,但是对于对象输出,你只能看到 [object Object] 这样的东西。

console.log()

如果用 console.log 代替 alert document.write 输出对象信息,可以在控制台展开这对象查看具体信息。
可以直接看到对象信息,而不会显示 [object Object] 令我们一头雾水。

现在可以直接点击 Object 展开这个数组内的对象进行查看了,连循环输出都省了。
这就是控制台的魅力,而且这只是他最基础的功能而已。

可以看一些深色和浅色的东西,深色的就是我们可以直接调用的方法了,浅色的表示默认属性或方法,展示无需关心,以后有机会再说。
其实常用的只有 log dir 而已,其他真心很少用,到高级调试才会用上。
group,table 之类的辅助性质,可用可不用,看你喜好了。

之前在调试代码的时候,跟砸js代码执行情况,一般都是通过在代码块中使用alert的方式查看js代码的执行情况,今天也是看到有朋友使用console.log函数打印输出函数,变量,对象,下边就console.log的使用情况进行记录,具体的语法是:
console.log(“值为:”,fn);
console.log()能够输出变量,函数,数组,对象等等

//变量 
var i = 'I am a string'; 
console.log('变量:',i); 
//数组 
var arr = [1,2,3,4,5]; 
console.log('数组:',arr); 
//对象 
var obj1 = { 
key1 : 'value1', 
key2 : 'value2', 
key3 : 'value3' 
}; 
var obj2 = { 
key6 : 'value4', 
key5 : 'value5', 
key4 : 'value6' 
}; 
var obj3 = { 
key9 : 'value7', 
key8 : 'value8', 
key7 : 'value9' 
}; 
console.log('对象:',obj1); 
//对象数组 
var objArr1 = [obj1,obj2,obj3]; 
var objArr2 = [[obj1],[obj2],[obj3]]; 
console.log('对象数组1:',objArr1); 
console.log('对象数组1:',objArr2); 
/* 

输出: 
变量:I am a string 
数组:[1, 2, 3, 4, 5] 
对象:Object { key1=”value1″, key2=”value2″, key3=”value3″} 
对象数组1:[Object { key1=”value1″, key2=”value2″, key3=”value3″}, Object { key6=”value4″, key5=”value5″, key4=”value6″}, Object { key9=”value7″, key8=”value8″, key7=”value9″}] 
对象数组1:[[Object { key1=”value1″, key2=”value2″, key3=”value3″}], [Object { key6=”value4″, key5=”value5″, key4=”value6″}], [Object { key9=”value7″, key8=”value8″, key7=”value9″}]] 
*/