一、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程序员必备工具哦:)