用Firebug: 调试JavaScript、HTML和CSS

(原)http://www.cnblogs.com/Fooo/archive/2009/10/13/1582645.html

用Firebug: 调试JavaScript、HTML和CSS   Posted on 2009-10-13 17:27 且行且思 阅读(568) 评论(0)  编辑 收藏

免费提供的Firebug对于Firefox来说是一个优秀的开发插件。它是一个集成的用于监视和调试JavaScript、HTML和CSS的工具。下面我们就来看看Firebug的功能和优势。 

　　       Firebug概述

　　Firebug非常有意思的一点是它与Firefox的紧密集成。你可以在浏览器里或者在一个单独的窗口里打开Firebug。如果在浏览器里打开，Firebug会被放在Web页面的底部——一个能够通过单独选项卡或者窗口附在不同页面上的单独实例。

　　界面上有四个（原文如此——译者注）选项卡——HTML、CSS、Script、DOM、Net——每一个都与页面不同的内容相对应，还有一个用于错误和日志信息的控制台。你可以选择每个选项卡看看对应的页面元素。

　　使用代码

　　HTML、CSS、Script和DOM选项卡让你可以窥探到页面各种代码的状况。HTML选项卡代表页面的HTML元素。你可以展开和／或折叠这些元素以查看或隐藏子元素。JavaScript和DOM选项卡也是如此。这一功能让你很容易就能够深入理解页面的源代码。

　　调试

　　Firebug为使用JavaScript提供了一个可靠的调试器。你可以在脚本特定的地方设置断点来终止运行，也可以设置条件断点，以便程序在满足某些条件的时候终止运行。此外，调试器还让你能够一次一行地进行单步调试，以便密切监视执行情况。

　　在使用调试器的时候，堆栈可以提供任何给定时刻的环境快照。这样你可以查看变量，并监视调用堆栈。观察功能让你能够在代码执行的时候观察变量和表达式。JavaScript代码可以被插到页面里以生成调试数据。代码分析器能够生成函数调用报告以及这些调用占用的时间。调试功能在控制台选项卡里。

　　控制台是我最喜欢的Firebug功能。它让我可以即时执行JavaScript；这在我开发代码的时候非常有用，你可能会关心一段代码的某一行是如何执行的。如果你不记得JavaScript语言的众多功能，那么自动完成功能能够帮你解决问题。除了运行代码，它还会显示JavaScipt的错误消息日志。

　　Firebug控制台API提供了控制台变量，你可以在Web页面的代码里使用这些变量，以便在脚本执行的时候生成调试信息。它带有很多帮助处理调试的方法，包括log、trace和debug等。

　　网络活动

　　通过Net选项卡可以查看与有关页面相关联的网络活动。它会显示所有与页面有关的下载以及每项资源花了多长时间下载。来自于缓存的请求都用颜色加以区分。来自缓存的项目都是浅灰色的，这样你在快速浏览的时候就会知道使用缓存优化页面加载时间的效率情况。

　　Net带有自己的次级选项卡以过滤需要显示的内容——你可能希望列出所有的元素，或者只列出HTML、CSS、JavaScript、图片，以及Flash元素。XBR选项卡让你可以检查HTTP的标题和服务器响应；当你使用AJAX应用程序的时候，这是一个相当好的功能。 ------------------------------------------------------------------------- Firebug下载地址: http://getfirebug.com/releases/firebug/1.4X/    
安装:打开火狐浏览器后,直接拖至火狐内,它会自动提示安装,并重启, 打开 Mozilla Firefox的工具菜单中, 就可以看到Firebug子菜单.
安装就不用说了，很简单，在FireFox上插件库里找到FireBug就Ok了。下图是FireBug Debug 窗口。

            简而言之，FireBug 可以让我们在任何时候debugJS 并查看变量，同时可以通过它找出JS中性能瓶颈。       下图是如何找到Web应用的JS，激活Firebug，点Script，然后在All 旁边选择你要Debug的JS。

 

   下图是如何打断点 基本跟Eclipse一样，点击行号就Ok了。

下图是如何在断点上设定条件，如果条件符合，就进入断点，这个功能很不错，特别是Debug很复杂的Function时候。

 

  下图是如何单步调试，跟Eclipse一样 F11单步

 

下图是查看调用的Stack，对以复杂的JS Debug很有帮助。

 

下图是查看变量 基本跟EclipseDebug 一样。

 

 

下图是在断点处查看变量。

 

 

有个很好用的功能，代码行之间快速调转，使得对上千行的JS调试很轻松。

 

 

下图就是Performance 测试结果，使用很简单 点Profile

 

 

还有一个Log功能比较实用，看下图 如果你不想每次都进入断点，用这个就再好不过了。

 

      

 

 

Firebug快捷键列表

2008-04-06 00:12

firebug是Firefox浏览器一个强大的插件 对于web开发和设计人员来说的确是不可多得的工具 Open Firebug Panel F12 Close Firebug Panel F12 Open Firebug in Window Ctrl+F12   ⌘+F12 Switch to Previous Tab Ctrl+`   Option+Tab Focus Command Line Ctrl+Shift+L   ⌘+Shift+L Focus Search Box Ctrl+Shift+K   ⌘+Shift+K Toggle Inspect Mode Ctrl+Shift+C   ⌘+Shift+C Toggle JavaScript Profiler Ctrl+Shift+P   ⌘+Shift+P Re-Execute Last Command Line Ctrl+Shift+E HTML Tab Edit Attribute Click on name or value Edit Text Node Click on text Edit Element Double-Click tag name Next Node in Path Ctrl+. Previous Node in Path Ctrl+, HTML Editor Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab HTML Inspect Mode Cancel Inspection Esc Inspect Parent Ctrl+Up   ⌘+Up Inspect Child Ctrl+Down   ⌘+Down Script Tab Continue F5   Ctrl+/   ⌘+/ Step Over F10   Ctrl+'   ⌘+' Step Into F11   Ctrl+;   ⌘+; Step Out Shift+F11   Ctrl+Shift+;   ⌘+Shift+; Toggle Breakpoint Click on line number Disable Breakpoint Shift+Click on line number Edit Breakpoint Condition Right-Click on line number Run to Line Middle-Click on line number   Ctrl+Click on line number   ⌘+Click on line number Next Function on Stack Ctrl+. Previous Function on Stack Ctrl+, Focus Menu of Scripts Ctrl+Space   ⌘+Shift+Space Focus Watch Editor Ctrl+Shift+N   ⌘+Shift+N DOM Tab Edit Property Double-Click on empty space Next Object in Path Ctrl+. Previous Object in Path Ctrl+, DOM and Watch Editor Finish Editing Return Cancel Editing Esc Autocomplete Next Property Tab   Autocomplete Previous Property Shift+Tab   CSS Tab Edit Property Click on property Insert New Property Double-Click on white-space Focus Menu of Style Sheets Ctrl+Space   ⌘+Shift+Space CSS Editor Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab Increase Number by One Up Decrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page Down Autocomplete Next Keyword Up Autocomplete Previous Keyword Down Layout Tab Edit Value Click on value Layout Editor Finish Editing Return Cancel Editing Esc Advance to Next Field Tab Advance to Previous Field Shift+Tab Increase Number by One Up Decrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page Down Command Line (small) Autocomplete Next Property Tab   Autocomplete Previous Property Shift+Tab   Execute Return   Inspect Result Shift+Return   Open Result's Context Menu Ctrl+Return   ⌘+Return Command Line (large) Execute Ctrl+Return   ⌘+Return