Web开发工具系列（1）---Firebug中的console API

JohnLui 发布于2019-08-20 11:42 / 1564人阅读

摘要：本文主要探讨中的使用。不同的浏览器中行为可能会有所不同。代码测试运行了次和用来显示代码的运行时间。测试计算运行性能代码测试介绍的具体网址一篇相关的博文

前言

我个人一直在使用Firefox浏览器进行开发，并且经常使用Firebug进行一些简单的调试，但是一直限于使用简单的console.log()查看输出，或者查看Ajax运行时的Http请求和Cookie等。为了更好的掌握工具使用技巧，我希望最近腾出时间仔细探究下Firebug的使用。因此，本文将是“Web 开发工具”系列中的第一篇。

本文主要探讨Firebug中console的使用。firebug给所有当前加载的页面添加了一个console全局对象，这个对象包含各种方法，可以帮助我们通过console API 输出JavaScript代码执行时的信息。相比alert()，console对象输出不会停止代码运行，而alert()必须点击弹出窗口才能继续观察结果。例如通过for循环观察一个较大数组的输出，在循环体内使用alert无疑会是件很头疼的事，因为你要连续点击很多次，用console.log()则没有这种顾虑：

console对象的方法

1) console.log(obiect[,object,object…]):这无疑是最常用的方法，用来输出参数代表的值，参数可以是任何字符串、数字和JavaScript对象，输出时以空格间隔多个变量。与alert()函数类似，console.log()也可以接受换行符n以及制表符t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。不同的浏览器中console.log()行为可能会有所不同。

2) 与console.log()功能类似的console.debug()/console.info()/console.warn()/console.error()都会输出参数内容，但是输出时显示的图标不同。
代码：

var a = new Array(),b = new Date(), c = 1;
console.info(a, b, c);//显示info图标
console.error(a, b, c);//显示错误图标
console.warn(a, b, c);//显示警告图标
console.debug(a, b, c);//不显示图标

输出：

console对象的上面5种方法，都可以使用C语言printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。
代码：

console.log("%d年%d月%d日",2011,3,26);
console.log("圆周率是%f",3.1415926);

输出：

%o占位符，可以用来查看一个对象内部情况。
代码：

var dog = {}; dog.name = "大毛"; dog.color = "黄色";
 console.log("%o", dog);

结果：

3) console.assert(expression[,object]):参数是表达式或者对象，判断内部是否为true，我认为会经过一个布尔类型转换。如果转换结果是真就不输出，为假就输出判断结果。最好只输入一个参数，多个参数时判断结果很奇怪。连续多次执行assert()方法，会一次性输出总的断言失败数，不指出是哪一个失败。
测试实例：

//除console.assert(a)外的断言都是失败的
var a = new Array(),b = new Date(), c = 0;
console.assert();//无参数
console.assert(c);//数值0
console.assert(a);//数组对象
console.assert(null);//null

输出结果：

4）console.clear()：无参数，清空console窗口。
5） console.dir(object)：输出对象的所有特性，包括方法和属性; 直接将该DOM结点以DOM树的结构进行输出。
代码：

//输出console的所有方法和属性
console.dir(console);

6）console.dirxml()：用来显示网页的某个节点（node）所包含的html/xml代码。
代码

    /*zhangzhang
        
        
    
    */

测试：

7）console.trace()：追踪函数的调用轨迹
代码：

function add(a, b) {
  console.trace();
  return a + b;
}
function add3(a, b) {
  return add2(a, b);
}
function add2(a, b) {
  return add1(a, b);
}
function add1(a, b) {
  return add(a, b);
}
var x = add3(1, 1);

测试：

8）console.group(object[, object, ...])和console.groupEnd()：分组显示。
代码：

    console.group("第一组信息");
　　　　console.log("第一组第一条");
　　　　console.log("第一组第二条");
　　console.groupEnd();
　　console.group("第二组信息");
　　　　console.log("第二组第一条");
　　　　console.log("第二组第二条");
    console.groupEnd();

测试：

9）console.count(): 统计调用count()的那行代码被执行的次数。
代码：

  
      
      
    JS Performance

测试：运行了100次

10）console.time(name)和console.timeEnd(name)：用来显示代码的运行时间。
测试：

11）console.profile()：计算运行性能
代码：

  
      
      
    JS Performance

测试：

Reference：

firebug介绍的具体网址：
http://getfirebug.com/wiki/in...
一篇相关的博文：
http://www.ruanyifeng.com/blo...

云服务器 GPU云服务器 webrtc web开发api 系列1 亚马逊web服务开发人员api 1对1 api

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80702.html

前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
客户端数据存储 --- web storage From 《高程3》

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。前言本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorag...

wangbinke 2019-08-21 14:37 评论0 收藏0
客户端数据存储 --- web storage From 《高程3》

摘要：的目的就是取代进行大量的本地数据存储，其中不能进行跨会话存储，这可以使用弥补。删除由指定的名值对儿。使用方法存储数据使用属性存储数据使用方法读取数据使用属性读取数据一般来说，对存储空间大小的限制都是以每个源协议域和端口为单位的。前言本文首先介绍web storage和Cookie的对比，解释web storage的优势；随后指出怎样使用插firebug插件的扩展firestorag...

wfc_666 2019-08-01 15:50 评论0 收藏0
错误检测（1）------try-catch语句 From 《高程3》

摘要：类型的错误会在数值超出相应范围时触发。最常发生类型错误的情况，就是传递给函数的参数事先未经检查，结果传入类型与预期类型不相符。捕获错误的目的在于避免浏览器以默认方式处理它们而抛出错误的目的在于提供错误发生具体原因的消息。 0 前言目前读到了《高程3》的错误检测部分，现在先挖一个坑，关于错误检测应该写三篇总结：firebug检测错误和输出信息；try-catch错误捕获；常见错误种类。...

UnixAgain 2019-08-21 14:38 评论0 收藏0