原文:http://my.oschina.net/junn/blog/142728
console.log 原先是 Firefox 的"专利",严格说是安装了 Firebugs 之后的 Firefox 所独有的调试"绝招"。
这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。
今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log。于是有人就提供了这样两句代码:
window.console = window.console || {};
console.log || (console.log = opera.postError);
经测试,以上代码好使。
至此,Firefox/IE/Opera 都能用上 console.log 了。
当然,IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log,还是太过简单,比如参数是Object 或者数组就没有进一步的显示功能。
把下面代码保存为html文件并在浏览器中打开,然后IE---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript的console.log()用法</title> <script type="text/javascript"> //变量 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); </script> </head> <body> </body> </html>输出:
变量: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"}]]
chrome浏览器下的 console.log的使用
所以上面代码在chrome浏览器下同样有效,首先打开你的chrome浏览器,F12召唤出 开发者工具,在如下界面中点击Console,然后输入13+14,回车,它将出现:
它就是如此灵活,无论您是否接受!其最简单的书写方式可以为:
console.log('hello world');
你还可以加入许多参数,比如:
var you = 'you'; console.log(1,3,1,4,'love',you);
在一些遍历的操作中,如果你需要一眼目睹所有结果,使用alert调试显然不足,那么你就可以借助log:
var json = { name:'贤心', sex:'男', age:'23' } for(i in json){ console.log(i+':'+json[i]); //alert(i+':'+json[i]) }
当然,console.log提供的功能远不止这些,您还可以在它的控制台中做更多的事。如果你给log传递的是一个对象或者数组、HTML元素等,控制台将会显示为一个超链接,点击它您就可以查看该元素的详细信息了,比如您可以输入:
console.log(document.body);
那么,它将立马输出body所包含的所有元素:
除了console.log,console对象还能实现日志的彩色输出,这将让您的调试结果显得更清晰了:
console.warn(); //信息左侧将会出现感叹图标 console.error(); //信息左侧将会出现×图标