利用 Cosole 来学习、调试JavaScrip
2019独角兽企业重金招聘Python工程师标准>>>
一 什么是 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
后面的所有 demo 除特别说明外,都是使用 firebuglite在 IE8 下的测试截图。
三 为什么不直接使用 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
五 console.debug,info,warn,error
这 4 种方法与 log 方法使用一模一样,只是显示的图标和文字颜色不一样,e.g
六 console. assert(expression[, object, ...])
assert 方法类似于单元测试中的断言,当 expression 表达式为 false 的时候,输出后面的信息,e.g:
注:assert 方法在 firebuglite 不支持,Chrome 和 FireBug 支持
七 console.clear()
该方法清空 console 中的所有信息
八 console.dir(object)
以列表的方式打印 object 对象中的所有属性,e.g:
九 console.dirxml(node)
把 html 元素的html 代码打印出来,e.g:
十 console.trace()
trace 方法可以查看当前函数的调用堆栈信息,即当前函数是如何调用的,e.g:
十一 console.group(object[, object, ...]), groupCollapsed, groupEnd
这 3 个函数用于把 log 等输出的信息进行分组,方便阅读查看。groupCollapsed
方法与 group 方法一样,只是显示的分组默认是折叠的,e.g:
十二 console.time(name)/console.timeEnd(name)
我们经常需要测试 js 函数的执行时间,可能我们自己写代码在第1 条语句和
最后 1 条语句取当前时间相减。这组函数其实就实现了这样的功能,time(name)根据 name 创建 1 个新
的计时器。timeEnd(name)停止给定name 的计时器,并显示时间。e.g:
十三 console.profile(name)/console.profileEnd()
这组方法用于打开浏览器的分析器,用于分析这组函数之间的 js 执行情况,
e.g:
注:firebuglite 不支持 profile 功能,上图是 FireBug 的截图,Chrome 支持 profile,但分析的内容不
一样,感兴趣的同学可以自己研究下。
十四 console.count([title])
count 方法用于统计当前代码没执行过多少次,title 参数可以在次数前面输出
额外的标题以帮助阅读,e.g:
注: firebuglite 不支持 count 方法,上述代码在 Chrome 中会打印 1000 次,显示没有 FireBug 那么友好。
十五 console.exception(error-object)
exception 方法用于打印异常对象,与 log 打印不一样是,except ion 还会打印
该异常调用的堆栈信息,e.g:
注:exception 方法是 FireBug 独有的方法,Chrome 和 firebuglite 都不支持。
十六 console.table(data)
table 方法把data 对象用表格的方式显示出来,这在显示数组或者格式一样的
JSON 对象的时候非常有用。e
注:table 只支持 FireBug,而且是在 firebug1.6+版本后才有。
总结:
Console 是帮助我们学习和调试 JS的 1 个非常好工具,如果你以前没用过,哪现在就开始用它吧。你
会发现它能帮你省很多开发时间的。
转载于:https://my.oschina.net/leeming/blog/34278
利用 Cosole 来学习、调试JavaScrip相关推荐
- 【AAAI Oral】利用深度增强学习自动解数学题,准确率提升15%
[AI科技大本营导读]增强学习和人类学习的机制非常相近,DeepMind已经将增强学习应用于AlphaGo以及Atari游戏等场景当中.作为智能教育领域的引领者,阿凡题研究院首次提出了一种基于DQN( ...
- 如何利用.pdb文件去调试
如何利用.pdb文件去调试 转载自:http://www.cnblogs.com/metaboy/archive/2010/04/20/1716316.html 问题需求: 1.需要去调试一个exe, ...
- 如何利用ide进行跟踪调试_使用调试器进行事后跟踪
如何利用ide进行跟踪调试 我最近一直在使用的大多数调试器的好功能是能够在断点上记录信息. 这对于理解代码而无需修改是非常有用的,因为它涉及字节码修改. 让我们考虑一下这种非常琐碎且效率低下的函数实现 ...
- tomcat开发远程调试端口以及利用eclipse进行远程调试
一.tomcat开发远程调试端口 方法1 WIN系统 在catalina.bat里: SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compi ...
- Talk预告 | 普渡大学王虓:如何利用合作对抗学习来提升自监督学习
本期为TechBeat人工智能社区第428期线上Talk. 北京时间8月4日(周四)20:00,普渡大学在读博士生--王虓的Talk将准时在TechBeat人工智能社区开播! 他与大家分享的主题是: ...
- 利用fiddler和mock调试本地微信网页
利用fiddler和mock调试本地微信网页 微信公众号网页是比较特殊的页面,普通页面直接打开即可访问,但对于需要请求微信相关接口的部分需要安全域名认证.这导致了使用mock数据进行开发的页面没办法走 ...
- 领英利用深度表征学习提升人才搜索和推荐系统
本文介绍了领英利用深度表征学习模型来提升人才搜索和推荐系统. 领英征才解决方案(LinkedIn Talent Solutions,LTS)业务为领英贡献了大约 65% 的年收入,该业务方便职位提供者 ...
- 如何利用朋友圈学习和提升自己?
大多数人都开通着朋友圈,即使不经常发,也会时不时的点击刷一下,生怕错过了天下大事.但往往刷了朋友圈也就刷了,看一乐呵. 既然在朋友圈已经花时间了,那么,是否可以利用它来刷新一些认知.学习一些技能.激励 ...
- 利用开发者工具远程调试Android时,华为手机无法被识别
利用开发者工具远程调试Android时,华为手机无法被识别的解决办法: 安装华为手机助手,成功安装华为手机驱动,重启USB调试,就可以了. 参考资料: 远程调试Android设备使用入门 键盘快捷键参 ...
最新文章
- Nature:MIT团队造全新声感织物,这件“毛衣”可以听到你的心跳
- 大叔手记(10):别再让面试官问你单例
- VirtualBox通过命令方式批量创建并配置虚拟机
- 转:PHP非阻塞模式
- C语言试题八十五之狼追兔子问题
- C语言--结构体与内存对齐准则简单理解
- 王者荣耀总决赛因天气原因延期 玩家获得皮肤碎片等补偿
- vue 图片引入_一个Vue的时间插件
- 【CodeForces】947 D. Picking Strings
- linux【文件操作】命令详解
- HTML简单登录界面的实现
- 什么是远程桌面连接?如何操作远程桌面?
- python中的subprocess.Popen()使用
- 【QImage类常用函数】
- C---------------LessonCircle
- 谷安kali密码破解小结(crunch字典生成)
- Java吃货联盟订餐系统
- echolife hg8245说明书_【当贝市场】华为HG8245移动版完美设置图文教程
- OpenLayers基础教程——要素的编辑
- 单应性矩阵Homography计算和优化
热门文章
- ef 数据迁移mysql_07116.3.0如何将CM的外部PostgreSQL数据库迁移至MySQL服务
- synchronized的基本认识
- 思考如何保证线程并行的数据安全性
- MyBatis 集成到Spring 的原理是什么?
- 任务调度框架Quartz基本介绍
- 运行第一个docker容器
- AtomicIntegerFieldUpdater字段原子更新类
- 无法访问python官网_python写的网站,云服务器经常无法访问
- python 函数参数_python之函数(二)——函数参数详解
- mysql 5.7 速度很快_MySQL5.7速度比MySQL5.6快3倍