你会用firebug中的console.log调试命令吗
2014-09-05 08:33:01;  来源:追太阳;  作者:;  评论:0 点击:

闲暇时间在乐视网看视频的时候处于职业习惯在首页按下了F12,结果在firebug的console里看到了一个有趣的招聘信息:突然感觉好有喜感,原来还
闲暇时间在乐视网看视频的时候处于职业习惯在首页按下了F12,结果在firebug的console里看到了一个有趣的招聘信息:

突然感觉好有喜感,原来还可以用console.log命令在做具有针对性的招聘广告呢,好吧,我承认这是我第一次看到这样的招聘广告。如果你说“我早就知道了”,那这篇关于console.log的文章就可以直接pass掉了,如果你对console.log不了解,希望下面网上搜集的资料对你有帮助:

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,回车,它将出现:

小谈ChromeBug日志记录:console.log的使用

它就是如此灵活,无论您是否接受!其最简单的书写方式可以为:

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])
}

小谈ChromeBug日志记录:console.log的使用

当然,console.log提供的功能远不止这些,您还可以在它的控制台中做更多的事。如果你给log传递的是一个对象或者数组、HTML元素等,控制台将会显示为一个超链接,点击它您就可以查看该元素的详细信息了,比如您可以输入:

console.log(document.body);

那么,它将立马输出body所包含的所有元素:

小谈ChromeBug日志记录:console.log的使用

除了console.log,console对象还能实现日志的彩色输出,这将让您的调试结果显得更清晰了:

console.warn(); //信息左侧将会出现感叹图标
console.error(); //信息左侧将会出现×图标
熟练使用console.log,可以让您在javascript调试中省不少麻烦,尤其是面对庞大的框架操作。 

内容参考:
http://sentsin.com/web/11.html

相关热词搜索:firebug console log

上一篇:svn状态图标不显示的解决方案
下一篇:最后一页

收藏
回到顶部