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 相关文章推荐
javascript同步Import,同步调用外部js的方法
Jul 08 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
jquery横向纵向鼠标滚轮全屏切换
Feb 27 Javascript
详解angular用$sce服务来过滤HTML标签
Apr 11 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 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
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
2012/12/25 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
JS常用算法实现代码
2016/11/14 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python 爬虫的原理
2020/07/30 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
韩语专业本科生求职信
2013/10/01 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
项目建议书范文
2014/05/12 职场文书
企业文化演讲稿
2014/05/20 职场文书
导游词之包公祠
2019/11/25 职场文书
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫