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 相关文章推荐
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
May 14 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
jquery图片放大镜效果
Jun 23 jQuery
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
js验证身份证号码记录的方法
Apr 26 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
angular.bind使用心得
2015/10/26 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
2016/06/14 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
微信小程序:数据存储、传值、取值详解
2019/05/07 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
2020/11/16 Javascript
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
python 伯努利分布详解
2020/02/25 Python
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
计算机系毕业生推荐信
2013/11/06 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
应届生简历中的自我评价
2014/01/13 职场文书
好人好事事迹材料
2014/02/12 职场文书
生产厂长岗位职责
2014/02/21 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
单位同意报考证明
2015/06/17 职场文书