(转)用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

(转)用Firebug: 调试JavaScript、HTML和CSS

时间: 2024-10-10 14:51:52

(转)用Firebug: 调试JavaScript、HTML和CSS的相关文章

IE浏览器中用Firebug调试网站的方法

对于大部分做前端设计者而言应该都使用过Firefox浏览器下一款调试网站的扩展插件firebug吧,功能非常的强大,对于我们找出网页兼容性的问题非常的有效.不过对于很多不喜欢使用Firefox浏览器的开发者而言,那么IE浏览器有没有类似的插件呢?这个当然有,新版的IE8浏览器就自带了一款开发人员工具,基本上可以跟firebug媲美,虽然在有些功能还有待完善,但用起来也是绰绰有余了.而老版本的IE6和IE7就没有这个功能了.所以我们为大家推荐一款能够在IE6和IE7平台下调试网页的工具组合:IET

转 利用 Console 来学习、调试JavaScript

利用 Console 来学习.调试JavaScript 一  什么是 Console Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中. 二  什么浏览器支持 Console 很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console.而其他浏览器都支 持不好.比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显

二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法

回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu.com/s/1o6MAKCa 前言:前面多章对EFW框架的核心类库作了详细说明,接下来几章将对框架中的前端及界面层功能进一步讲解,前端分为两个部分Web前端和Winform前端,Web前端主要是在Web系统中使用,就是编写Html代码和JS代码开发网页界面,框架推荐的是JqueryEasyUI作为界面框架:W

chrome调试 JavaScript 脚本

随着 JavaScript 应用的复杂性逐渐提高,开发者需要有力的调试工具来帮助他们快速发现问题的原因,并且能高效地修复它.Chrome DevTools 提供了一系列实用的工具使得调试 JavaScript 应用不再是一件痛苦的事. 在这个部分,我们会通过调试 Google Closure hovercard demo 以及其他的动态示例来让你了解怎么去使用这些工具. 注意:如果你是 Web 开发者并且希望获得最新版的 DevTools,你应该使用 Chrome Canary 源面板 源面板允

如何调试Javascript代码

转自原文如何调试Javascript代码 目前,常用的浏览器IE.Chrome.Firefox都有相应的脚本调试功能.作为我们.NET 阵营,学会如何在IE中调试JS就足够了,在掌握了IE中的调试方法以后,Chrome和Firefox中的调试方法也变得相当简单了. 在F12开发人员工具中进行调试 打开IE浏览器,按下F12键,就会打开开发人员工具,这是IE内置的开发人员开发工具,方便开发人员对HTML.CSS.Javascript等网页资源进行跟踪调试使用的. 如果你打开的时候没有固定在网页底部

谷歌浏览器怎么调试js 谷歌浏览器调试javascript教程

谷歌浏览器是一款由谷歌公司开发的浏览器.谷歌浏览器是一款基于其他开源软件所撰写的.下面小编为大家分享一篇谷歌浏览器调试javascript的教程,希望帮助大家 首先我们打开开发者工具,你可以直接在页面上点击右键,然后选择审查元素或者在Chrome的工具中找到或者你直接记住这个快捷方式: Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台),或者直接按F12. 打开的开发者工具就长下面的样子,建议大家将开发者工具弹出作为一个独立的窗口: 1.Elements标签页 这个就是查看

Chrome 中调试Javascript

使用Chrome打开我们要调试的页面,然后使用快捷键F12打开开发者工具,当然,你也可以在工具菜单中找到.Chrome开发者工具如图: Elements选项卡是对界面上的元素进行选择的,我们要进行调试的代码在Sources 选项卡中. 打开Sources选项卡,点击左侧的小箭头打开所有资源,选择我们的页面: 我们要调试这个页面的代码,所以就打开这个页面,然后点击行号可以添加断点: 点击界面中的按钮,我们能够捕获到刚添加的断点: 添加监视的方法和在IE中的方法是一样的:选中变量,在变量上面单击,选

Chrome 控制台 如何调试javascript

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方) 1.先说一下源码定位 大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示 我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车 直接点击上图标红的链接,控制台将定位到Sources面板

JavaScript中的CSS属性对照表

JavaScript中的CSS属性对照表(新手必备) JavaScript中的CSS属性对照表是js初学者必备的基础知识 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width border