Javascript 调试利器 Firebug使用详解六


Posted in Javascript onJuly 05, 2009

我们测试一下把刚才的4个输出作为一个分组输出,修改代码为:

console.group('开始分组:'); 
console.debug('This is console.debug!'); 
console.info('This is console.info!'); 
console.warn('This is console.warn!'); 
console.error('This is console.error!'); 
console.groupEnd();

刷新页面看看结果(图11-5)。在console.group中,我们还可以加入一个组标题“开始分组:”。如果需要,我们还可以通过嵌套的方式,在组内再分组。
Javascript 调试利器 Firebug使用详解六
图11-5
有时候,我们需要写一个for循环列出一个对象的所有属性或者某个HTML Element下的所有节点,有了firebug后,我们不需要再写这个for循环了,我们只需要使用console.dir(object)或console.dirxml(element)就可以了。
在测试页中加入代码测试一下:
console.dir(document.getElementById('div1')); 
console.dirxml(document.getElementById('div1'));

结果请看图11-6和图11-7。
Javascript 调试利器 Firebug使用详解六 
图11-6
Javascript 调试利器 Firebug使用详解六
图11-7
是否想知道代码的运行速度?很简单,使用console.time和console.timeEnd就可以。
修改一下test函数的代码,测试一下运行1000次循环需要多少时间:
function test(){ 
console.time('test'); 
for(var i=0;i<1000;i++){ 
document.getElementById('div2').innerHTML=i; 
//console.log('当前的参数是:%d',i); 
} 
console.timeEnd('test'); 
}

刷新页面,单击“方块二”,看看结果(图11-8)。在这里要注意的是console.time和console.timeEnd里的参数要一致才会有正确的输出,而该参数就是信息的标题。
Javascript 调试利器 Firebug使用详解六
图11-8
是否想知道某个函数是从哪里调用的?console..trace可帮助我们进行追踪。在test函数的结尾加入:
console.trace();
刷新页面,单击“方块二”,看看结果(图11-9)。结果显示是在坐标(97,187)的鼠标单击事件执行了test函数,而调用的脚本是在simple.html文件里的第1行。因为是在HTML里面的事件调用了test函数,所以显示的行号是第1行。如果是脚本,则会显示调用脚本的行号,通过单击可以直接去到调用行。
Javascript 调试利器 Firebug使用详解六
图11-9
如果想在脚本某个位置设置断点,可以在脚本中输入“debugger”作为一行。当脚本执行到这一行时会停止执行等待用户操作,这时候可以通过切换到“Script”标签对脚本进行调试。
Firebug还有其它的一些调试函数,这里就不一一做介绍,有兴趣可以自己测试。表4是所有函数的列表:
函数 说明
console.log(object[, object, ...]) 向控制台输出一个信息。可以输入多个参数,输出将已空格分隔各参数输出。 第一参数可以包含格式化文本,例如: console.log(‘这里有%d个%s',count,apple); 字符串格式: %s :字符串。 %d, %i:数字。 %f: 浮点数。 %o -超链接对象。
console.debug(object[, object, ...]) 向控制台输出一个信息,信息包含一个超链接链接到输出位置。
console.info(object[, object, ...]) 向控制台输出一个带信息图标和背景颜色的信息,信息包含一个超链接链接到输出位置。
console.warn(object[, object, ...]) 向控制台输出一个带警告图标和背景颜色的信息,信息包含一个超链接链接到输出位置。
console.error(object[, object, ...]) 向控制台输出一个带错误图标和背景颜色的信息,信息包含一个超链接链接到输出位置。
console.assert(expression[, object, ...]) 测试一个表示是否为true,如果为false,提交一个例外信息到控制台。
console.dir(object) 列出对象的所有属性。
console.dirxml(node) 列出HTML或XML Element的XML源树。
console.trace() 输出堆栈的调用入口。
console.group(object[, object, ...]) 将信息分组再输出到控制台。通过console.groupEnd()结束分组。
console.groupEnd() 结束分组输出。
console.time(name) 创建一个名称为name的计时器,计算代码的执行时间,调用console.timeEnd(name)停止计时器并输出执行时间。
console.timeEnd(name) 停止名称为name的计时器并输出执行时间。
console.profile([title]) 开始对脚本进行性能测试,title为测试标题。
console.profileEnd() 结束性能测试。
console.count([title]) 计算代码的执行次数。titile作为输出标题。
表4

12、 在IE中使用Firebug
Firebug是Firefox的一个扩展,但是我习惯在IE中调试我的页面怎么办?如果在页面脚本中加入console.log()将调试信息写到Friebug,在IE中肯定是提示错误的,怎么办?不用担心,Frirebug提供了Frirbug Lite脚本,可以插入页面中模仿Firebug控制台。
我们可以从一下地址下载firebug lite:
http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
然后在页面中加入:
<script language="javascript" type="text/javascript" src="/路径/firebug.js"></script>
如果你不想在IE中模仿Friebug控制台,只是不希望console.log()脚本出现错误信息,那么在页面中加入一下语句:
<script language="javascript" type="text/javascript" src="/路径/firebugx.js"></script>
如果你不想安装Firebug Lite,只是想避免脚本错误,那么可以在脚本中加入以下语句:
if (!window.console || !console.firebug)
{
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
window.console = {};
for (var i = 0; i < names.length; ++i)
window.console[names[i]] = function() {}
}
我们将firebug.js加入到测试页面中,然后打开IE,加载页面。页面加载完成后,我们按下F12键就可以打开控制台了。每次页面刷新后,你都要按F12键打开控制台,是不是很烦?如果不想那么,就在html标签中加入“debug='true'”,例如:
<html debug="true">
在Friebug Lite中也有命令行,但是功能没那么强。
Javascript 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JavaScript中的原型继承基础学习教程
May 06 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
jQuery实现一个简单的轮播图
Feb 19 Javascript
jQuery DIV弹出效果实现代码
Jul 03 #Javascript
Javascript 遍历对象中的子对象
Jul 03 #Javascript
javascript web页面刷新的方法收集
Jul 02 #Javascript
javascript 操作文件 实现方法小结
Jul 02 #Javascript
javascript new 需不需要继续使用
Jul 02 #Javascript
ExtJS GTGrid 简单用户管理
Jul 01 #Javascript
JQuery 风格的HTML文本转义
Jul 01 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
javascritp实现input输入框相关限制用法
2007/06/29 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
javascript 日期相减-在线教程(附代码)
2017/08/17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python六大开源框架对比
2015/10/19 Python
教你用Python脚本快速为iOS10生成图标和截屏
2016/09/22 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Python内置函数locals和globals对比
2020/04/28 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
应届毕业生应聘自荐信范文
2014/02/26 职场文书
环保倡议书格式范文
2014/05/14 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
装配出错检讨书
2014/09/23 职场文书
2015年老干部工作总结
2015/04/23 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
入党自传范文2015
2015/06/26 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
写好Python代码的几条重要技巧
2021/05/21 Python