你最喜欢的Firebug提示或技巧是什么?

我认为每个Web开发人员都喜欢Firefox的Firebug扩展,以解决CSS,JavaScript或HTTP问题。

我经常使用它,但我确定我不知道一些隐藏的gem。 什么是你最喜欢的(不是明显的)技巧或提示萤火虫?

从Yahoo安装YSlow for Firebug 。

这是我的一个提示。

debuggingJavaScript,你可以设置条件断点,右键点击红色的断点符号:

Firebug有条件的断点

虽然这不是一个技巧或任何东西,甚至对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面板的上下文菜单查找选定的项目:
    • HTMLCSS
    • 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中编写的一些最新的帮助函数 。