如何使用firebug进行调试
firefox插件使用教程
有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器 会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。
利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你 使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。
console.log("hello world")
如果你有一堆参数需要组合在一起输出，可以写成这样：
console.log(2,4,6,8,"foo",bar).
Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但 是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。
如何获取和安装firebug？
因为firebug需要在firefox浏览器下运行，所以大家一定要安装个firefox浏览器。然后用 firefox打开https:///zh-CN/firefox/addon/1843页 面添加到firefox即可，安装好后在 工具栏中可以看到（图一）
图7：javascript调试器
#p#副标题#e#
FirebugDOM查看器
DOM(Document Object Model)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名 字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个 DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为 document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的 DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。
firebug使用方法
Fire bug 与Charles
QTP与Charles
Fire bug简介
Firebug是firefox下的一个插件,能 够调试所有网站语言,如Html,Css等， 但FireBug最吸引我的就是javascript调 试功能，使用起来非常方便，而且在 各种浏览器下都能使用 （IE,Firefox,Opera, Safari）。除此之外， 其他功能还很强大，比如 html,css,dom的查看与调试，网站整 体分析等等。总之就是一整套完整而 强大的 WEB开发工具。再有就是其为 开源的软件。
Fire bug API
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函 数，目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的 能力，而又无需访问源码，或理解内部工作机制的细节。API除了有应用“应 用程序接口”的意思。
如图：3-1
3.快捷方式关闭：启动Fire Bug->按F12 关闭Fire bug
如图：3-2
4.图标关闭：如图3-4所示
如图：3-3
如图：3-4
Fire bug控制台
1.启用：启动Fire bug ->控制台-> 启用->ok
2.作用：显示各种脚本错误信息、 数值、命令ug命令行
Fire bug 控制台数据显示
举例：抢车位
ExternalInterface.call("console.log","我的金币:"+result.gold+" 钻 石:"+result.money+" 经验:"+result.experience+"/"+result.nextLevelExp+" 汽车数 量:"+result.carCount+" 游戏等级:"+result.level);
使用Firebug加速Dorado开发
使用 FireBug 加速 Dorado 开发使用 Firebug 加速 Dorado 开发BSTEK 2007 年 9 月第 1 页 共 29 页使用 FireBug 加速 Dorado 开发目录概述 ........................................................................................................................................... 4 准备工作 ................................................................................................................................... 4 下载 Firefox ....................................................................................................................... 4 安装 FireFox ...................................................................................................................... 4 下载安装 Firebug .............................................................................................................. 6 使用 Firebug .............................................................................................................................. 9 初识 Firebug ...................................................................................................................... 9 打开 Firebug .............................................................................................................. 9 Firebug 界面介绍 .................................................................................................... 10 控制台 ............................................................................................................................. 11 显示错误功能 ......................................................................................................... 11 Debugger 功能 ........................................................................................................ 11 错误搜索以及过滤 ................................................................................................. 12 查看和修改 Html ............................................................................................................ 13 查看 Html ................................................................................................................ 13 修改 Html ................................................................................................................ 14 查看 Html 元素的 Style .......................................................................................... 15 查看 Html 元素的 Layout ....................................................................................... 16 查看 Html 元素的 Dom .......................................................................................... 16 查看和修改 Css ............................................................................................................... 17 JavaScript 调试器 ............................................................................................................ 18 对 JavaScript 进行调试 ........................................................................................... 18第 2 页 共 29 页使用 FireBug 加速 Dorado 开发对 JavaScript 代码进行性能优化 ........................................................................... 20 Dom 查看器 .................................................................................................................... 21 对 Dom 对象进行查看和修改 ............................................................................... 21 对查看内容进行过滤 ............................................................................................. 21 网络状况监视 ................................................................................................................. 23 查看 http 请求统计 ................................................................................................ 23 查看 http 请求内容 ................................................................................................ 23 附录 ......................................................................................................................................... 25 Console Logging 函数 ..................................................................................................... 25 Logging 基础........................................................................................................... 25 Logging 等级........................................................................................................... 25 断言 ......................................................................................................................... 25 测量(Measurement) .......................................................................................... 27 字符串格式化 ................................................................................................................. 27 命令行函数 ..................................................................................................................... 27第 3 页 共 29 页使用 FireBug 加速 Dorado 开发概述Firebug 的中文含义是萤火虫,是 FireFox 下的一个插件,其定位是一款 Web 开发工 具.通过 Firebug,可以即时的编辑,调试和监视 Css,Html 和 JavaScript.本文讲介绍 Firebug 的各个功能的使用,会结合表现层中间件 Dorado 来进行示例.关于 Dorado 可 以参考如下链接: 准备工作 准备工作在开始讲述 Firebug 的使用之前,先进行 Firefox 和 Firebug 的下载和安装.提示:Firefox 亦即火狐浏览器,是近年来撼动 IE 浏览器市场占有率的一支强大力量.下载 FirefoxFirefox 的下载链接如下: /en-US/firefox/ 首先进入该链接以后, "Download Firefox-Free" 在 链接即可开始下载, 如下图所示:等待若干时间,就可下载成功.安装 Firefox运行下载的 Firefox Setup 2.0.0.6.exe,弹出安装对话框,点击下一步,在对话框中选 择"我接受该协议条款",点击下一步.若需要自行定义安装路径以及其他配置,需要 在对话框中安装类型处选择"自定义",如下图所示:第 4 页 共 29 页使用 FireBug 加速 Dorado 开发安装路径以及其他配置可以自行配置,安装路径的配置如下图所示:安装完成后,运行 Firefox,界面如下图所示:第 5 页 共 29 页使用 FireBug 加速 Dorado 开发下载安装 Firebug打开 Firefox,打开如下链接: / 在打开页面中可以看到"Install Firebug 1.0 For Firefox"的链接,如下图所示:点击该链接,则弹出如下对话框:第 6 页 共 29 页使用 FireBug 加速 Dorado 开发点击上图对话框的"立即安装"按钮,则 Firefox 自行下载 Firebug,下载成功后如 下图所示:点击重启 Firefox 即可完成安装.第 7 页 共 29 页使用 FireBug 加速 Dorado 开发提示: 也可以选择下载下来然后再安装这个插件,不过在刚才那个网站是没办法下载的. 我们可以到下面这个链接去下载这个插件的安装文件: https:///en-US/firefox/addon/1843 我们可以看到下载的文件是 xpi 文件格式(以.xpi 结尾).如何安装这个扩展文件呢? 有三种安装方法: 1,直接拖拽到 Firefox 浏览器的窗口里或扩展窗口里. 2,点击 '菜单"--"工具"--''附加软件'',把.xpi 文件拖进弹出窗口里,稍后就可以看到 Firefox 会询问你是否要安装这个插件,点击是,并重启 Firefox 浏览器. 3,鼠标右键点 xpi 文件,选打开方式,在打开方式里选 firefox,设置关联.以后只要双 击 xpi 文件就自动安装了.第 8 页 共 29 页使用 FireBug 加速 Dorado 开发使用 Firebug初识 Firebug打开 Firebug 在使用 Firebug 之前,我们需要先打开 Firefox 并打开一个页面.本文档旨在如何使 用 Firebug 加速 dorado 开发,就拿 dorado sample center 中一个典型的查询页面举例说 明. 打开 FireFox,在地址栏输入如下链接,并回车: http://61.151.239.187/dorado5/skills/data/query.jsp 可以看到如下图所示的页面:在右下角我们可以看到一个绿色的对号图标,点击此按钮,就可以打开 Firebug 这 个插件.(这是在页面没有错误的情况下,否则会显示有错误提示信息的.)另外,我们 也可以使用快捷键 F12 打开.打开后的 Firebug 的界面如下图所示:第 9 页 共 29 页使用 FireBug 加速 Dorado 开发Firebug 界面介绍 在上图中可以大体了解到各个位置的不同功能,下面简单介绍一下: 菜单:打开 Firebug 的菜单,可以禁用启用 Firebug,并且可以对 Firebug 进行一些 选项设置. 功能切换栏:相当于 Dorado 中的一个 TabSet,切换不同的标签页,可以有不同的 功能.我们下文中就使用标签栏来称呼这个功能切换栏. 工具栏: 在每个功能下面, 工具栏各不相同, 在每个 Tab 功能的篇幅中将分别介绍. 切换下方的功能切换面板以后,上方的工具栏也会相应的变化. 可以看到 Firebug 有 6 个主要的 Tab 按钮,下文将主要介绍介绍这几方面的功能.Console 控制台 HTML Html 查看器 CSS Css 查看器 Script 脚本调试器 Dom Dom 查看器 Net 网络状况监视选项:不同的功能下,选项内容不同,可以对 Firebug 的功能进行定制. 搜索:可以对功能面板中的内容进行搜索,进行快速定位. 最大化和关闭:最大化即为把 Firebug 打开为一个单独的窗口,关闭则为关闭 Firebug.第 10 页 共 29 页控制台显示错误功能在Java中，我们可以使用log4j等工具进行日志记录，并且打印到控制台中。
如何使用网站调试工具(如Chrome开发者工具或Firebug)诊断和解决网站错误和问题的教程和技巧
如何使用网站调试工具（如Chrome开发者工具或Firebug）诊断和解决网站错误和问题的教程和技巧网站调试工具是开发者在开发和维护网站时的必备利器。
它们可以帮助我们诊断和解决各种网站错误和问题，从而确保网站的正常运行和良好的用户体验。
本文将介绍如何使用常见的网站调试工具（如Chrome开发者工具和Firebug），并分享一些调试网站错误和问题的实用技巧和经验。
通过学习本文，您将能够快速定位和解决网站错误和问题，提高网站的质量和性能。
一、Chrome开发者工具Chrome开发者工具是一款功能强大而又易于使用的网站调试工具。
它内置于Google Chrome浏览器中，并提供了一系列调试和监控网站的功能。
以下是使用Chrome开发者工具调试网站的步骤：1. 打开Chrome浏览器，并打开待调试的网站。
2. 右键点击网页中的任意位置，并选择“检查”。
或者按下键盘上的Ctrl + Shift + I（Windows）或Cmd + Option + I（Mac）快捷键。
3. 弹出的开发者工具窗口中，可以看到网站的HTML、CSS和JavaScript代码，以及网站的网络请求、性能等信息。
二、基本功能介绍1. 元素面板：可以查看和编辑网页的HTML和CSS代码。
通过选择某个HTML元素，我们可以在右侧的样式选项卡中调整该元素的样式属性，以实时预览效果。
2. 控制台面板：提供了一个交互式的JavaScript命令行环境，可以查看和调试JavaScript代码中的错误和警告信息。
我们可以在控制台中运行JavaScript代码，以检查和修改网页中的变量和对象。
3. 网络面板：用于监控和分析网页发起的网络请求。
我们可以查看每个请求的详细信息，如URL、请求方法、响应状态码等，以及请求和响应的内容。
通过网络面板，我们可以检查网页的加载性能，并优化网页的资源请求。
4. 资源面板：用于查看网页的所有资源文件，如图片、样式表、脚本文件等。
Firefox FireBug 调试技巧
第8章 调试技巧理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同的原因而犯各种各样的错误，以至于给所构建的系统带来不同程度的危害。
有些错误浅显而低级，比如用错了大小写，或者写错了变量名等等；而有些错误是复杂的逻辑错误，这类错误往往隐藏较深，不容易找出错误的原因；另外一些错误可能是功能实现的方式有问题，导致程序有性能瓶颈等等。
可以说，软件开发就是不断编码和调试的过程。
使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。
本章将向读者详细介绍使用Firebug和Aptana调试JavaScript程序的一些技巧。
8.1 深入解析Firebug的调试功能在本书的第五章中已经向读者介绍过了Firefox浏览器的优秀调试插件Firebug的界面和基本功能。
本节将向读者深入讲解如何利用Firebug的控制台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行JavaScript代码，以及如何使用脚本查看器进行脚本的调试。
8.1.1 检查常规错误当Firefox遇到一个JavaScript错误时，Firebug会在其控制台输出一个错误信息。
这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。
下面这个示例中，在测试按钮的事件处理函数中调用了一个不存在的函数，代码如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>console demo</title><script type="text/javascript">function errorTest(){//不存在的函数notExistFunction();}</script></head><body><input type="button" value="test button" onclick="errorTest();" /></body></html>用Firefox打开页面，如图8.1所示。
Firebug使用指南
DOM Exploration
根据需要选择查看所需的内容
导航到JavaScript代码
JavaScript Logging 使用如 Console.log(“hello world”) 输入到Firebug 的 控制台
Resource Firebug官方网站： Firebug入门： /blog/2007/06/introd uction-to-firebug/#fb_ajax Firebug高级议题： /video/play?vid=ccc d4aa02a3993ab06e56af731346f78.17559 24
查看每个文件的时间线
检查HTTP头
监视XMLHttpRequest
JavaScript Debugging
调试JavaScript
查找Scripts
断点调试
查看变量
单步执行 错误中断
Debug and profile JavaScript 设置断点 在任意行暂停
直接跳转到指定行
Firebug使用指南
Introduction to Firebug
Installing Firebug
Opening and Closing Firebug
Using Firebug
ConclusionFra bibliotekIntroduction
Web Development Evolved Created By: Joe Hewitt Firebug是免费的并开放源代码的。 Firebug 与Firefox结合在一起，你可以在浏览 网页的时候，利用Firebug编辑、调试、查看 CSS、HTML、JavaScript .
Opening and Closing Firebug 启动Firefox, “Tools” – “Firebug ”，你也可 以使用 F12 功能键，快捷地打开和关闭 Firebug
常用JS调试工具使用方法，帮你快速定位问题（Firebug+IE“开发人员工具”）
常⽤JS调试⼯具使⽤⽅法，帮你快速定位问题（Firebug+IE“开发⼈员⼯具”）来源：这⾥花了点时间⼩结了下⽬前项⽬中⽐较合适易于上⼿的JS调试⼯具、⽅法、优点与不⾜以及⼀些调试相关功能要点或策略，分享给同学们，只当抛砖引⽟了，欢迎⼤家讨论补充。
⼀、Firebug：如果项⽬可以⽀持Firefox，我依然⾸推Firebug作为JS调试⾸选，虽然有些不⾜之处，但基本可以满⾜⼤家90%调试场景需求。
A、功能讲解见上图，图中已标注出功能的五个关键点，下⾯顺序说明，先将Firebug切换到标注1中的JS调试功能Tab“脚本”上；打开标注2中的当前页⾯加载的所有静态JS链接资源，直接输⼊⿏标键⼊关键词就可以出现标注2下⽅⽂本框快速搜索打开需要的指定JS⽂件；以eq-commom.js为例，细⼼的同学应该已经发现页⾯加载的是压缩格式的JS⽂件，其实Firebug不仅提供了对⾏设置调试断点，也⽀持语句级的断点调试，所以压缩⽂件调试也⽆妨，只要选中相应语句右键即可，如下：但是⼤家⼀定同意这样调试是多么痛苦的⼀件事，当然特殊情况⽆可奈何时除外。
解决这个问题⾸先得区分⼀下运⾏环境，如果是开发环境，可以改下环境配置从⽽让页⾯由加载eq-common.js的压缩⽂件改为加载eq-common-src.js的源格式⽂件。
如果是线上环境查线上问题或是开发环境改配置⽐较⿇烦，教⼤家⼀个懒⽽实⽤的⽅法，就是将eq-common-src.js的源格式⽂件内容贴到eq-common.js的压缩⽂件之中（当然线上环境需要要将线上静态加载资源绑定到本地）。
当然这都是假定有源代码运⾏环境的前题之下的，如果没有Firebug就没有办法了，这也算是Firebug的⼀个不⾜之处（下⾯在IE的“开发⼈员⼯具”中会讲到对此的解决⽅案）。
最常⽤的断点基本有两种：⾏断点及条件断点。
⾏断点模式最为常⽤，即在需要调试的⾏前点击加上断点即可，如下：这样程序运⾏到此处便会中断，在中断状态下可以如图进⾏多种操作和观察，包括：单步、逐过程、跳出（即跳到下⼀个断点）调试；对当前变量查看或进⾏监控，查看当前堆栈信息（这个在当前断点处存在问题时可以快速追溯来源），查看或重新设置管理断点（在这⾥也⽅便定位断点位置）；打个命令⾏功能，可以边调试边在当前状态下写脚本执⾏⼀些简单或更复杂的操作。
用Firebug调试JavaScript
本文翻译自《Firebug 1.5》第5章本章目录：命令行API$(id)$$(选择器)$x(xpath)dir(对象)dirxml(节点)clear()inspect(object[, tabName])keys(object)values(object)debug(fn)和undebug(fn)monitor(函数名)和unmonitor(函数名)monitorEvents(object[, types])unmonitorEvents(object[, types])profile([title])和profileEnd()控制台APIconsole.log(object[, objcet, ...])console.debug(object[, object, ...])(object[, object, ...])console.warn(object[, object, ...])console.error(object[, object, ...])console.assert(expression[, object, ...])console.dir(object)console.dirxml(node)console.trace()console.group(object[, object, ...])console.groupCollapsed(object[, object, ...])console.groupEnd()console.time(name)console.timeEnd(name)console.profile([title])console.profileEnd()console.count([title])JavaScript调试Firebug中单步调试JavaScript条件断点小结在本章里，我们将讨论Firebug提供的，以支持JavaScript的开发、调试、概览、以及测试的各种工具。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如何使用firebug进行调试
2009-06-05 18:34
不了解的同学先“点这里”看看什么是Firebug。
简单来说，Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展工具。
我们先到Firebug的主页上下载最新的版本装上，下面开始调试：
1、查看、编辑HTML元素及其CSS
安装好Firebug之后，你可以通过点击浏览器右下方的小虫子打开Firebug，如图：
[打开Firebug]
或者直接按F12，如果要以窗口形式打开的话，就按下CTRL+F12
打开Firebug之后，点击“查看”，然后选择页面上任何需要编辑的地方，Firebug会将其选中，并且在HTML结构中将其高亮，如图：
[Firebug的查看按钮]
之后你可以对该元素的HTML结构、属性进行任意的编辑，修改后的效果都会实时的展现在页面当中。
同时在Firebug的右侧是该元素对应的CSS样式，如下图：
[Firebug中元素的样式查看]
图中的样式，显示了该元素被重新定义的样式继承关系，比如“继承自body.CurHome”的“text-align”属性被“继承自div.shell”的“text-align”覆盖，原先的属性就会以中横线的形式表示出来。
如果要查看所有的属性，请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性；单击任意一个属性或者属性值可以进行CSS的编辑，如“3”；双击“4”则可以新建一条CSS属性。
现在我们点击下“5”来看看CSS布局面板：
[Firebug中的CSS布局面板]
上面这幅图展现的是一个HTML结构的标准盒模型，通过点击相应的数值可以修改该值，同时在浏览器窗口中显示出对应的效果来。
2、查看动态生成的HTML代码的方法
通过“查看源代码”的方法，无法看到由JS动态生成的HTML结构，这里我们可以通过Firebug 来查看，如下图，选中“body”节点，按下“编辑”，即可输出页面上源文件的代码以及动态生成的代码。
[查看所有动态生成源代码]
还有另外一种简单的方法，选中你要查看的页面元素，然后在右键菜单中选择“查看选中部分源代码”
3、查看/测试页面的函数执行效率
查看页面上所有函数执行效率可以很容易的找到运行最慢的函数，从而帮助WD有针对性的进行页面的JS优化。
如图，为需要调试的页面“启用控制台”：
[查看页面所有函数的运行效率]
点击“概况”开始收集，再次点击即可停止，然后进行查看。
在firebug控制台的最底下是一排命令行，在这里你可以输入任意JS语句，按下回车键即可执行：
[Firebug命令行功能]
使用console，还可以测试一段代码或者函数的执行时间，点击命令行最右侧的红色按钮切换到命令行多行模式：
[测试函数执行时间]
4、使用Firebug查看XMLHttpRequest
使用Firebug查看XMLHttpRequest，对于调试AJAX是很有帮助的。
如图：
[使用Firebug查看XMLHttpRequest]
为需要调试的站点开启“网络”监控功能，其实该功能可以查看页面上所有类型的post和get 请求，并且还会显示出请求消耗的时间。
对于XMLHttpRequest会有详细的参数与返回值。
5、查看页面上所有的CSS与JS
在页面调试中我们发现，对于外部引用的CSS与JS很难进行调试，使用基于Firebug的Yslow 扩展即可解决该问题。
首先在Yslow的主页上下载一个最新的版本装上：/yslow/
[打开Yslow]
在Firebug小虫子的右边就是Yslow，后面的数值是当前页面完全加载所消耗的时间，点击Yslow即可打开（或者通过Firebug的Yslow面板，运行“Performance”进行页面分析）。
[查看所有CSS/JS]
如上图，选择“All JS”后，当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中，这样查看页面上所有的JS源代码就变得方便多了。
6、查看页面上所有的资源列表
其实前面第四点介绍到的“网络”功能就可以查看所有资源列表，而且可以通过查看状态来进行对应的优化（例如排查404元素）。
这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表：
[Yslow中查看所有资源列表]
鼠标hover可以看到对应的缩略图，点击则可在新窗口中打开。
更多Yslow功能请查看其主页。
7、使用Firecookie调试页面cookie
Firecookie是基于Firebug的cookie调试工具，先到作者的主页上了解下详细信息，再下载一个安装上。
/blog/firecookie/
安装好之后，Firebug中会多出一个“cookie”面板，你可以为需要调试的页面添加、删除、修改cookie信息。
[Firecookie调试面板]
Firebug是一款能够为WD提高效率的调试利器，希望大家都能用上。
关于Firebug的更多信息：
* 基于Firebug的firefox扩展
* Firebug视频教程
* Firebug Console。