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实现权限树的更新权限时的全选全消功能
Feb 17 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
JavaScript 事件记录使用说明
Oct 20 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
微信小程序实现获取小程序码和二维码java接口开发
Mar 29 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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 5.0对象模型深度探索之绑定
2006/09/05 PHP
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
jQuery文本框得到与失去焦点动态改变样式效果
2016/09/08 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python迭代和迭代器详解
2016/11/10 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
python实现浪漫的烟花秀
2019/01/30 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
MyFrenchPharma中文网:最大的法国药妆平台
2016/10/07 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
秋季红领巾广播稿
2014/01/27 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
营运督导岗位职责
2015/04/10 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python