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还有其他技巧,日后补上,欢迎前端朋友补充,感激不尽。


猜你喜欢
- 一、标签语法由%}和 {% 来定义的,例如:{%tag%} {%endtag%},完整的标签有开始就有结束,如条件语句,有条件判断的开始,也
- Pattern.split方法详解/** * 测试Pattern.split方法 */ @Test public void testPatt
- 1、安装执行命令pip install virtualenv为了使用virtualenv更方便,可以借助 virtualenvwrapper
- 2005转到2000的步骤 1. 生成for 2000版本的数据库脚本 2005 的manger s
- 本文实例为大家分享了用python画一朵花的具体代码,供大家参考,具体内容如下第一种,画法from turtle import *impor
- 1.函数array() 功能:创建一个数组变量 格式:array(list) 参数:list为数组变量中的每个数值列,中间用逗号间隔 例子:
- 目录寻找 url下载视频执行代码下载:最后的话回答来源微信 8.0 版本更新后,可以设置个人状态,状态里面可以添加火录制视频,很快状态视频就
- 直接点 某8网 https://*****.b*b.h*****y*8*.com/具体网址格式就是这样的但是为了安全起见,我就这样打码了.抛
- 简介scrapy-redis是一个基于redis的scrapy组件,用于快速实现scrapy项目的分布式部署和数据爬取,其运行原理如下图所示
- 下面给大家介绍下小程序弹窗禁止页面滚动的效果:在小程序弹窗时,外部页面禁止滚动, 可以在最外部容器设置catchtouchmove但是如果弹
- 作为酷爱编程的老程序员,实在按耐不下这个冲动,Python真的是太火了,不断撩拨我的心。我是对Python存有戒备之心的,想当年我基于Dru
- 背景最近处理文本文档时(文件约2GB大小),出现memoryError错误和文件读取太慢的问题,后来找到了两种比较快Large File R
- 1.首先在index.html引入高德地图的秘钥。如图:注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete
- 分析使用CrawlSpider结合LinkExtractor和Rule爬取网页信息LinkExtractor用于定义链接提取规则,一般使用a
- 一、环境pip install opencv-pythonpython3.9pycharm2020人狠话不多,直接上代码,注释在代码里面,不
- 如下所示:url = u'http://tieba.baidu.com/f?kw=权利的游戏&ie=utf-8&pn
- HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能。我们只需要注册很少几个事件 * ,就能把任
- 在使用缓存时,容易发生缓存击穿。缓存击穿:一个存在的key,在缓存过期的瞬间,同时有大量的请求过来,造成所有请求都去读dB,这些请求都会击穿
- 发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS
- python绘制横向水平柱状条形图Bar,供大家参考,具体内容如下import matplotlibimport randomimport