firebug1.7调试实用技巧指南
作者:明河共影 发布时间:2011-06-27 20:17:22
武器档案
名称:firebug
最新版本:1.7
用途:前端调试器
必备指数:
使用难度:
firebug是前端最具盛名的调试器,功能非常强悍。firebug1.7正式版现在已经发布了,完美兼容firefox4.0(无法兼容firefox4.0以下的版本),由于firebug非常易用,这里明河不一一介绍firebug的功能,只给大家介绍一些firebug的实用技巧,有些技巧是firebug1.7才有的,有些是通用的。
1.使用“debugger”关键字快速断点调试
正常如果我们想debugger下js代码,先进入“脚本”面板,然后找到要调试的js文件,最后在你需要调试的行,打上断点,最后刷新页面,如下图:
有没有更快速的断点方式呢?那就是使用“debugger”关键字快速断点调试,接着往下看。
在你要调试的代码行前面,加一行”debugger;”,比如下面的
debugger;
if(steps.length == 0) return false;
self.isRender = true;
然后刷新下页面,如下图:
断到点了!是不是很方便,你无须再切换到脚本,再花心思找对应的调试脚本,这里我们只需要加个debugger;即可,放心,脚本不会报错,当然你正式发布脚本的时候,务必把debugger;关键字去掉哦。
2.快速定位指定行的代码
比如我要快速定位到第122行的代码,你可以如下操作。
在搜索框上输入“#122”,就可以找到指定行的代码了!
3.只显示起作用的css属性
firebug1.7是默认开启的,如下图:
当勾选第一项“Only Show Applied Style”时,只显示起作用的样式,如果我们把这项去掉,看下效果。
被覆盖,不起作用的css属性就会出现了。
4.如何查看hover的css属性
加了hover属性的容器,鼠标滑过,在HTML面板右侧会出现hover属性,但你移开就没有了,如果你希望在面板中保留hover属性,看下面:
勾选最后一项hover即可。
5.如何理解脚本面板中的“堆栈”
堆栈,可以理解为执行顺序总揽,“监控”起到微观作用,让我们知道变量的赋值情况,而监控起到宏观作用,让我们知道,脚本的运行流程。
是不是用的很少?其实堆栈信息已经第一时间出现在面板了,只是很少人留意,截个图给大家瞧瞧:
高亮部分就是堆栈信息!
6.循环体内的特例调试
调试循环体,有个很杯具的地方,在循环内部打个断点,循环20次,会触发20次断点……这很愁人,影响调试效率,其实我们只需要调试循环第2次的情况。
右击断点处,会出现一个蓝色的弹出层,让你输入监控表达式,这时候输入i == 2,再按“F8”,你就会发现直接跳到第二次循环了。
(图截不下来,无法奉上图片见谅。)
7.以独立窗口的形式打开firebug
1.7firebug的面板可以变成独立窗口了,快捷键:“ctrl+F12”,也可以点击如下图的位置。
8.向控制台输出日记消息
在你的代码上输出个“36ria.com”,如下:
console.log('36ria.com');
console.error('36ria.com');
使用console.log的效率,个人觉得还是比原始的alert()来的高的,关键是console.log()不会中断程序执行。
9.利用命名行工具,快速定位对象
step1这个对象,是KISSY.Step()的实例,明河想要知道这个对象内部的赋值情况,只要在命令行上键入”step1″,就会在控制台上出现相关信息,然后我再点击该信息,就进入了DOM详细信息界面。
明河结语
先写到这里,firebug还有其他技巧,日后补上,欢迎前端朋友补充,感激不尽。
猜你喜欢
- 树形目录显示程序问题描述:在我们项目中常常会出现自关联的数据表,如果我们从整体看去,整个表就呈现为一个树形数据结构(对于复杂的情况,它可能变
- 如何在ADO服务器端利用好缓存技术?请看下面示例,这是一个用来显示图书分类的例子程序:displayBooks.asp< %
- 字体的处理在网页设计中无论怎么强调也不为过, 毕竟网页使用来传递信息的, 而最经典最直接的信息传递方式就是文字,&nbs
- 代码如下:DECLARE @T varchar(255), @C varchar(255) DECLARE Table_Cursor CUR
- 昨天有人在群里问图1的边框效果是否能实现。 边框效果图有人给出答案,需要嵌套一个元素实现。我当时粗粗写了个测试页面,但是时间太晚了,也没有细
- 下面这个例子描述的是在Godaddy-Linux托管帐户上使用JSP连接到某个MySQL数据库。 <%@ page
- 本节为读者讲解如何利用ADO.NET本身的参数对象和存储过程技术防止注入攻击,以达到用户界面输入与原始SQL的分离,使黑客无法拼接SQL语句
- 由于某些原因需要把函数直接放到 img 标签上的 onload 属性执行,比如:For some reasons we have to ex
- 在线阅读与印刷品阅读有着很大的不同,原因之一是屏幕会导致注意力问题。文字很难成为重点,而闪烁的横幅、明亮的图片又更加会转移对实际的博客内容的
- User Centered Design 以用户为中心的设计,一说到这个很多人马上想到互联网和软件的设计,因为在IT、互联网行业提得最多。其
- 看看下面这个刚才提到的下拉列表的例子,就是将Application Object作为一个变量用来存储下拉列表的菜单项的:<%=&nbs
- 如何使用Office Chart 9.0 制作图表?代码如下:chart90.asp<HTML><HEAD><
- 于是写测试程序。。。不行 下载最新的ODBC。。。还是不行 通过sql plus查询。。。咦?竟然也查不到。。。 于是,折腾。。。折腾。。。
- 需要准备的工具:SQL Query Analyzer和SqlExec Sunx Version第一部分:去掉xp_cmdshell保护系统的
- 内容摘要:这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理,实例是实现一个日期选择下拉菜单。首先来分析一下日期下拉菜
- 在JavaScript开发中,被人问到:null与undefined到底有啥区别?一时间不好回答,特别是undefined,因为这涉及到un
- 一、定位 oracle分两大块,一块是开发,一块是管理。开发主要是写写存储过程、触发器什么的,还有就是用Oracle的Develop工具做f
- 在这里我想有必要再较系统说一下ADO的各种对象的方法、属性。毕竟ADO不仅应用在ASP中,VB,VC都可以用到。在这十天中我想主要提到的对象
- 长话短说,看这个 form 元素:<form method="post" action=&qu
- 内容摘要:当我们不想让某IP服务我们的网站时,我们就要写段程序来限制IP地址。asp中如何对ip进行过滤限制?本文介绍了一种方法,这个函数只