学习javascript中的Console对象

163 阅读4分钟

在开发环境中,开发人员需要记录有用的调试信息和打印流量变量值。因此,应用程序必须访问浏览器窗口的控制台功能。

为此,javascript提供了Console对象来记录信息到控制台窗口。

控制台对象的行为可以因浏览器而异。

所有流行的浏览器都支持控制台对象的主要功能。

这个对象是一个全局对象,可以在任何地方自由访问。

控制台对象的所有信息都输出到浏览器的控制台窗口。

如何打开浏览器的控制台窗口?

在所有流行的浏览器中都可以启用控制台窗口。

在浏览器上点击右键(更多工具+开发工具),选择 "检查"选项,就可以打开Chrome浏览器的控制台窗口,窗口打开后选择控制台标签,如下图所示
chrome console window inspect

火狐浏览器的控制台窗口_将使用**Firebug扩展**或内置的_开发工具_控制台打开。

对于Safari浏览器,请看Safari开发者工具文章。

控制台对象日志的语法

console.log(  object1,{optional objects});

console.log(  message1,{optional objects});

console.log有两种变体。一种是有参数,包含一个对象列表,第一个对象是必须的。另一种是有消息,后面有零个或多个对象。

控制台对象的方法

控制台对象有很多方法用于调试日志/不同的记录器格式/显示定时器信息。

assert()方法

如果assert为假,则打印日志信息到控制台,如果为真,则不返回。这在单元测试javascript对象时很有用。

语法

console.assert(assertion, {List of objects, Atleast One is required); console.assert(assertion, messages {list of options/objects});

例子

下面是一个控制台断言方法的例子

console.assert(false, "test passed");  
// outputs "VM339:1 Assertion failed: test passed" message colored in red to console
console.assert(true, "test failed"); // outputs nothing to console

clear()方法

该方法清除控制台信息。

如果设置了保存选项,则在控制台窗口输出 "console.clear() was prevented due to 'Preserve log'' 如果没有设置保存选项,则输出消息 "console was cleared"

语法和例子:-

控制台清除的语法和例子如下

count()方法的用法

这个方法记录了被调用的计数次数。

语法 :-

console.count(\[label\]); // syntax has label which is optional

例子:-

console.count('calledcount'); // outputs  calledcount:1 

console.count('calledcount'); // outputs  calledcount:2


console.count('calledcount'); // outputs  calledcount:3

dir()方法的用法

以分层树状(childs)形式输出javascript对象及其属性信息。

语法和例子

console.dir(object);  // Syntax
console.dir(document.body); // outputs body object data in tree form as shown in below diagram

输出:

console dir method example

dirxml()方法的用法

以XML/HTML的形式将javascript对象的数据打印到控制台窗口。

语法和例子:-

console.dirxml(object);
console.dirxml(document.body); // outputs body object data in html form as shown in below diagram.

console object dirxml method

Group(), groupEnd()和GroupCollapsed()方法的用法

这些方法是用来将控制台的日志信息和显示的数据按层次格式分组,如下图所示。

你可以使用group()方法在组内创建一个嵌套的组。groupCollapse创建新的组+默认打开组。

语法和例子:-

console.log("My Computer");

console.group();

console.log("C-Drive");

console.log("c-drive-file");

console.groupEnd();

console.group();

console.log("D-drive");

console.warn("D-drive-File");

console.groupEnd();

console.log("File-2");

console.log("File-3");

console object group methods

table()方法的用法

以表格格式显示数据。这对于打印对象的数组到控制台是很有用的。

语法

console.table(data \[, columns\]);

参数:

  • data:- 要打印的数据数组或对象数据
  • 列:输出中包含的列数组

例子

  
function Employee(name, salary) {  
  this.name = name;  
  this.salary= salary;  
}  
var emp1 = new Employee("Sai", "9000");  
var emp2 = new Employee("Ganesh", "8000");  
var emp3 = new Employee("Venkat", "5000");  
  
console.table([emp1,emp2,emp3]);  
  

请看截图形式的输出是怎样的

console Object table method example

该方法用于记录操作/计算处理所花费的时间。
time() 方法初始化并启动计时器,当遇到timeEnd时,计时器停止并记录花费的时间。

console info()方法的用法

记录信息消息到Web控制台

trace()方法的用法

trace方法记录当前请求线程的堆栈跟踪。

语法

console.trace()

warn()方法

将警告信息打印到网络控制台

语法

console.warn(Obj1,\[list of objects\])

console.warn(msg,\[list of objects\])

Error()方法的用法

打印错误信息到网络控制台。其语法与log方法相似。

以下5条日志信息,类型从左到右依次为:左边为关键信息,右边为低信息。

致命->错误->警告->信息->调试

总结

Console对象是javascript中一个重要的本地对象。它有助于将调试日志打印到浏览器的控制台。