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 相关文章推荐
Js 刷新框架页的代码
Apr 13 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
jquery延迟对象解析
Oct 26 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 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中基本符号及使用方法
2010/03/23 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
php的4种常见运行方式
2015/03/20 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
javascript学习笔记(一) 在html中使用javascript
2012/06/18 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
2015/03/21 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JavaScript实现通过select标签跳转网页的方法
2016/09/29 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
2018/07/19 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
2019/07/08 Javascript
详细介绍Ruby中的正则表达式
2015/04/10 Python
利用Python爬取可用的代理IP
2016/08/18 Python
Python实现自动发送邮件功能
2021/03/02 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
用python3 urllib破解有道翻译反爬虫机制详解
2019/08/14 Python
Python list运算操作代码实例解析
2020/01/20 Python
基于python3的socket聊天编程
2020/02/17 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
自动化专业个人求职信范文
2013/12/30 职场文书
综合内勤岗位职责
2014/04/14 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
学生逃课检讨书
2015/02/17 职场文书
博士给导师的自荐信
2015/03/06 职场文书
行政处罚听证告知书
2015/07/01 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书