随着JS在Web前端中能做的事情越来越多,责任越来越大,而地位也越来越重要。传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息,那个窗口着实不太美观,而且会遮挡部分页面内容,着实有些不太友好。

另一方面,alert的调试信息,必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句,才能正常工作,并且alert会阻碍页面的继续渲染。这就意味着开发人员调试完成后,必须手动清除这些调试代码,实在有些麻烦。

所以,新一代的浏览器Firefox、Chrome,包括IE,都相继推出了JS调试控制台,支持使用类似”console.log(xxxx)”的形式,在控制台打印调试信息,而不直接影响页面显示。以IE为例,它看起来像这样:

好吧,再见丑陋的alert弹出框。而以Chrome浏览器为首的后起之秀,为Console扩展了更丰富的功能:

你以为这样就满足了?Chrome开发团队的想象力实在不得不让人佩服:

好了,稍微多说了一点点题外话。总之,控制台以及浏览器内置Console对象的出现,给前端开发调试带来了极大的便利。

有人会问,这样的调试代码不一样需要在调试完成后进行清理吗?

关于这个问题,如果在使用console对象之前先进性存在性验证,其实不删除也不会对业务逻辑造成破坏。当然,为了代码整洁,在调试完成后,还是应尽可能删除这些与业务逻辑无关的调试代码。

新一代调试王者Console的更多相关文章

  1. Chrome浏览器调试,console简述

    作为一个前端开发者,不可避免的需要进行各种各样的调试. 在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程 ...

  2. 调试必备---console

    一.前言 可能很多前端er会习惯用 alert() 方法来进行调试,但我相信更多的人会使用 console.log(),因为它不用像 alert() 那样会有字符长度限制,也不会中止程序的进程,而且还 ...

  3. !学习笔记:前端测试 、前端调试、console 等

    http://www.cnblogs.com/rubekid/p/4851988.html 你真的了解 console 吗 2014 http://www.codeceo.com/article/ja ...

  4. Javascript调试利器console的使用

    一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次 ...

  5. JavaScript调试中Console命令

    JS调试中,用console.log 感觉比 alert 好用,不用弹出窗口,还要关闭.除了console.log()其他命令没怎么用过,先在这里记一下,用到时在看看 一.显示信息的命令 consol ...

  6. javascript 调试 使用console.table()

    或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于: 主要用来输出对 ...

  7. 实验吧-密码学-他的情书(进一步了解js代码调试和console.log)

    打开网站,在白色背景下的任一点上点击鼠标,白色部分都会消失(包括password输入框),那么就无法输入. 查看源码,发现是明显的从源码解决问题. 火狐F12查看器查看源码(如果是简单的操作,可以vi ...

  8. firebug的调试,console

    console.log() console.warn()  警告 console.error()  错误 console.group()  分组 console.grounpEnd() 分组结束 co ...

  9. JavaScript常见调试方法

    编辑导语:javascript调试方法,常见使用alert和console来定位出错和输出的结果是否是想要的,在chrome中,还可以使用断点来看运行的情况等,本文介绍了比较全面的调试方法,你知道co ...

随机推荐

  1. 转:Java并发编程与技术内幕:线程池深入理解

    版权声明:本文为博主林炳文Evankaka原创文章,转载请注明出处http://blog.csdn.net/evankaka 目录(?)[+] ); } catch (InterruptedExcep ...

  2. ArcGIS Server管理工具之批量发布动态地图服务工具.md

    友好阅读链接:(http://swj.me/2015/08/26/batchPublishtools/) update0918: 修复了创建链接文件时而出错的bug 修复了在24011的警告已处理的情 ...

  3. python学习笔记(二)— 集合

    s = set()#建立空的集合 s2 = {'}#没有:的为集合,集合天生去重 s3 = {'} #集合是也是无序的 # s2.add('a')#添加值 # s2.remove('2')#删除值 # ...

  4. 通过virt-manager 利用NFS创建、迁移虚拟机2

    前面一篇文章介绍了利用NFS创建虚拟机的过程,本文就介绍下如何利用NFS对虚拟机进行动态迁移. 动态迁移就是把一台虚拟机在不停止其运行的情况下迁移到另一台物理机上.这看起来似乎不太可能,不过还好kvm ...

  5. Django REST framework 理解

    ​ Web应用模式 1 .前后端不分离:在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与厚度那的耦合度很高. 这种应用模式比较 ...

  6. mysql数据库从删库到跑路之mysql数据类型

    一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...

  7. C#中获取音频文件时长

    1.在项目中添加引入:COM组件的Microsoft Shell Controls And Automation 2.在引用中找到Shell32,点击右键,在属性中将“嵌入互操作类型”的值改为“fal ...

  8. Tomcat内部结构及请求原理(转)

    Tomcat Tomcat是一个JSP/Servlet容器.其作为Servlet容器,有三种工作模式:独立的Servlet容器.进程内的Servlet容器和进程外的Servlet容器. Tomcat的 ...

  9. ACM对拍程序

    1.把所需对拍的代码的可执行文件a.exe b.exe放在同一目录下 2.把rand数据的代码的可执行文件c.exe放在该目录下 3.新建一个txt文件,里面添加代码,后把格式改成bat @echo ...

  10. 【c++ primer, 5e】函数匹配

    练习 6.49 候选函数:与所调用的函数的名字相同的函数的集合. 可行函数:给候选函数加上参数数量.参数类型的约束所得到的函数的集合. 6.50 a 3.4可行,二义匹配 b 2.4可行,2是最佳匹配 ...