注意:一般直接在js中用
window.console.log(变量),不要连接字符串,否则都变成object了
不要这样window.console.log("aaa"+变量),
window.console.table(变量); //table的方式显示
一 什么是 Console
Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。
二 什么浏览器支持 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
三 为什么不直接使用 alert 或自己写的 log
使 用 alert 不是一样可以显示信息,调试程序吗?alert 弹出窗口会中断程序, 如果要在循环中显示信息,手点击关闭窗口都累死。而且 alert 显示对象永远显示为[object ]。 自己写的 log 虽然可以显示一些 object 信息,但很多功能支持都没有 console 好,看完后面 console 的介绍就知道了。
(部分比较鸡肋的方法没有列出来,用粗蓝标出来的是常用的方法)
四 Console.log(object[, object, ...])
Console.log 是最简单输出信息到 console 窗口的方法,支持多个参数,该方法会把 这些参数组合在一起显示,e.g:
log 方法第一个参数支持类似 C 语言 printf 字符串替换模式,Log 支持下面几种替换模式:
- %s 代替字符串
- %d 代替整数
- %f 代替浮点值
- %o 代替 Object
e.g:
五 console.debug,info,warn,error
这 4 种方法与 log 方法使用一模一样,只是显示的图标和文字颜色不一样.
六 console.assert(expression[, object, ...])
assert 方法类似于单元测试中的断言,当 expression 表达式为 false 的时候,输出后面的信息,e.g: 注:assert 方法在 firebuglite 不支持,Chrome 和 FireBug 支持
七 console.clear()
该方法清空 console 中的所有信息 (Chrome中不支持)
八 console.dirxml(node)
把 html 元素的html 代码打印出来,等同于log.
九 console.trace()
trace 方法可以查看当前函数的调用堆栈信息,即当前函数是如何调用的,e.g:
十 console.group(object[, object, ...]), groupCollapsed, groupEnd
这 3 个函数用于把 log 等输出的信息进行分组,方便阅读查看。
groupCollapsed 方法与 group 方法一样,只是显示的分组默认是折叠的.
十一 console.time(name)/console.timeEnd(name)
我 们经常需要测试 js 函数的执行时间,可能我们自己写代码在第1 条语句和 最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能,time(name)根据 name 创建 1 个新 的计时器。timeEnd(name)停止给定name 的计时器,并显示时间。
十二 console.profile(name)/console.profileEnd()
这组方法用于打开浏览器的分析器,用于分析这组函数之间的 js 执行情况, 注:firebuglite 不支持 profile 功能,Chrome 支持 profile,但分析的内容不详。
十三 console.count([title])
count 方法用于统计当前代码被执行过多少次,title 参数可以在次数前面输出额外的标题以帮助阅读。e.g:
十四 console.table(data)
table 方法把data 对象用表格的方式显示出来,这在显示数组或者格式一样的JSON 对象的时候非常有用。
注:table 只支持 FireBug,而且是在 firebug1.6+版本后才有。
相关推荐
很多场景下会需要获取当前网页的宽高来达到一些效果,但是获取网页的宽高这里面还是有一点(hen duo)坑的,这里我进行了总结和详解,若有补充欢迎评论补充~ 这种方式只支持IE9以及以上版本的浏览器 网页高度,...
在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒泡,...
节点摘要node相关的总结一,Node.js是什么Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine1,特性Node.js可以解析JS代码(没有浏览器安全级别的限制)提供很多系统级别的API,如:....
本文实例讲述了JavaScript常见事件对象与操作。分享给大家供大家参考,具体如下: 触发 DOM 上的事件时,会生成一个事件对象 event,它包含着所有与事件有关的信息,诸如导致事件的元素、事件的类型以及... console.l
具有响应式的基于浏览器的用户界面。 注册用户可以创建和管理IoT端点。 RESTFUL API,用于与外部应用程序集成。 包裹 该软件包是一个maven webapp项目,可以将其编译为Web应用程序归档(WAR)。 推荐套餐 用于构建...
但是,我还是想写一篇关于 js 中的 this 的文章,算是一个总结归纳吧;(大神们可以绕行看我的其他文章) 在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下...
C:\mash_activiti-5.6\apps\h2\h2_console.start.bat ,控制台 web 访问开 放端口为 8082 ) 2. 再启动 H2 数据库访问服务 ( C:\mash_activiti-5.6\apps\h2\h2.start.bat , H2 程序访问开放端口为 9092 ) ...
本文整理总结了JavaScript的小技巧。分享给大家供大家参考,具体如下: 1.组织默认事件 阻止默认事件,h5默认的input type=’date’在某些浏览器和android设备上没有效果,这时要调用h5+的时间选择器,但是要组织...
项目总结 在这个项目中,我们将通过创建一个小项目向您介绍香草JS DOM操作。 已经为您提供了基本HTML和CSS,并且您将添加Java语言以使界面具有交互性。 该项目的目标是创建一个可以使用三个不同主题的简单计数器界面...
console命令 命令行变元 预定义变量 第3章 cgi应用程序--顾客留言簿 html简介 使用cgi创建动态页面 guestbook.cgi脚本程序 定义表单以及处理表单数据 cgi.tcl软件包 接下去的几步 第4章 tcl中的字符串...
2.5 console命令 2.6 命令行参数 2.7 预定义变量 第3章 guestbook cgi程序 3.1 html快览 3.2 cgi动态页 3.3 guestbook.cgi脚本 3.4 定义表格及处理表格数据 3.5 下一步 第4章 tcl字符串处理 4.1...
<<page 1>> page begin==================== 目 目目 目 录 录录 录 第一部分 C#语言概述.4 第一章 第一章第一章 第一章 .NET 编 编 ... 比尔....这一天 微软公司正式推出了其下一代...
创建浏览器扩展,因此您不必一直复制粘贴此野兽 使用模块简化复制粘贴过程 使其可自定义以也忽略其他文件 创建一个桌面应用程序,它可以为您提供更多帮助(不再需要Dev-Tools!) 尝试将其移植到现实生活中,以便...
LDAP 技术总结 第一章LDAP 有关技术介绍......................................................................................................... 3 第一节X.500 目录服务......................................