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实现每个数字上都带进度条的幻灯片
Feb 20 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
Javascript实现单例模式
Jan 24 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
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生成指定长度随机数最简洁的方法
2014/07/14 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
js单词形式的运算符
2014/05/06 Javascript
Javascript的闭包详解
2014/12/26 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python获取指定网页上所有超链接的方法
2015/04/04 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
Python正则表达式完全指南
2017/05/25 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
Windows下python3.6.4安装教程
2018/07/31 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
护士个人简历自荐信
2013/10/18 职场文书
《将心比心》教学反思
2014/04/08 职场文书
感恩寄语大全
2014/04/11 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
金融专业银行实习证明模板
2014/11/28 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers