javascript的console.log()用法小结


Posted in Javascript onMay 31, 2012

console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebugs 之后的 Firefox 所独有的调试“绝招”。
这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。
今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log。于是有人就提供了这样两句代码:

window.console = window.console || {}; 

console.log || (console.log = opera.postError);

经测试,以上代码好使。

在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛还要用console.log这么一长串的字符串来替代alert输出信息呢,下面我就介绍一些调试的入门技巧,让你爱上console.log

对于更加详细的介绍可以参考这篇文章:https://3water.com/article/93941.htm

至此,Firefox/IE/Opera 都能用上 console.log 了。
当然,IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log,还是太过简单,比如参数是 Object 或者数组就没有进一步的显示功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>javascript的console.log()用法</title> 
<script type="text/javascript"> 
/* 
console.log 原先是 Firefox 的“专利”,严格说是安装了 Firebugs 之后的 Firefox 所独有的调试“绝招”。 
这一招,IE8 学会了,不过用起来比 Firebugs 麻烦,只有在开启调试窗口(F12)的时候,console.log 才能出结果,不然就报错。 
今天看到 Opera 也有个叫 dragonfly 的东东,用这东西查看 DOM,已经可以和 Firebug 媲美,然而还是不能用 console.log。于是有人就提供了这样两句代码: 
window.console = window.console || {}; 
console.log || (console.log = opera.postError); 
经测试,以上代码好使。 
至此,Firefox/IE/Opera 都能用上 console.log 了。 
当然,IE 和 Opera 下的 console.log 比起 Firebugs 原创的 console.log,还是太过简单,比如参数是 Object 或者数组就没有进一步的显示功能。 
*/ 
//变量 
var i = 'I am a string'; 
console.log('变量:',i); 
//数组 
var arr = [1,2,3,4,5]; 
console.log('数组:',arr); 
//对象 
var obj1 = { 
key1 : 'value1', 
key2 : 'value2', 
key3 : 'value3' 
}; 
var obj2 = { 
key6 : 'value4', 
key5 : 'value5', 
key4 : 'value6' 
}; 
var obj3 = { 
key9 : 'value7', 
key8 : 'value8', 
key7 : 'value9' 
}; 
console.log('对象:',obj1); 
//对象数组 
var objArr1 = [obj1,obj2,obj3]; 
var objArr2 = [[obj1],[obj2],[obj3]]; 
console.log('对象数组1:',objArr1); 
console.log('对象数组1:',objArr2); 
/* 
输出: 
变量:I am a string 
数组:[1, 2, 3, 4, 5] 
对象:Object { key1="value1", key2="value2", key3="value3"} 
对象数组1:[Object { key1="value1", key2="value2", key3="value3"}, Object { key6="value4", key5="value5", key4="value6"}, Object { key9="value7", key8="value8", key7="value9"}] 
对象数组1:[[Object { key1="value1", key2="value2", key3="value3"}], [Object { key6="value4", key5="value5", key4="value6"}], [Object { key9="value7", key8="value8", key7="value9"}]] 
*/ 
</script> 
</head> 
<body> 
</body> 
</html>

三水点靠木注:IE浏览器下默认是不支持console.log,反而会因为这句代码报错,所有ie下注释掉比较好

Javascript 相关文章推荐
jquery 图片轮换效果
Jul 29 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
原生js仿jquery一些常用方法(必看篇)
Sep 20 Javascript
javascript自执行函数
Feb 10 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Angular2之二级路由详解
Aug 31 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
js实现计时器秒表功能
Dec 16 Javascript
jQuery 联动日历实现代码
May 31 #Javascript
从阶乘函数对比Javascript和C#的异同
May 31 #Javascript
javascript 快速排序函数代码
May 30 #Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 #Javascript
Chosen 基于jquery的选择框插件使用方法
May 30 #Javascript
基于jquery的鼠标拖动效果代码
May 30 #Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 #Javascript
You might like
PHP链表操作简单示例
2016/10/15 PHP
PHP魔术方法之__call与__callStatic使用方法
2017/07/23 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
2012/06/27 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
利用node.js爬取指定排名网站的JS引用库详解
2017/07/25 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
Python利用ORM控制MongoDB(MongoEngine)的步骤全纪录
2018/09/13 Python
Python基本socket通信控制操作示例
2019/01/30 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
python与idea的集成的实现
2020/11/20 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
几道PHP面试题
2013/04/14 面试题
质检部岗位职责
2013/11/11 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
总经理人事任命书
2014/06/05 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
祝酒词范文
2015/08/12 职场文书
图文详解matlab原始处理图像几何变换
2021/07/09 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android