打印

小工具之Firebug

本帖已经被作者加入个人空间

小工具之Firebug

一、Firebug是什么?

Firebug是FireFox的一款插件,主要是帮助开发人员在开发Web应用程序时对Web页面的CSS,HTML和javascript进行调试,以下是官方说法:

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

二、安装Firebug

进入Firebug的官方网站(http://www.getfirebug.com/),点击INSTALL FIREBUG 1.0 FOR FIREFOX按钮,开始安装,安装完成后会在浏览器的右下角出现一个小图标,点击次图标就可以看到其功能了。

三、使用Firebug调试javascript

Firebug功能强大,可以查看HTML页面的结构,查看CSS等,这里我们体验一下其javascript调试功能。
首先,在浏览器中打开http://www.railschina.com 这个站点的首页引入了prototype库,通过firebug我们就可以马上开始体验一下Prototype的强大功能。

点击firebug的console,在最下面的>>>后面输入
复制内容到剪贴板
代码:
$('footer').hide();
可以看到,页面的footer部分被隐藏了
复制内容到剪贴板
代码:
$('footer').show();
footer部分重新显示出来了

来个复杂点的:
复制内容到剪贴板
代码:
$${'a'}.each( function(element){ element.hide();})
所以的链接不见了
复制内容到剪贴板
代码:
$${'a'}.each( function(element){ element.show();})
链接重新出现了

再来个ruby样式的
复制内容到剪贴板
代码:
>>> var words = $w('keyword blog railschina com ');
>>> words
["keyword", "blog", "railschina", "com"]
>>> words.join('.');
"keyword.blog.railschina.com"
再也不用写html页面,疯狂刷新来调试javascript了。AJAX程序员必备工具哦:)
def keyword; end

TOP

不得不说,Firebug非常的棒,现在的日常开发中,必不可少啊.

TOP