Firebug非主流小技巧分享

快速查看背景图

大部分情况下，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…会让中国人更有味！