利用Js的console对象,在控制台打印调式信息测试Js的实现


Posted in Javascript onNovember 26, 2016

一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文。

既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛!避免不误人子弟,特意使用for(var i in console)查看了下各种浏览器控制台对console的支持,

结果如下:

IE 11 控制台

log , info , warn , error , debug , assert , time , timeEnd , group , groupCollapsed , groupEnd , trace , clear , dir , dirxml , count , countReset , cd , select , profile , profileEnd

Firebug 控制台

log , debug , info , warn , exception , assert , dir , dirxml , trace , group , groupCollapsed , groupEnd , profile , profileEnd , count , clear , time , timeEnd , timeStamp , table , error

Chrome 控制台

memory , _commandLineAPI , debug , error , info , log , warn , dir , dirxml , table , trace , assert , count , markTimeline , profile , profileEnd , time , timeEnd , timeStamp , timeline , timelineEnd , group , groupCollapsed , groupEnd , clear

可以看出,以上我测试的浏览器对 log , info , warn , error , debug 五个基本方法都是支持的,注意,我使用的是 IE 11,其他版本我没测试,而 Firefox 本身也是不带控制台的,需要加载Firebug 插件并且启动它,才能console,否则就是Js报错了。为了使用起来更方便,可以自己封装一下,判断一下浏览器对 console 的支持,不支持就只能使用原始的 alert 或者其他方法了。

简单用法:

console.log("日志信息");
console.info("一般信息");
console.debug("调试信息");
console.warn("警告提示");
console.error("错误提示");

格式化输出:

console.log("%d年%d月%d日", 2014, 5, 20);//日期格式输出
console.log('%c有颜色的输出信息', 'color:white; background-color:#0055CC');//格式输出

输出变量:

var who= 'you';
console.log('输出变量 We support  ', you);//读取变量

输出数组:

var arr = [1, 2, 3, 4, 5];
console.log('数组:', arr);//输出数组

以上这篇利用Js的console对象,在控制台打印调式信息测试Js的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery LigerUI 使用教程表格篇(1)
Jan 18 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
js使用formData实现批量上传
Mar 27 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
JS类的定义与使用方法深入探索
Nov 26 #Javascript
js控制台输出的方法(详解)
Nov 26 #Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 #Javascript
node.js中的事件处理机制详解
Nov 26 #Javascript
使用node.js中的Buffer类处理二进制数据的方法
Nov 26 #Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 #Javascript
JS基于递归实现倒计时效果的方法
Nov 26 #Javascript
You might like
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
Javascript - HTML的request类
2007/01/09 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
2016/08/29 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python基本语法经典教程
2016/03/11 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
解析HTML5中的新功能本地存储localStorage
2016/03/01 HTML / CSS
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
linux面试题参考答案(3)
2012/09/13 面试题
销售顾问的岗位职责
2013/11/13 职场文书
研发工程师的岗位职责
2013/11/18 职场文书
高级电工工作职责
2013/11/21 职场文书
门市房租房协议书
2014/12/04 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
朋友离别感言
2015/08/04 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
python如何读取.mtx文件
2021/04/22 Python
JS Canvas接口和动画效果大全
2021/04/29 Javascript
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS