JavaScript调试技巧之console.log()详解


Posted in Javascript onMarch 19, 2014

一、什么是console.log()?
除了一些很老版本的浏览器,现今大多数浏览器都自带调试功能;即使没有调试功能,也可以通过安装插件来进行补充。比如,老版本的Firefox没有自带调试工具,在这种情况下可以通过安装Firebug插件来添加调试功能。在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。比如,以下代码将在控制台中打印”Sample log”:

window.console.log("Sample log");

上述代码可以忽略window对象而直接简写为:
console.log("Sample log");

console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行符\n以及制表符\t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同, 本文主要探讨Firebug中console.log()的使用 。
二、兼容没有调试控制台的浏览器
对于缺少调试控制台的老版本浏览器,window中的console对象并不存在,因此直接使用console.log()语句可能会在浏览器内部造成错误(空指针错误),并最终导致某些老版本浏览器的崩溃。为了解决这一问题,可以人为定义console对象,并声明该console对象的log函数为空函数;这样,当console.log()语句执行时,这些老版本的浏览器将不会做任何事情:
if(!window.console){
  window.console = {log : function(){}};
}

不过,在大多数情况下,没有必要去做这种兼容性工作 — console.log()等调试代码应当从最终的产品代码中删除掉。
三、使用参数
与alert()函数类似,console.log()也可以接受变量并将其与别的字符串进行拼接:
//Use variable
var name = "Bob";
console.log("The name is: " + name);

与alert()函数不同的是,console.log()还可以接受变量作为参数传递到字符串中,其具体语法与C语言中的printf语法一致:
//Use parameter
var people = "Alex";
var years = 42;
console.log("%s is %d years old.", people, years);

上述代码的执行结果为:”Alex is 42 years old.”
四、使用其它日志级别
除了console.log(),Firebug还支持多种不同的日志级别:debug、info、warn、error。以下代码将在控制台中打印这些不同日志级别的信息:
//Use different logging level
console.log("Log level");
console.debug("Debug level");
console.info("Info level");
console.warn("Warn level");
console.error("Error level");

从Firebug控制台中可以看到,不同日志级别的打印信息,其颜色和图标是不一样的;同时,可以在控制台中选择不同的日志级别来对这些信息进行过滤:
Javascript 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
Oct 03 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 Javascript
javascript三种代码注释方法
Jun 02 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
js用闭包遍历树状数组的方法
Mar 19 #Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 #Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 #Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 #Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 #Javascript
js身份证判断方法支持15位和18位
Mar 18 #Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
Terran剧情介绍
2020/03/14 星际争霸
ThinkPHP 防止表单重复提交的方法
2011/08/08 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
让人印象深刻的10个jQuery手风琴效果应用
2012/05/08 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
2015/12/01 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
时尚孕妇装:HATCH Collection
2019/09/24 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
统计专业自荐书
2014/07/06 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
旷课检讨书范文
2014/10/30 职场文书
2014年文秘工作总结
2014/11/25 职场文书
护士先进个人总结
2015/02/13 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
Django框架之路由用法
2022/06/10 Python