`

Javascript的console.log()用法

    博客分类:
  • js
 
阅读更多

转载:http://www.ok12.net/js/about-js-console-log.html

把下面代码保存为html文件,然后IE8---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=gb2312" />
<title>javascript的console.log()用法</title>
<script type="text/javascript">
/*
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"}]]
*/
</script>

</head>

<body>
</body>

</html>

 

附:

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

分享到:
评论

相关推荐

    node.js中的console.log方法使用说明

    它和浏览器端JavaScript中的console.log()用法相似,但Node.js版本的console.log方法在底层实现上有所不同。 2. 语法 console.log()方法的语法如下: console.log([data1], [data2], ..., [dataN]) 方法可以接受...

    JavaScript调试技巧之console.log()详解

    JavaScript调试是...通过熟练掌握`console.log()`及其相关方法,JavaScript开发者能够更高效地定位和解决代码中的问题,提升开发效率。在实际项目部署时,记得移除或注释掉这些调试语句,以保持代码的整洁和性能。

    JS中捕获console.log()输出的方法

    以上便是捕获JavaScript中console.log()输出内容的方法和一些使用技巧。掌握了这些技术,我们可以更加灵活地进行程序的调试和优化工作。希望本文所述内容能够对您的JavaScript程序设计工作有所帮助。

    filter-console过滤掉不需要的console.log()输出

    它的主要功能是拦截`console.log()`及其他相关console方法(如`console.info()`, `console.warn()`, `console.error()`等),并允许开发者定义规则,筛选出希望看到的日志信息。 这个库的使用非常简单。首先,你...

    javascript代码调试之console.log 用法图文详解

    总的来说,`console.log`以及相关的控制台方法在JavaScript调试中扮演着至关重要的角色。它们不仅可以帮助你查看变量的当前状态,还可以输出错误、警告,甚至分析代码执行的效率。熟悉并熟练使用这些方法,能够极大...

    util-console.log:一个可配置的轻量级 console.log 增强器,使用

    util-console.log 一个可配置的轻量级 console.log 增强器,使用:chalk、moment、util、打包为 npm 模块安装npm : npm install util-console.log用法使用console.log() 、 console.debug() 、 console.error()或...

    javascript的console.log()用法小结

    JavaScript的`console.log()`函数是开发者在进行前端编程时用于调试的常用工具,尤其在现代浏览器中,它扮演着不可或缺的角色。最初,`console.log()`是Firefox通过安装Firebug扩展提供的一项功能,但随着浏览器技术...

    meteor-bound:例如,允许console.bound.log替代console.log.bind(console)

    由于我们还没有任何语法可以帮助,例如console-&gt;log ,我们还可以使用一种方法来引用console方法,该方法自动绑定到console ,这就是该程序包所实现的。用法虽然这打破了: [ 1 , 2 , 3 ] . forEach ( console . ...

    fauxconsole 解决IE的console.log问题

    在IT行业中,开发者经常面临一个头疼的问题,那就是在Internet Explorer(IE)浏览器中使用`console.log()`时,由于IE早期版本并不支持这个功能,导致调试代码变得困难。为了解决这个问题,开发者们创造了一个名为...

    javascript 中的console.log和弹出窗口alert

    console.log是JavaScript中的全局对象console的方法,常用于在开发阶段输出调试信息到控制台。其主要优点包括: - 输出结构化数据:例如数组和对象,输出时可以看到具体的键值对或数组元素。 - 不干扰页面其他操作...

    js console.log打印对象时属性缺失的解决方法

    在JavaScript开发中,console.log()是用来调试代码的常用方法之一,它可以帮助我们追踪程序的执行流程以及变量的状态。然而,在调试对象时,可能会遇到对象属性不完整的问题,这会对我们获取正确的信息造成困扰。在...

    从console.log说起(console.log详细介绍)

    通常,开发者在JavaScript代码的任何部分调用console.log函数,就可以在浏览器的开发者工具中的控制台输出指定变量或表达式的值。console.log的基本用法非常简单,如console.log('123');可以直接输出字符串"123"。 ...

    js调试工具console.log()方法查看js代码的执行情况

    现代的浏览器几乎都内置了开发者工具(Developer Tools),其中console.log()方法是调试JavaScript代码时最常用的工具之一。 console.log()方法用于向浏览器控制台输出信息,可以打印变量、函数、数组、对象等各种...

    Pretty-console.log:一个极简主义的模块,用于更改console.log的行为并使之更漂亮

    安装npm install pretty-console.log用法var pcl = require ( "pretty-console.log" )pcl . enable ( ) // The next calls to console.log will be prettifiedpcl . disable ( ) // The next calls to console.log ...

    jquery.log.js:JQuery 的 console.log 包装器

    这将输出包含 jQuery 元素作为关联元素的console.log消息通过首先使用参数散列调用$.log函数来扩展默认设置 $ . log ( { /* activate the logger */ active : true , /* outputs console.trace() after the log

    console.log控制台信息前台显示代码.zip

    这样,当`console.log()`、`console.error()`等方法被调用时,对应的文本就会在页面上生成,形成一个友好的前端日志系统。 使用`screenlog.js` 插件的基本步骤如下: 1. **引入插件**:首先,需要在HTML文件中引入...

    JavaScript中的console.log()函数详细介绍

    JavaScript中的`console.log()`函数是开发者调试代码时常用的工具,它允许我们在浏览器的开发者控制台输出信息,以便检查变量的状态、跟踪代码执行流程等。相比`alert()`函数,`console.log()`的优势在于它不会中断...

    js console.log打印对像与数组用法详解

    在打印数组时,console.log的使用方法与打印对象类似。比如有一个数组: ```javascript var myArray = [1, "test", {"id": 1, "content": "test"}]; console.log(myArray); ``` 这段代码会打印出数组myArray,包括...

Global site tag (gtag.js) - Google Analytics