javaScript 关于console的理解

1、什么是console

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象，使用该对象可以输出信息到 Console 窗口中。

JS中默认没有console对象, 这是某些浏览器提供的浏览器内置对象, 低版本IE就没有, 其他主流浏览器应该都有.

2、关于支持console的浏览器

很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支持不好。比如 IE8 自带的开发工具虽然支持 Console，但功能比较单调，显示对象的时候都是显示 [Object,Object]，而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar，但也不支持 console。Safari、Opera 都支持 Console，但使用上都没有 FireBug和 Chrome 的方便。现在firebug推出了 firebuglite工具，可以让所有浏览器都支持Console功能，而且使用上和FireBug 几乎一样。详见 http://getfirebug.com/firebuglite。

3、console的使用方式

console.log(object[, object, ...])
在控制台输出一条消息。如果有多个参数，输出时会用空格隔开这些参数。

第一个参数可以是一个包含格式化占位符输出的字符串，例如：

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

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

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

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

console.log( " I am %s and I have: " , myName, thing1, thing2, thing3);

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

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.

格式化字符串	类型
%s	字符串
%d, %i	整型（暂不支持数字型）
%f	浮点型（暂不支持数字型）
%o	链接对象

javaScript 关于console的理解相关推荐

javascript中 (function(){})();如何理解?
javascript中 (function(){})();如何理解? javascript中: (function(){})()是匿名函数,主要利用函数内的变量作用域,避免产生全局变量,影响整体页面环 ...
JavaScript 控制台(console)调试技巧
一.简单理解 Console是用于显示JS和DOM对象信息的单独窗口.在浏览器中按F12调出的调试窗口中有一个控制台选项或console选项. 二.支持console的浏览器 Chrome和FireF ...
IE下javascript的console方法
IE下javascript的console方法 FireFox 和 Chrome 下调试JS都有console,IE6下没有.特用此办法来兼容IE6. <br /><pre lang ...
javascript 中 console 的用法
javascript 中 console 的用法视频 https://www.bilibili.com/video/BV1g7411L751?from=search&seid=1567656 ...
前端周报：前端面试题及答案总结；JavaScript参数传递的深入理解
1.2017前端面试题及答案总结 |掘金技术征文 "金三银四,金九银十",用来形容求职最好的几个月.但是随着行业的饱和,初中级前端er就业形势不容乐观. 行业状态不可控,我们能做的 ...
javascript匿名函数的理解
复制粘贴 [color=red]点评:请记住,关键点是理解javascript的函数概念(参考w3cshool对函数的描述,搜索关键字:ECMAScript 函数).以及()的运算的理解. 比如:va ...
HTML控制台输出console,Javascript的console.log()用法
把下面代码保存为html文件,然后IE8---F12---脚本---控制台里就会出现有趣的东西,如果是Firefox,安装了FireBug后,则F12--控件台--所有 ,同样可以看到. javasc ...
JavaScript原型链的理解
一.原型链的概念 JavaScript是一门面向对象的编程语言,JavaScript 中的所有事物都是对象,并且对象与对象之间不是彼此独立的,而是有"继承"关系的. 这种" ...
JavaScript闭包函数的理解与使用
要理解闭包,首先理解javascript特殊的变量作用域,变量的作用域无非就是两种: 全局变量局部变量 javascript语言的特殊处就是函数内部可以读取全局变量. 1.如何从外部读取局部变量我 ...
JavaScript --- [学习笔记]观察者模式理解对象工厂模式构造函数模式
说明本系列(JS基础梳理)为后面TCP的模拟实现做准备本篇的主要内容: 观察者模式.工厂模式.构造函数模式和对对象的理解 1. 观察者模式参考JavaScript设计模式 1.1 消息注册方 ...

javaScript 关于console的理解

1、什么是console

2、关于支持console的浏览器

3、console的使用方式

javaScript 关于console的理解相关推荐

最新文章

热门文章