HTML控制台输出console,Javascript的console.log()用法

把下面代码保存为html文件，然后IE8---F12---脚本---控制台里就会出现有趣的东西，如果是Firefox，安装了FireBug后，则F12--控件台--所有 ，同样可以看到。

javascript的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 或者数组就没有进一步的显示功能。

*/

//变量

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

*/

附：

Firebug & Chrome Console 控制台的一些其他功能

console.log(object[, object, ...])

使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的：

var animal='frog', count=10;

console.log("The %s jumped over %d tall buildings", animal, count);

console.log("The", animal, "jumped over", count, "tall buildings");

console.debug(object[, object, ...])

向控制台输出一条信息，它包括一个指向该行代码位置的超链接。

console.info(object[, object, ...])

向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。

console.warn(object[, object, ...])

同 info。区别是图标与样式不同。

console.error(object[, object, ...])

同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同，使用该语句时会向浏览器抛出一个 js 异常。

console.assert(expression[, object, ...])

断言，测试一条表达式是否为真，不为真时将抛出异常(断言失败)。

console.dir(object)

输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。

console.dirxml(node)

输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。

console.trace()

输出 Javascript 执行时的堆栈追踪。

console.group(object[, object, ...])

输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。

console.groupCollapsed()

同 console.group(); 区别在于嵌套块默认是收起的。

console.time(name)

计时器，当调用 console.timeEnd(name);并传递相同的 name 为参数时，计时停止，并输出执行两条语句之间代码所消耗的时间(毫秒)。

console.profile([title])

与 profileEnd() 结合使用，用来做性能测试，与 console 面板上 profile 按钮的功能完全相同。

console.count([title])

输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。

console.clear()

清空控制台

命令行

控制台的输出面板右边，是控制台的输入面板(Chrome 调试工具对应为下方)，在这里除了可以运行常规的 javascript 代码，还内置了相当数量的命令行可以辅助我们的调试工作，下面是一些常用命令行的简单介绍。

$(id)

返回一个给定 id 的元素。

$$(selector)

返回给定的 css 选择器匹配到的一组元素。

$x(xpath)

返回给定的 XPath 表达式匹配到的一组元素。

$0

在 HTML 面板中选中的元素。

$1

上一次在 HTML 面板中选中的元素。

$n(index)

访问最近 5 个被选中过的元素，index 的范围： 0 – 4。

dir(object)

同 console.dir(object)。

dirxml(node)

同 console.dirxml(node)。

clear()

同 console.clear()。

inspect(object[, tabName])()

在合适的(或一个指定的) tab 中检视一个对象。

keys(object)

返回一个对象的所有属性的键。

values(object)

返回一个对象的所有属性的值。

debug(fn)

在函数第一行添加一个断点，使用 undebug(fn) 移除断点。

monitor(fn)

开启一个函数的调用日志，使用 unmonitor(fn) 关闭该功能。非常有用的一个命令，但是它似乎并没有很好地工作。

monitorEvents(object[, types])

开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下：

monitorEvents($0,['click'])

上面的命令行被执行后，将开启当前在 HTML 面板中被选中元素的 click 事件监控，一旦这个元素的 click 事件被触发，事件对象将会在控制台输出。如果不指定第二个参数，将对所有事件进行记录。

profile([title])

同 console.profile([title])

分享到：更多