javascript控制台console用法详解

目前FireFox的插件Firebug和Chrome对console支持的比较好,主要有console.log(), console.dir(), console.debug(), console.info(), console.error()等方法,可以用易读的的方式输出变量以及对象等,其中console.log()用来在控制台输出内容,console.dir()可以用来结构化输出HTML节点,JS对象等,console.debug(), console.info(), console.error()和console.log一样

 代码如下 复制代码
console.log(object[, object, ...])

在控制台输出一条消息。如果有多个参数,输出时会用空格隔开这些参数。
第一个参数可以是一个包含格式化占位符输出的字符串,例如:

 代码如下 复制代码
?1 console.log("The %s jumped over %d tall buildings", animal, count);

上面的例子可以用下面的无格式化占位符输出的代码替换:

 代码如下 复制代码
?1 console.log("The", animal, "jumped over", count, "tall buildings");

并且,这两种方式是可以组合使用的。如果使用了格式化占位符,而提供的参数的个数多于占位符的个数,那么,多余的参数会以空格分隔的方式附加在字符串后面,就像:

 代码如下 复制代码
?1 console.log("I am %s and I have:", myName, thing1, thing2, thing3);

如果参数是一个Javascript对象,那么在控制台输出的就不是静态文字,而是一个可交互的超链接,点击超链接可以查看该对象的HTML, CSS, Script, DOM窗口,可用格式化字符串%o代替Javascript对象。

 代码如下 复制代码
?1 console.log("Body tag is %o", document.body);

格式化字符串列表:
格式化字符串 类型
%s 字符串
%d, %i 整型(暂不支持数字型)
%f 浮点型 (暂不支持数字型)
%o 链接对象
console.debug(object[, object, ...])
在控制台输出一条消息,包含一个指向代码调用位置的超链接。假如是直接在控制台输入该命令,就不会出现超链接(和console.log()一样)。
console.info(object[, object, ...])
在控制台输出一条带有“信息”图标的消息和一个指向代码调用位置的超链接。
console.warn(object[, object, ...])
在控制台输出一条带有“警告”图标的消息和一个指向代码调用位置的超链接。
console.error(object[, object, ...])
在控制台输出一条带有“错误”图标的消息和一个指向代码调用位置的超链接。
console.assert(expression[, object, ...])
测试表达式expression是否为真。如果不是真,会在控制台写一条消息并抛出异常
console.dir(object)
以列表形式输出一个对象的所有属性,有点和你查看DOM窗口相类似。
console.dirxml(node)
输出一个HTML或者XML元素的XML源代码。和你在HTML窗口看到的相似。
console.trace()
Prints an interactive stack trace of JavaScript execution at the point where it is called.
The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.
console.group(object[, object, ...])
输出一条消息,并打开一个嵌套块,块中的内容都会缩进。调用console.groupEnd()关闭块。该命令可以嵌套使用。
console.groupEnd()
关闭最近一个由console.group打开的块。
console.time(name)
创建一个名字为name的计时器,调用console.timeEnd(name)停止计时器并输出所耗时间(毫秒)。
console.timeEnd(name)
停止同名的计时器并输出所耗时间(毫秒)。
console.profile([title])
打开Javascript性能测试开关。可选参数title会在打印性能测试报告时在报告的开头输出。
console.profileEnd()
关闭Javascript性能测试开关并输出报告。
console.count([title])
Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.

但是IE是不支持console的,因此如果在IE里使用console会报错,有两种方法来解决这个问题,第一种方法是以把Firebug的js文件引入,这样IE就可以使用console了。第二种方法是在IE里手动创建一个console变量,这样虽然不能输出调试结果,但IE也不会报错了,代码如下:

 代码如下 复制代码

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

时间: 2024-10-23 10:42:43

javascript控制台console用法详解的相关文章

js中 javascript:void(0) 用法详解_javascript技巧

javascript:void(0)表示不做任何动作.如: 复制代码 代码如下: <a href="javascript:void(0);" onclick="alert('ok');"></a>  这里表示这个链接不做跳转动作,执行onClick事件. 我想使用过ajax的都常见这样的代码: 复制代码 代码如下: <a href="javascript:doTest2();void(0);">here<

js中console用法详解介绍(非常实用)

编辑注:console控制台的方法,你是不是只使用过常见的log.table.或者time,这篇文章介绍了更多console的实用方法,例如dir(显示对象内容).profile(性能分析器)等. 控制台(Console)是Firebug的第一个面板,也是最重要的面板,主要作用是显示网页加载过程中产生各类信息. 一.显示信息的命令 Firebug内置一个console对象,提供5种方法,用来显示信息. 最简单的方法是console.log(),可以用来取代alert()或document.wri

Javascript中的return作用及javascript return关键字用法详解_javascript技巧

javascript 中的return一直用的都比较火,关于javascript中的return作用大家了解吗,下面通过本文给大家详细介绍,具体内容如下所示: return 语句从当前函数退出,并从那个函数返回一个值. 语法: return[()[expression][]]; 可选项 expression 参数是要从函数返回的值.如果省略,则该函数不返回值. 用 return 语句来终止一个函数的执行,并返回 expression 的值.如果 expression 被省略,或在函数内没有 re

javascript some()函数用法详解_php技巧

参数说明 callback: 要对每个数组元素执行的回调函数. thisObject : 在执行回调函数时定义的this对象. 功能说明 对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false.它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽略. 回调函数可以有三个参数:当前元素,当前元素的索引和当前的数组对象. 如参数

javascript Location 对象用法详解

Location 对象 Location 对象包含有关当前 URL 的信息,是 Window 对象的一个部分,可通过 window.location 属性来访问 Location 对象属性 href属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL,因此,我们可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容     语法:location.href = URL;     实例:location.href = 'http://www.111cn.net';

Javascript 字符串对象用法详解

 代码如下 复制代码 var a = "abcDEfGgdefg32asdf38"; document.write("原始:"+a+"<br />") document.write("粗体:"+a.bold()+"<br />"); document.write("大号:"+a.big()+"<br />"); document.w

JavaScript中eval()函数用法详解_javascript技巧

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva

JavaScript中switch语句的用法详解

  这篇文章主要介绍了JavaScript中switch语句的用法详解,是JS入门学习中的基础知识,需要的朋友可以参考下 可以使用多个if... else if语句,如前面的章节,执行多路分支.然而,这并不总是最佳的解决方案,尤其是当所有分支的依赖单一的变量的值. 使用JavaScript1.2开始,你可以用它处理的正是这种情况,使用一个switch语句,它这样做更有效,如果不是反复地使用if... else if语句. 语法 switch语句的基本语法给出一个expression ,以评估计算

javascript jquery-jquery中getScript()的用法详解,从一个远程js文件中读取数据

问题描述 jquery中getScript()的用法详解,从一个远程js文件中读取数据 第一个html文件: <html> <head> <script type="text/javascript" src="jquery-2.1.3.js"></script> $.getScript("shuj.js",function(){alert("aaaaa");}) </hea