新一代调试王者Console
随着JS在Web前端中能做的事情越来越多,责任越来越大,而地位也越来越重要。传统的alert调试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息,那个窗口着实不太美观,而且会遮挡部分页面内容,着实有些不太友好。
另一方面,alert的调试信息,必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句,才能正常工作,并且alert会阻碍页面的继续渲染。这就意味着开发人员调试完成后,必须手动清除这些调试代码,实在有些麻烦。
所以,新一代的浏览器Firefox、Chrome,包括IE,都相继推出了JS调试控制台,支持使用类似”console.log(xxxx)”的形式,在控制台打印调试信息,而不直接影响页面显示。以IE为例,它看起来像这样:

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

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

好了,稍微多说了一点点题外话。总之,控制台以及浏览器内置Console对象的出现,给前端开发调试带来了极大的便利。
有人会问,这样的调试代码不一样需要在调试完成后进行清理吗?
关于这个问题,如果在使用console对象之前先进性存在性验证,其实不删除也不会对业务逻辑造成破坏。当然,为了代码整洁,在调试完成后,还是应尽可能删除这些与业务逻辑无关的调试代码。
新一代调试王者Console的更多相关文章
- Chrome浏览器调试,console简述
作为一个前端开发者,不可避免的需要进行各种各样的调试. 在谷歌浏览器出来以前,火狐的firebug是特别有名的一款调试工具,不过自从谷歌浏览器诞生以来,其自带的开发者工具足以媲美firebug,某种程 ...
- 调试必备---console
一.前言 可能很多前端er会习惯用 alert() 方法来进行调试,但我相信更多的人会使用 console.log(),因为它不用像 alert() 那样会有字符长度限制,也不会中止程序的进程,而且还 ...
- !学习笔记:前端测试 、前端调试、console 等
http://www.cnblogs.com/rubekid/p/4851988.html 你真的了解 console 吗 2014 http://www.codeceo.com/article/ja ...
- Javascript调试利器console的使用
一.Console API Console.assert() 判断第一个参数是否为真,false的话抛出异常并且在console输出相应信息. Console.count() 以参数为标识记录调用的次 ...
- JavaScript调试中Console命令
JS调试中,用console.log 感觉比 alert 好用,不用弹出窗口,还要关闭.除了console.log()其他命令没怎么用过,先在这里记一下,用到时在看看 一.显示信息的命令 consol ...
- javascript 调试 使用console.table()
或许你已经习惯了console.log()来调试js,非常使用,但是今天微博看到console.table()调试javascript,和console.log()类似,主要区别在于: 主要用来输出对 ...
- 实验吧-密码学-他的情书(进一步了解js代码调试和console.log)
打开网站,在白色背景下的任一点上点击鼠标,白色部分都会消失(包括password输入框),那么就无法输入. 查看源码,发现是明显的从源码解决问题. 火狐F12查看器查看源码(如果是简单的操作,可以vi ...
- firebug的调试,console
console.log() console.warn() 警告 console.error() 错误 console.group() 分组 console.grounpEnd() 分组结束 co ...
- JavaScript常见调试方法
编辑导语:javascript调试方法,常见使用alert和console来定位出错和输出的结果是否是想要的,在chrome中,还可以使用断点来看运行的情况等,本文介绍了比较全面的调试方法,你知道co ...
随机推荐
- 【opencv】c++ 读取图片 & 绘制点 & 绘制文字 & 保存图片
//read pic ]; sprintf(path, "%s%d/%s", image_dir.c_str(), cam_num, filename.c_str()); cv:: ...
- Win32 配置文件用法
#include "stdafx.h"#include <Shlobj.h>#include <Shlwapi.h> #pragma comment(lib ...
- return的结果
return只会返回第一个,接下去的不会再返回 所以return放在for里面用的话,即使循环好几次,但是除了循环的第一个,后面循环出来的结果都作废
- 【IPC进程间通讯之中的一个】邮槽MailSlot
IPC进程间通信+邮槽MailSlot IPC(Inter-Process Communication.进程间通信). 现代计算机採用虚拟内存机制,为进程提 ...
- J.U.C Atomic(一)CAS原理
CAS概念 CAS:Compare And Swap,比较并交换.java.util.concurrent包完全是建立于CAS机制之上的. CAS原理 Java CAS是通过调用Unsafe的nati ...
- 2D游戏中的碰撞检测:圆形与矩形碰撞检测(Javascrip版)
一,原理介绍 这回有点复杂,不过看懂了还是很好理解的.当然,我不敢保证这种算法在任何情况下都会起效果,如果有同学测试时,发现出现错误,请及时联系我. 我们首先来建立一个以圆心为原点的坐标系: 然后要检 ...
- Spark2.0机器学习系列之12: 线性回归及L1、L2正则化区别与稀疏解
概述 线性回归拟合一个因变量与一个自变量之间的线性关系y=f(x). Spark中实现了: (1)普通最小二乘法 (2)岭回归(L2正规化) (3)La ...
- 从原型链看DOM--Comment,CDATASection,DocumentType,DocumentFragment,Attr类型
这次总结的是剩下的这些DOM类型节点,可能你见过却不经常使用但是了解一下总是好的,可以加深对DOM体系的整体理解~.本篇要介绍的是Comment,CDATASection,DocumentType,D ...
- Oracle 常见问题汇总
1.Listener refused the connection with the following error 安装之后如果遇到如下问题状态: 失败 -测试失败: Listener refuse ...
- 360急速浏览器JS的调试
1.代码中添加debugger关键字 2.360急速浏览器中选择工具--开发人员选项,如下图所示,在sources面板中可以看到正在运行的JS代码,F10可以单步函数执行,在鼠标放在变量上可以跟踪变量 ...