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给元素添加/删除节点比如select
Apr 02 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
JS的location.href跳出框架打开新页面的方法
Sep 04 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
深入理解(function(){... })();
Aug 16 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
微信分享invalid signature签名错误踩过的坑
Apr 11 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
header导出Excel应用示例
2014/01/24 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
2007/08/15 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
2016/10/27 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
详解Angular 4.x NgIf 的用法
2017/05/22 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
Element Steps步骤条的使用方法
2020/07/26 Javascript
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
运动会通讯稿50字
2014/01/30 职场文书
产品质量承诺范本
2014/03/31 职场文书
医德医风演讲稿
2014/05/20 职场文书
合同意向书范本
2014/07/30 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
NodeJs使用webpack打包项目的方法详解
2022/02/28 NodeJs
pandas中pd.groupby()的用法详解
2022/06/16 Python