在大多数浏览器中,我们可以使用 console 对象往控制台记录各种信息,以方便发现 JavaScript 的问题。
IE 按 F12,Firefox 按 Ctrl+Shift+K,Chrome 按 Ctrl+Shift+J,Opera 按 Ctrl+Shift+I,Safari 按 Ctrl+Alt+I,可以打开控制台查看所记录的信息。注意 IE6 和 IE7 没有 console 可以使用,而 IE8 和 IE9 中虽然有 console,但是必须先打开才能使用,否则会出错。
控制台函数中最常用的是 console.log(),console.info(),console.warn() 和 console.error() 。这几个函数的用法一样,只是浏览器的控制台会按照它们的类型(日志,消息,警告,错误)分类显示这些信息。具体的使用例子如下:
console.log("some log"); // some log console.info("some info", "more info", 123); // some info more info 123 console.warn("warning: %s occured", "some problem"); // warning: some problem occured console.error("error: %d number", 10); // error: 10 number
从上面几个例子可以看出,这几个函数都可以接收多个参数,如果参数不是字符串,将会自动转化为字符串输出。而且也可以使用类似 C 语言的 printf 函数的格式符形式的参数。所有可用的格式符如下:
格式符 |
作用描述 | IE 版本 | Firefox 版本 | Chrome 版本 | Opera 版本 | Safari 版本 |
%s |
格式化字符串 | IE 9 | Firefox 9 或 FireBug 扩展 | 全部 | 无 | Safari 5.1 |
%d 或 %i |
格式化整数 | IE 9 | Firefox 不支持,需 FireBug 扩展 | 全部 | 无 | Safari 5.1 |
%f |
格式化浮点数 | IE 9 | Firefox 不支持,需 FireBug 扩展 | 全部 | 无 | Safari 5.1 |
%o |
格式化 DOM 元素 | IE 9 | Firefox 9 或 FireBug 扩展 | 全部 | 无 | Safari 5.1 |
%O |
格式化 JavaScript 对象 | IE 9 | Firefox 不支持,需 FireBug 扩展 | 全部 | 无 | Safari 5.1 |
%c |
应用 CSS 样式输出 | 无 | Firefox 不支持,需 FireBug 扩展 | 全部 | 无 | 无 |
在 Chrome 或者 FireBug 中还有更多的 console 函数可以使用,详情可以看后面的参考资料。
参考资料:
[1] 使用开发人员工具调试脚本 - MSDN
[2] console - Document Object Model (DOM) | MDN
[3] Using the Console - Chrome Developer Tools - Google Developers
[4] How to open the JavaScript console in different browsers?
[5] Firebug控制台详解 - 阮一峰的网络日志
[6] Does IE9 support console.log, and is it a real function?