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 相关文章推荐
高性能WEB开发 flush让页面分块,逐步呈现 flush让页面分块,逐步呈现
Jun 19 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
js实现选中复选框文字变色的方法
Aug 14 Javascript
jQuery+HTML5实现图片上传前预览效果
Aug 20 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
layui动态表头的实现代码
Aug 22 Javascript
vue下canvas裁剪图片实例讲解
Apr 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 类自动载入的方法
2015/06/03 PHP
jquery实现图片按比例缩放示例
2014/07/01 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
python字符串连接的N种方式总结
2014/09/17 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Python3解释器知识点总结
2019/02/19 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
Pytorch之保存读取模型实例
2019/12/30 Python
Python可以实现栈的结构吗
2020/05/27 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
基于Python和C++实现删除链表的节点
2020/07/06 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
店长岗位职责
2013/11/21 职场文书
优秀大学生的自我评价
2014/01/16 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
低碳环保标语
2014/06/12 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
社区党支部承诺书
2015/04/29 职场文书
五年级数学教学反思
2016/02/16 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis