你最喜欢的Firebug提示或技巧是什么？
我认为每个Web开发人员都喜欢Firefox的Firebug扩展，以解决CSS，JavaScript或HTTP问题。
我经常使用它，但我确定我不知道一些隐藏的gem。 什么是你最喜欢的（不是明显的）技巧或提示萤火虫？
从Yahoo安装YSlow for Firebug 。
这是我的一个提示。
debuggingJavaScript，你可以设置条件断点，右键点击红色的断点符号：
虽然这不是一个技巧或任何东西，甚至对Firebug也不是什么特定的东西，但它是我最喜欢的事情，因为我每天使用它，如果不是每小时几次，那当然是直接编辑HTML和CSS的能力，结果立即出现 。 这是一个令人难以置信的节省时间，只是编辑和重新上传检查事情，布局明智。 如果没有这个function，我所做的一切可能会花费两倍的时间。
如果您习惯于编写Greasemonkey脚本，Firebug的$x函数对于debuggingXPATH非常有用。 在HTML选项卡中，您也可以右键单击任何元素，然后select“复制XPATH”，以加快您到document.evaluate天堂的路上。
通过在HTML选项卡上右键点击logging任何特定元素的所有事件，并select“logging事件”也非常漂亮。
在DOM选项卡上，选项下拉菜单允许您只显示用户定义的属性和函数，这对于准确了解您对全局名称空间的影响或debugging某个人意外引入全局variables的问题很方便。
易于debugging输出的Firebug控制台。 这是一个非常好的selectalert('blah') 。
不是一个萤火虫技巧本身 – 但Firebug的另一个很好的扩展是Firecookie 。 它允许轻松pipe理cookie。
如果您在“样式”选项卡中单击某个CSS属性名称或值，则可以使用向上和向下箭头键滚动查看所有可能的值。 它也可以通过将它们加1（如果你按下10px值上的UP，它将会变为11px，12px等等） – 在你尝试找出正确的元素尺寸/边距时很有用，因为你不必input每个数字手动。
我现在使用Firebug for Flex和Flash应用程序来弄清楚怎么了（因为跟踪需要在某处追踪）。 有时候这个方法看起来像这样
public static function debug(text:Object):void { trace(text); // trace is nice if you've got it ExternalInterface.call("console.log", text.toString()); }
奇迹般有效…
（仍然不确定是否需要控制台作为一个存在的Javascript对象，在这种情况下，你需要将roosteronacid的解决scheme与这个对象结合起来，既然你控制了HTML页面，一般来说，任何事情都是可能的）。
我最喜欢的事情是内置的variables$0 ，它指向你最近检查的东西。 我最近才发现这件事，它非常有用。
另一个不错的Firebug扩展是FireSpider ，它可以让你很容易的检测到你的网站中断链接等。
更新：
好像你现在可以覆盖控制台对象。 我build议你审查Insin （已作为评论发布此答案）。
只有Firebug将console对象提供给JavaScript。
此修补程序将防止在开发阶段使用Firebug console对象时Internet Explorer和其他浏览器中的JavaScript中断。
这是跨多个浏览器debugging同一应用程序的一个很好的解决scheme。 （没有更多的注释掉你所有的console对象调用。）
try { var console = { log: function () { return; }, debug: function () { return; }, info: function () { return; }, warn: function () { return; }, error: function () { return; }, "assert": function () { return; }, dir: function () { return; }, dirxml: function () { return; }, trace: function () { return; }, group: function () { return; }, groupEnd: function () { return; }, time: function () { return; }, timeEnd: function () { return; }, profile: function () { return; }, profileEnd: function () { return; }, count: function () { return; } }; } catch (e) { }
你甚至可以修改console对象在其他浏览器中工作：
try { var console = { log: function () { for (msg in arguments) { alert(msg); } }, ....
一个好处是，Visual Studio现在能够识别console对象及其方法。
CodeBurner是Firebug的文档插件，显示任何HTML元素或CSS属性的参考资料。 它添加了一个参考面板，包含：
- 遵守标准
- 浏览器兼容性
- 句法
- 代码示例
链接到Mozilla上的加载项
你也可以：
- search所有已知的HTML元素，属性和CSS属性。
- 通过以下Firebug面板的上下文菜单查找选定的项目：
- HTML和CSS
- DOM crumbtrail
- 检查员
如果您不确定有多lessparameter passing给某个callback函数，它们是什么：
$('li').each(function(/* what's passed here? */) { //... });
您可以使用console.log快速replace此函数，并查看日志中的所有参数：
$('li').each(console.log);
或使用js arguments属性来获取传递的参数数组：
$('li').each(function(/* what's passed here? */) { console.log(arguments) });
FireQuery 。 它会将jQuery注入到页面中，并让您从控制台选项卡中使用它，这样可以很容易地testingjQuery，或者只是针对您所在的页面运行命令。 它还增加了一些扩展到HTML标签，让你看到像jQuery的data标签和附加事件的东西。 如果您使用Firebug并进行jQuery开发，这是必须的。
FirePHP允许您从PHP生成debugging消息，这些消息是作为标题发送的，并由Firebuglogging。
Pixelperfect允许您放置重叠图像，以便将HTML元素与草稿alignment。
许多人有时忘记使用这些：
console.log（x，y，z） – >在1控制台行中打印3个variables
console.warn（“我有背景！”） – >标记此行，以便于目测;）
console.dir（{a：1，b：2，c：3}） – >以一种很好的方式打印json / Array数据。
此外，我大量使用NET选项卡，这对查看JSONstream量数据非常有帮助，也用于分析阻止脚本，并测量HTTP请求时间。
每当我看到一个讨厌的，华而不实的广告，我只是看着Firebug，使用检查器检查广告的元素（或父元素），然后将其CSS属性设置为“none”。 Presto，没有广告！
当我debugging我的CSS和devise时，立即更改样式和CSS值以testing…
有时在debuggingAjax时，控制台不会显示所有请求（例如，如果您使用跨域Ajax或隐藏的iframe）。 如果切换到“Net”选项卡，您仍然可以查看它们。
在Firebug中编写和testing代码，特别是编码助手function。
Coding Live的感觉非常酷。 请参阅我在Firebug中编写的一些最新的帮助函数 。
