[收藏]利用 Console 来学习、调试JavaScript

标签: 收藏 利用 console | 发表时间:2014-03-30 10:57 | 作者:MaxOmnis
出处:http://www.iteye.com

http://www.cnblogs.com/leejersey/archive/2012/11/27/2790998.html

 

利用 Console 来学习、调试JavaScript

 

一  什么是 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+版本后才有。

 

总结: Console 是帮助我们学习和调试 JS的 1 个非常好工具,如果你以前没用过,哪现在就开始用它吧。

你会发现它能帮你省很多开发时间的。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [收藏 利用 console] 推荐:

[收藏]利用 Console 来学习、调试JavaScript

- - Web前端 - ITeye博客
利用 Console 来学习、调试JavaScript. 一  什么是 Console. Console 是用于显示 JS和 DOM 对象信息的单独窗口. 并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 二  什么浏览器支持 Console. 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.

Firebug Console API 与命令行

- 红茶 - WEB前端开发
前几天有人问我关于firebug console的问题,其实我平时用的最多也就是console.log,相当于alert(). 还真没深入了解其他的api,今天在jsmix上看到了,所以转载过来分享一下 Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用.

10个chrome console实用小技巧

- - 黑客志
让我们先从最常见的console.log开始,console.log负责将输入的一个或多个参数写入console,因此,如果你需要输出较为复杂的表达式,可以直接将它们分割为多个参数,而不需要用+进行手动拼接:. 除此之外,你也可以使用格式化字符来达到同样效果:. 除了d%和是%s,chrome console支持以下格式化字符,后面我们会详细说明:.

(收藏)PhantomJS

- - jackyrong
JavaScript 标准参考教程(alpha). 来自《JavaScript 标准参考教程(alpha)》,by 阮一峰. 有时,我们需要浏览器处理网页,但并不需要浏览,比如生成网页的截图、抓取网页数据等操作. PhantomJS的功能,就是提供一个浏览器环境的命令行接口,你可以把它看作一个“虚拟浏览器”,除了不能浏览,其他与正常浏览器一样.

常用库收藏

- - 崔永键的博客
1.mocha:一个简单、灵活有趣的 JavaScript 测试框架(类似的还有should,supretest). 2.gruntjs:迄今为止node世界中最流行的构建工具. 3.gulp.js:宣称取代gruntjs的东东. 4.node-inspector:nodejs代码调试神奇,结合浏览器Chrome-Debug,轻量,方便.

转+收藏:LINUX书架

- flychen50 - 膘叔
在做PHP开发的同时,不可避免的会使用linux. 好吧,即使你不精通linux,你怎么着也得会一些常见的命令吧,不说高深的东西,最起码你要会cp,mv,chmod,chown,tar之类的,否则,你连文件都无法移动位置. 国内在02~03年左右,鸟哥的私房菜大概是影响了很多人吧,由于我一直是在win下,所以LINUX接触不多,但也确实听说了这个.

个人收藏之杂图[37]

- 俊峰 - 动漫茶馆
回家休息的差不多了,今天把WP更新到3.2了,因为听说3.2版本比3.0,3.1啥的要强不少.不过升级后最直观的感觉就是后台的界面变得好看了些= =新番介绍会写的,而且应该会挺快(毕竟比四月番少了好多啊,感觉轻松不少)~. 本来想传个快盘或者DBank的,但是家里网速实在是不给力.如果要补档的话,等我过几天回学校再说吧~.

FreeHideFolder,收藏你的機密檔案

- Aaron Xu - 免費資源網路社群
免費資源網路社群的朋友大家安安,還記得我嗎. 我是 Boring,最近維基解密鬧得沸沸揚揚,讓 Boring 也不得不對自己的機密檔案嚴加管理,免得被別人發現我電腦裡頭最私密的資料,到時候變成台灣陳冠C就來不及啦. 因此今天要介紹這款好用的免費軟體- FreeHideFolder. 軟體名稱: FreeHideFolder.

袖子文件收藏夹 – 像收藏网站一样收藏你的文件夹 | 小众软件 > 桌面工具

- Xin - 小众软件
袖子文件收藏夹 是一款为解决作者自身需求而诞生的软件. 在电脑上,无论是工作还是娱乐经常要用到的文件夹或者文件就那么几个,还经常隐藏在很深的路径下,每次要打开都要一个一个的路径进去,点击好多下,无意中关掉了窗口还得重新打开. 安装袖子文件收藏夹后,会集成入右键菜单. 只需对着文件夹右键,选择添加到 袖子文件收藏夹.

设计收藏 国外photoshop教程网站

- shan - Poboo
很多photoshop设计初学者,都是通过网上教程学习,一个好的photoshop教程,可以帮助你快速的提高,这里为大家整理了一些国外优秀的photoshop教程网站,给初学者,和专业设计师,通过这些网站,无论是临摹还是获得创意灵感,都对你的设计能力有很大的帮助,关注设计的朋友还可以浏览一下: 10个网站提高你的创意理念..