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

一次偶然的机会，打开百度的时候按下了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的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS中捕获console.log()输出的方法

    本文实例讲述了JS中捕获console.log()输出的方法.分享给大家供大家参考.具体分析如下: 我们知道console.log()可以将信息输出到debugger中供开发者查看.但如果我们想要在JS中获取console.log()的输出结果呢?其实不难,先将原本的console.log保存起来,然后替换成另外一个实现即可.代码如下: var lastLog; console.oldLog = console.log; console.log = function(str) { console

  • JavaScript中的console.trace()函数介绍

    JavaScript中的console.trace()函数介绍

    调试JavaScript程序时,有时需要打印函数调用的栈信息,这可以通过使用console.trace()来实现.以下面的代码为例: 复制代码 代码如下: function doTask(){     doSubTask(1000,10000); }   function doSubTask(countX,countY){     for(var i=0;i<countX;i++){         for(var j=0;j<countY;j++){}     }     console.t

  • JavaScript中的console.profile()函数详细介绍

    JavaScript中的console.profile()函数详细介绍

    编写JavaScript程序时,如果需要知道某段代码的执行时间,可以使用console.time().不过,在分析逻辑较为复杂的JavaScript程序,试图从中找出性能瓶颈的时候,console.time()就不适用了 - 深入分析逻辑较为复杂的JavaScript程序的运行就意味着插入大量的console.time()语句,而这无疑是不可接受的.对于复杂逻辑的JavaScript程序调优,正确的方法是使用console.profile(). 浏览器支持 安装了Firebug插件的Firefo

  • node.js中的console用法总结

    node.js中的console用法总结

    复制代码 代码如下: //建立app.js页面 // 一:页面代码 console.log("log信息"); //在页面中执行(node app.js)这个文件会在控制台中看到log信息:"log信息" //换个方式执行:node app.js 1>info.txt(1代表重定向标准输出流); //这个时候会在app.js的同级目录下看到一个info.txt文件,里面还有"log信息". //二:依次序输出所有字符串 console.lo

  • JavaScript中的console.assert()函数介绍

    JavaScript中的console.assert()函数介绍

    在JavaScript程序的开发和维护过程中,Assert(断言)是一个很好的用于保证程序正确性的特性.在具备调试工具的浏览器上,这一特性可以通过调用console.assert()来实现.比如在以下代码中,console.assert()语句保证cat对象的score变量值长度为3: 复制代码 代码如下: function cat(name, age, score){     this.name = name;     this.age = age;     this.score = scor

  • Javascript调试之console对象——你不知道的一些小技巧

    Javascript调试之console对象——你不知道的一些小技巧

    前言 写过前端Javascript代码的同学肯定不会对console对象感到陌生,在调试的过程中我们经常会用console对象在控制台输出一些常量或者变量. 但是相信很多人也就只用过console.log()这一个方法,今天我们就一起来看看console对象还有哪些比较有用的方法.由于本篇文章是跟控制台有关,代码就直接在控制台展现而没有另外用新文件展示. 不同级别日志 通过console对象的不同方法,可以在控制台上输出不同级别的日志信息,它们会采用不同的标志来展示,如下图所示. 不同级别的日志

  • JavaScript中的console.group()函数详细介绍

    JavaScript中的console.group()函数详细介绍

    在使用console.log()或者其它日志级别的控制台输出功能时,日志输出是没有层级关系的.当程序中日志输出较多时,这一局限性将带来不小的麻烦.为了解决这一问题,可以使用console.group().以下面代码为例: 复制代码 代码如下: function doTask(){     doSubTaskA(1000);     doSubTaskA(100000);     console.log("Task Stage 1 is completed");     doSubTas

  • JavaScript中的console.dir()函数介绍

    JavaScript中的console.dir()函数介绍

    在调试JavaScript程序时,有时需要dump某些对象的详细信息.通过手工编写JavaScript代码可以完成这一工作:针对对象的属性进行循环,将循环到的每一个属性值打印出来:可见,这一过程是比较繁琐的.在具备调试工具的浏览器上,这一工作可以通过console.dir()语句来方便的完成. console.dir()的使用 console.dir()的使用非常简单,直接将需要dump的对象传入该语句即可.比如以下的例子: 复制代码 代码如下: function cat(name, age,

  • JavaScript中的console.time()函数详细介绍

    如果需要在Web调试过程中知道代码执行的时间,那么可以通过在JavaScript代码中添加console.time()语句和console.timeEnd()语句来对程序的执行进行计时.以下面这个耗时较长的foo()函数为例: 复制代码 代码如下: function foo(){     var x = 4.237;     var y = 0;     for (var i=0; i<100000000; i++) {         y = y + x*x;     }     return

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

    一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛!避免不误人子弟,特意使用for(var i in console)查看了下各种浏览器控制台对console的支持, 结果如下: IE 11 控制台 log , info , warn , error , debug , assert , time , timeEnd , group , groupC

  • js中console在一行内打印字符串和对象的方法

    在前端开发中,大多数的调试一般都是F12中的console和network中查看请求数据和响应数据,也有一部分人喜欢用debugger. 在开发大一些的项目时,在开发环境下,打开着控制台,切换一下页面总是充满着各种console,而且还是很多行,有一部分原因是有下面我写的这样的. 就是因为如果在同一行内同时打印字符串和对象的话,我们会想到如下的拼接 但是对象会调用原型中toString()方法,让我们看起来就难受了. console.log('上传结果' + {obj: '对象', name:'

  • JavaScript console对象与控制台使用示例详解

    目录 1. console对象 2. console的静态方法 3. 自定义console 4. 控制台命令行API 4.1 $_ 4.2 $0-$4 4.3 $(selector) 4.4 $x(path) 4.5 inspect(obj) 4.6 keys()和values() 4.7 其它的命令 1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 console.l

  • js内置对象处理_打印学生成绩单的简单实现

    js内置对象处理_打印学生成绩单的简单实现

    任务: 1.通过js的内置对象得到当前日期 var date=new Date(); var year=date.toString().slice(11,15); document.write(year.toString()+"年"); var month=date.getMonth(); month=month+1; if(month<10){ document.write("0"+month+"月"); }else{ document.

  • 利用jQuery的deferred对象实现异步按顺序加载JS文件

    利用jQuery的deferred对象实现异步按顺序加载JS文件

    前段时间看了阮一峰的jQuery的deferred对象详解一文,对jQuery中的deferred的用法了一些了解,今天看到园子里的一篇文章:关于重构JS前端框架的失败经验(顺便怀念那些死去的代码),于是把我之前写的一个利用jQuery的deferred异步按顺序加载JS文件方案分享出来,欢迎指正. 如果你现在对jQuery中的deferred还不了解,强烈建议你看一下阮一峰的jQuery的deferred对象详解一文. 加载JS文件的代码如下: 复制代码 代码如下: /* Loading Ja

  • vue-cli3在main.js中console.log()会报错的解决

    vue-cli3在main.js中console.log()会报错的解决

    目录 在main.js中console.log()报错 问题重新 console.log()输出没效果问题 第一种 第二种 在main.js中console.log()报错 问题重新 在main.js使用console.log()会报错 这个错误是Vuejs - 使用ESLint检查代码质量是进行提示的,所以修改成window.console.log()就能避免这个报错 console.log()输出没效果问题 在平时和的开发中我们经常遇到console.log()没有效果,作为小白的我已经遇见

  • xcode8 关闭控制台不打印不信息的解决方法(图文详解)

    xcode8 关闭控制台不打印不信息的解决方法(图文详解)

    控制台打印的信息如下 2016-10-15 10:13:17.774543 LGLSearch-Dome[1656:356106] subsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0, persist_level: 0, default_ttl: 0, info_ttl: 0, debug_ttl: 0, generate_symptoms: 0, enable_oversize: 1, privacy_

  • JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • JS实现json对象数组按对象属性排序操作示例

    JS实现json对象数组按对象属性排序操作示例

    本文实例讲述了JS实现json对象数组按对象属性排序操作.分享给大家供大家参考,具体如下: 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ] } 现在我们根据业务需要,要根据

随机推荐