Firebug非主流小技巧分享
天天用Firebug,常用功能就不多啰嗦,下面是Taobao UED前端们的私家珍藏秘笈:
快速查看背景图
大部分情况下,Firefox自带的右键就搞定了:

但有时,只能通过CSS找到背景图片地址:

通常做法是:

要准确无误的选中URL部分,即辛苦又没成就感……
秘技:

Ctrl + 左键点击URL部分,图片自动就在Firefox新页面中打开了,嘿嘿。
本质:在Firebug的HTML和CSS视图中,任何出现URL的地方,Ctrl+左键点击都能快速打开链接。
快速更改CSS数值型属性值
传统的做法是,在CSS视图中,点击属性值,然后修改数值,回车确认,反复重复操作,以查看效果,苦不堪言。
秘技:

编辑状态下,按 Up/Down 方向键就可以快速改变数值型属性值了,还可以用 PgUp/PgDn 每次改变10.
缩写的多个属性值,也可以将光标定位到要改变的数值属性处,通过 Up/Down 快速调节:

也许是常用的
下面这些,稍微爱折腾Firebug的估计都知道:
- console.assert, 最简单的js单元测试,更多资料:Firebug Console Object and API
- CSS视图,双击空白处,快速添加属性
- 选中某个DOM节点后,在CSS视图空白处右键,Edit Element Style… 快速添加内联样式
- DOM树上,可以通过上/下方向键快速导航,左/右方向键折叠。更多资料:Keyboard and Mouse Shortcuts
- DOM树上选中某个节点,右键,Copy HTML, Copy innerHTML, Delete Element, 通常很有用
- 双击DOM树上的节点,立刻进入编辑状态
- 点击Script等Tab的下拉箭头,可以选择性激活功能
- Firecookie, YSlow, Jiffy等Firebug的插件只嫌少不嫌多……
- 记住非Firefox浏览器下,可以使用Firebug Lite, 虽然不那么好用,但有比没强
最后分享一个最无敌的秘技:

上图曲解了editor,不过这样用更实际。注意默认是有问题的,需要写个cmd代理一下,或者期待UED空帷大侠的独立插件吧。
最最后,如果不缺那么点银子,Donate…会让中国人更有味!

January 8th, 2009 on 23:31
不错,第一个我还是第一次知道,哈哈,以前都是点右键打开的…… :)
January 9th, 2009 on 0:15
惭愧,虽然靠firebug吃饭,居然没仔细读过说明书…
还真不知道ctrl+url可以直接打开
January 9th, 2009 on 0:40
这太棒了~太完美了~
感谢如歌哈~多来点儿这样滴文章吧~哈哈~
PS一下:CMD内容是不是给透露下?~哇哈哈~
再PS一下:contribute 木有用过,搜索了下,貌似蛮好玩~
January 9th, 2009 on 0:46
我发现我太依赖firebug,以至于有时候在IE下debug显得无从下手。
January 9th, 2009 on 1:10
雕想说的是donate还是contribute,结合上文好像donate的可能性大些……
January 9th, 2009 on 8:32
是想说donate,感谢Leo指正
January 9th, 2009 on 8:37
来看望射雕兄,firebug依赖症中,什么浏览器下,都会魔怔的去按F12…
January 9th, 2009 on 9:40
快捷键: ctrl + shift + c 就可以直接选择元素了。不用按 F12 之后再去点查看
January 9th, 2009 on 9:42
最近做东西的时候设置快捷键ctrl+shift+c,才知道这是Firebug的快捷键,可以直接打开Firebug并查看元素
January 9th, 2009 on 9:48
对这些快捷操作还真没怎么“折腾”过哦
January 9th, 2009 on 11:57
@Gabriel 很强大
January 9th, 2009 on 12:44
一直在用,但是没有发现还能这么用,多谢!
January 9th, 2009 on 15:04
很惭愧,我就是靠它吃饭了,一直也未能分享这些东西,非常感谢玉伯大人的分享
January 9th, 2009 on 21:38
好文章! firebug好多细节真赞!多希望更多的设计师理解它们……
January 9th, 2009 on 22:08
刚试过了最后的秘技,原来可以这样测试多浏览器下的显示啊,有意思。
January 10th, 2009 on 12:51
很不错的技巧!!!
January 10th, 2009 on 21:31
好秘籍,受益匪浅。个人感觉背景图片的最实用,其次是调整字体的。
January 11th, 2009 on 18:29
冒个泡,这个真的很受用。。。 还有, 8楼朋友提的那个我觉得博主应该考虑加上,也很强大。
January 11th, 2009 on 19:24
最后个图把我忽悠了。PgUp/PgDn这个算是学到了。
January 13th, 2009 on 23:46
好文,好文,学到不少
February 23rd, 2009 on 17:42
不错不错~~8楼那位兄弟的技巧也很实用
May 15th, 2010 on 7:47
感谢雕兄
July 16th, 2010 on 15:34
非常有用的技巧~
August 5th, 2010 on 21:19
原来可以这样~~~我那美克星了…
leave a reply