Javascript中console.log()用法

最新推荐文章于 2022-07-13 14:49:00 发布

转载最新推荐文章于 2022-07-13 14:49:00 发布 · 1.6k 阅读

收录于

css/js/jquery

本文介绍了如何在Firefox、IE和Opera等不同浏览器中使用console.log进行JavaScript调试的方法，并展示了如何利用console.log进行变量、数组及对象的输出，以及如何在Chrome浏览器中使用此功能。

原文：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(); //信息左侧将会出现×图标

熟练使用console.log，可以让您在javascript调试中省不少麻烦，尤其是面对庞大的框架操作。