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字符串替换及字符串分割示例代码
Dec 12 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
javascript的动态加载、缓存、更新以及复用(一)
Jun 09 Javascript
JS+CSS实现仿新浪微博搜索框的方法
Feb 24 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
JavaScript数组的5种迭代方法
Sep 29 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
Apr 10 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 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 adodb介绍
2009/03/19 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
event.srcElement+表格应用
2006/08/29 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
javascript动态创建链接的方法
2015/05/13 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
pyside+pyqt实现鼠标右键菜单功能
2020/12/08 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python计算信息熵实例
2020/06/18 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
管道维修工岗位职责
2013/12/27 职场文书
大学生毕业鉴定
2014/01/31 职场文书
高二物理教学反思
2014/02/08 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
职业规划实施方案
2014/06/10 职场文书
退学证明范本3篇
2014/10/29 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技