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 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
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
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
AngularJs页面筛选标签小功能
2016/08/01 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
基于python实现学生管理系统
2018/10/17 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
PyQt5实现让QScrollArea支持鼠标拖动的操作方法
2019/06/19 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
python利用xlsxwriter模块 操作 Excel
2020/10/14 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
新闻系毕业生推荐信
2013/11/16 职场文书
大学生职业生涯规划书模版
2013/12/30 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
求职自荐信的格式
2014/04/07 职场文书
活动总结怎么写啊
2014/05/07 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL