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 相关文章推荐
静态的动态续篇之来点XML
Aug 15 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
详解express + mock让前后台并行开发
Jun 06 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
Vue实现多页签组件
Jan 14 Vue.js
AJAX学习笔记
May 18 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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
url 编码 js url传参中文乱码解决方案
2010/04/11 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
用原生js做单页应用
2017/01/17 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
浅谈关于axios和session的一些事
2017/07/13 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
JSON 入门教程基础篇 json入门学习笔记
2020/09/22 Javascript
JavaScript实现点击出现子菜单效果
2021/02/08 Javascript
Python 安装第三方库 pip install 安装慢安装不上的解决办法
2019/06/18 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
汽车专业毕业生自荐信
2013/11/03 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
保密工作实施方案
2014/02/24 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
处罚决定书范文
2015/06/24 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
Pandas加速代码之避免使用for循环
2021/05/30 Python
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android