jquery的调试利器：Firebug使用详解

合集下载

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);

如何使用网站调试工具(如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. 资源面板：用于查看网页的所有资源文件，如图片、样式表、脚本文件等。

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

findbugs 用法

findbugs用法FindBugs是一款由加州大学伯克利分校的Java开发者团队开发的静态代码分析工具，主要用于发现Java代码中的潜在错误和漏洞。

本文将向您介绍FindBugs的基本用法，帮助您更好地利用这款工具提高代码质量。

一、FindBugs简介FindBugs是一款免费的开源工具，它通过分析Java代码的语法、数据流、异常处理等方面，发现潜在的错误和漏洞。

FindBugs可以帮助开发者发现一些不易被人工发现的错误，提高代码质量，减少软件缺陷。

二、安装FindBugs要使用FindBugs，您需要先将其安装到您的系统中。

FindBugs支持Windows、Linux和MacOSX等操作系统。

安装过程相对简单，您可以从FindBugs官方网站下载最新版本的FindBugs，并根据安装指南进行安装。

三、使用FindBugs进行代码分析安装完成后，您可以使用FindBugs对Java代码进行静态分析。

以下是使用FindBugs进行代码分析的基本步骤：1.打开FindBugs分析器界面，将要分析的Java代码文件上传到分析器中。

2.选择要进行静态分析的选项，如是否包含测试代码等。

3.等待分析器进行分析，生成报告。

4.查看分析报告，了解代码中的潜在错误和漏洞。

以下是一些使用FindBugs的常见用法示例：1.查找未使用的变量：FindBugs可以检测到未使用的变量，这可能是由于开发者疏忽或无意中留下的漏洞。

2.查找空指针引用：FindBugs可以检测到可能出现的空指针引用错误，这可能导致程序崩溃或出现不可预期的行为。

3.查找内存泄漏：FindBbugs可以检测到可能的内存泄漏问题，如对象引用未被释放等。

4.查找线程安全问题：FindBugs可以检测到线程安全问题，如并发修改共享数据等。

五、优化FindBugs结果使用FindBugs分析后，您可能会发现一些潜在的问题和漏洞。

对于这些问题和漏洞，您可以采取以下优化措施：1.修复错误：对于发现的错误和漏洞，您应该尽快修复它们，以确保代码的质量和稳定性。

常用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的“开发⼈员⼯具”中会讲到对此的解决⽅案）。

最常⽤的断点基本有两种：⾏断点及条件断点。

⾏断点模式最为常⽤，即在需要调试的⾏前点击加上断点即可，如下：这样程序运⾏到此处便会中断，在中断状态下可以如图进⾏多种操作和观察，包括：单步、逐过程、跳出（即跳到下⼀个断点）调试；对当前变量查看或进⾏监控，查看当前堆栈信息（这个在当前断点处存在问题时可以快速追溯来源），查看或重新设置管理断点（在这⾥也⽅便定位断点位置）；打个命令⾏功能，可以边调试边在当前状态下写脚本执⾏⼀些简单或更复杂的操作。

jq调用iframe里面的方法

jq调用iframe里面的方法1.引言在We b开发中，常常会遇到需要与if ra me中的页面进行通信的情况。

而使用j Qu er y（简称j q）这一广泛使用的Ja va Sc ri pt库，可以帮助我们简化与if ra me的交互操作。

本文将介绍如何使用j q来调用i fr am e里面的方法，实现页面间的协作。

2.准备工作在开始使用j q调用i f ra me方法之前，需要确保以下几个条件已经满足：-页面中存在一个或多个if ra me元素，并确保这些i fr am e元素已经加载完毕。

-i fr am e元素中嵌入的页面需要和主页面位于同一个域名下，以避免跨域访问的限制。

3. j q调用i f r a m e方法的基本步骤下面将介绍在jq中调用if ra me方法的基本步骤：3.1获取i f r a m e元素首先，使用j q的选择器来获取需要调用方法的目标i fr am e元素。

例如，如果我们要调用一个i d为"my Fr am e"的if ra me中的方法，可以使用以下代码来获取该i fr am e元素：v a ri fr am e=$("#myF r am e");3.2获取i f r a m e内部的w i n d o w对象通过获取到的if ra me元素，我们可以进一步获取到其内部的w in do w对象。

这个w in do w对象可以用来执行if r am e中定义的J ava S cr ip t方法。

通过以下代码可以获取到if ra me内部w in do w对象：v a ri fr am eW in do w=i f ra me[0].co nt ent W in do w;3.3调用i f r a m e内部方法一旦获取到了if ra me内部的wi nd ow对象，我们就可以直接调用其中定义的方法了。

例如，假设我们要调用名为"my Fu nc ti on"的方法，可以使用以下代码来完成调用：i f ra me Wi nd ow.m yFu n ct io n();4.注意事项在使用j q调用i fr am e方法时，需要注意以下几点：-为了避免出现异常错误，应该在确认if r am e已经完全加载后再进行调用。

jq调用iframe中的某个方法

jq调用iframe中的某个方法在使用jQuery (jq)调用iframe中的方法时，可以采取以下步骤：步骤1：获取到iframe元素首先，通过jQuery选择器获取到你想要调用方法的iframe元素。

可以使用id、class或其他属性选择器来定位到iframe。

```javascriptvar iframeElement = $('#myIframe');```步骤2：获取到iframe的内容通过获取iframe的内容，可以访问到其内部的JavaScript方法。

使用contentWindow属性来获取iframe的window对象，然后使用该对象的contentDocument属性来获取iframe中的文档对象。

```javascriptvar iframeContent = iframeElement[0].contentWindow.contentDocument;```步骤3：调用iframe中的方法一旦你获取了iframe的文档对象，就可以通过普通的JavaScript语法来调用其中的方法。

```javascriptiframeContent.getElementById('myButton').click(); // 假设调用了按钮的点击事件```在上面的例子中，我们假设iframe中包含一个id为"myButton"的按钮，并使用click()方法来模拟用户点击该按钮。

需要注意的是，由于同源策略的限制，当iframe和主页面不在同一个域名下时，将无法直接调用iframe中的方法。

如果存在跨域问题，你需要在iframe和主页面之间通过postMessage方法进行通信。

完成以上步骤后，你就成功地使用jQuery调用了iframe中的特定方法。

记得根据你的实际情况修改选择器和方法名，以适应你的项目需求。

firebug实用技巧

第 8 章调试技巧理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同的原因而犯各种各样的错误，以至于给所构建的系统带来不同程度的危害。

有些错误浅显而低级，比如用错了大小写，或者写错了变量名等等；而有些错误是复杂的逻辑错误，这类错误往往隐藏较深，不容易找出错误的原因；另外一些错误可能是功能实现的方式有问题，导致程序有性能瓶颈等等。

可以说，软件开发就是不断编码和调试的过程。

使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。

本章将向读者详细介绍使用 Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。

深入解析 Firebug 的调试功能在本书的第五章中已经向读者介绍过了 Firefox 浏览器的优秀调试插件 Firebug 的界面和基本功能。

本节将向读者深入讲解如何利用 Firebug 的控制台输出各种自定义的信息、查看错误提示，如何利用命令行工具在页面上执行 JavaScript 代码，以及如何使用脚本查看器进行脚本的调试。

检查常规错误当 Firefox 遇到一个 JavaScript 错误时，Firebug 会在其控制台输出一个错误信息。

这个错误信息包含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。

下面这个示例中，在测试按钮的事件处理函数中调用了一个不存在的函数，代码如下所示。

<!DOCTYPE"-.,messageN]);在代码被执行时，其参数会被连接在一起输出到 Firebug 的控制台中。

还支持 5 种占位符，见表 8-1 所示。

表 8-1 占位符占位符符%s%d,%i%f%o 说明字符串整数浮点数对象占位符只能在的第一个参数中使用。

当第一个参数中包含占位符时，程序会根据占位符的数量，取从第二个参数开始的足够数量的参数替换到对应的占位符所在的位置，剩下的其他参数，则按照默认行为被连接到输出信息的末尾。

网页抓包工具火狐插件FireBug的抓包利用教程

By on 2020 年12 月29 日作为一个开发人员，我想没人会不用火狐吧？既然是开发人员，又用了火狐，那没人会不用firebug吧？最经常使用的firebug查看页面中的元素，但恐怕有很多人都没用过它的抓包工具。

抓包工具，目的确实是用它分析网络数据包的内容，不管是POST数据仍是GET 数据。

想要写个网络蜘蛛，网站登岸辅助程序之类，比如的《》，等等是离不开抓包工具的。

先介绍一下主流的4种抓包工具：1 IE的老牌插件HTTPWATCH3 Winsock expert 一个独立应用4 Fiddler2 独立的应用喜爱主流的朋友，此刻能够离开去下搜索引擎下载了，忘记说了，那些工具都是要钱的，你说破解？嗯，那个不算。

下面来介绍一下firebug所集成的免费抓包工具，话说回来firebug实在太壮大了。

打开firebug，点击网络（NET），如以下图固然第一是启用它，下面以模拟登录人人网抓包为例，打开火狐，打开firebug，打开网络启用，登录人人首页，输入好用户名和密码，为了后面看得清楚，咱们先把操纵台清除一下，点击清楚。

最后点人人网的登录按钮提交。

这时firebug已经把所有的POST和GET请求都记录了下来，包括图片，JS等等，固然有些对咱们写代码来讲是没有效的，firebug已经帮咱们标为灰色的了，一样情形下咱们只需要分析黑体的请求。

不难看出，登岸到人人网首页需要通过以上三个请求，一个POST和两个GET，点开第一个POST请求咱们的请求和人人网效劳器的响应已经清楚的列给咱们了，一样咱们写代码所需要做的确实是模拟上面的请求头信息，再加上需要发送的数据，发送了哪些数据，点击上图的POST，（在GET发送的时候，firebug里面称作参数，下面咱们能够看到）咱们模拟完请求头，再模拟请求数据，确实是上图Content-Type: application/x-www-form-urlencoded Content-Length: 108email=ufoamyko022%&password=XXXXXXXX&origURL=http%3A%2F%&domain=这一段，然后通过代码发送请求，取得响应，假设响应头理由咱们需要的信息，比如有set-cookie，咱们就把它保留下来，以后就能够够进行第二个，第三个请求的模拟。

调试工具Firebug的使用方法

调试工具Firebug的使用方法本文主要介绍下调试工具FireBug的使用方法。

Firebug的好处在于，它可以显示动态生成的DOM，甚至可以在Firebug里面直接对DOM进行修改，而这些修改会反映到现实上，并且通过Firebug提供的控制台，可以直接执行Javascript脚本，也可以配置console.debug、和console.error等日志方法，以便于跟踪。

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。

它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。

Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web 页面内部的细节层面，给Web开发者带来很大的便利。

这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。

目前最新版本为Firebug1.4。

一、安装Firebug1.41、安装(1) 首先安装FireFox3.5(2) 然后双击firebug-1.4.2-fx.xpi,选择打开方式为FireFox3.5(或者直接拖动到FireFox3.5也可)(3) 重启FireFox3.5,在查看菜单中选择firebug即可查看,具体展开图如下图所示：图1二、Firebug1.4的应用如上图所示，我们可以查看到firebug的Tab按钮，具体包括:Console,HTML,CSS,Script,DOM,Net1、Console控制台控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。

而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post 出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

JavaScript代码性能分析与优化的实用工具

JavaScript代码性能分析与优化的实用工具JavaScript是一种广泛应用于Web开发的脚本语言，但其执行效率可能受到限制。

为了提高JavaScript代码的性能，开发人员可以使用性能分析工具来识别和解决性能瓶颈。

本文将介绍几种实用的性能分析工具，并提供优化策略，以帮助您改进JavaScript应用程序的性能。

一、Chrome DevToolsChrome DevTools是一个内置在Google Chrome浏览器中的开发者工具，它提供了一套强大的性能分析和优化功能。

通过使用Chrome DevTools的Performance面板，开发人员可以记录和分析代码的执行时间、内存使用情况以及其他与性能相关的指标。

对于发现性能瓶颈，开发人员可以使用这些数据来确定是哪个部分的代码导致了性能问题，并进行相应的优化。

二、FirebugFirebug是一款广为使用的开发者工具，它为开发人员提供了一个方便的界面，用于分析和调试JavaScript代码。

对于性能分析，Firebug提供了一个Profiler模块，允许开发人员检测代码执行时间以及函数调用的次数。

借助这一功能，开发人员可以快速识别出执行时间较长的函数，然后针对性地进行优化。

Firebug还提供了一些其他有用的功能，如实时编辑和调试CSS、HTML等。

三、LighthouseLighthouse是一个开源的自动化工具，用于改进Web应用程序的质量。

其内置了一个性能分析工具，可以评估Web应用程序的性能，并提供一些建议来优化应用程序的加载速度和响应时间。

Lighthouse是一个跨平台工具，可以在多个浏览器中使用，并且可以嵌入到持续集成系统中，以便在每次代码更改后进行自动化的性能测试。

四、Webpack Bundle AnalyzerWebpack Bundle Analyzer是一个用于可视化分析JavaScript捆绑包的工具。

它可以帮助开发人员了解捆绑包的组成和大小，并识别哪些模块或库占用了大量的空间。

FireBug使用方法

FireBug使用方法 Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript进行调试的工具很多，我比较喜欢使用的是Firebug。

Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。

本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。

由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！1、安装Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。

安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。

在打开的页面的search输入框中输入“firebug”。

等搜索结果出来后点击Firbug链接（图1-1红色圈住部分）进入Firebug的下载安装页面。

图1-1在页面中点击Install Now（图1-2）按钮。

图1-2在弹出窗口（图1-3）中等待3秒后单击“立即安装”按钮。

图1-3等待安装完成后会单击窗口（图1-4）中的“重启Firefox”按钮重新启动Firefox。

图1-4当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标（），这就表示Firebug已经安装好了。

灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。

而绿色（）则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。

而红色图标（）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。

2、开启或关闭Firebug单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口（图2-1）。

firebug 简单使用说明

Firebug 使用简要说明friebug 安装firefox 菜单中选择“附件组件”进入附件组件管理器页面搜索firebug 如果找不到请在页面最下面点击查看全部结果，打开另外一个附件组件页面选择firebug 后会出现“添加到Friefox”按钮，点击该按钮出现安装firebug组件的界面如下：五秒后，点击“安装”按钮；然后提示重启firefox ，重启后，就安装成功了。

安装成功后，就会在firefox 右上角有个firebug的按钮，如下图所示。

firebug 的使用打开firebug 工具点击firebug按钮，打开firebug 调试窗口，窗口显示在firefox 最下面如下图：通过firebug 可以抓包，捕获前后台交互的数据；通过查看数据是否正确，用来判断是前台问题还是后台问题。

看看控制台是否启用，如果没有其他会出现启用按钮，点击启用即可；启用后，webUI和后台所有交互数据都可以通过firebug捕获到。

以创建病毒过滤规则的过程举例如下：1、新建病毒过滤规则打开配置页面如下图：2、在病毒过滤配置页面填写相关配置项后，点击“确定”按钮创建规则。

如果只关系创建规则时所交互的数据，就可以在点击确定按钮前把firebug之前抓获的数据清除；点击firebug 控制台中的“清除”按钮就可以把之前的数据清楚。

创建成功后，在列表中可以正确显示。

同时firebug捕获到两条http请求如下图。

注意：只关系新建下发的数据，就需要把之前抓获的数据清除，点击控制台中的“清除”按钮，清除之前所有的数据。

查看交互数据点开第一条http请求前面的加号”+”查看http请求的详细数据。

详细信息包括：参数、头信息、post、响应、HTML、JSON；展开后如下图：参数、post 和响应是咱们最关心的数据；其中参数和post 是前台发给后台的数据；响应是后台返回前台的数据。

默认显示的为响应的数据信息；响应数据为：{success:true, msg:"OK"}；响应数据的格式为：{success:true, msg:"XXXXXXXX"}；XXXXXX，如果操作成功返回“OK”，错误返回错误信息。

Firebug使用手册

Console
b.运行结果显示如下
a.输入并运行如下命令
d.运行结果显示如下
c.在编辑区输入并运行如下命令
Console
console.trace() 打印执行当前语句时的堆栈信息
Console
console.time(“flag”) console.timeEnd(“flag”) 计算两个函数调用其间代码执行的时间
3.注意这里的变化
HTML查看器
可直接在此编辑
1.选择 CSS
CSS查看器
2.点击鼠标右键
3.可进行编辑
4.语法提示：输入一个字母后，系统将提示可以匹配的选项，如图中输入f，系统提示float，在提示的过程中通过使用向上向下方向键可以选择其它匹配选项
Script 查看器 1.选择Script
图2
Console
3.点击此处可查看详细的错误信息, 点击后结gging的使用 Firebug提供了强大的Logging函数供我们在代码中使用，使用这些函数我们就不用再一次次去点击那些alert出来的讨厌而信息不足的对话框了。如： console.log(“message”); console(“message”); console.warn(“message”); console.error(“message”);
Console
console.dir(object) 用来显示object对象的所有属性 console.dirxml(element) 用来显示xml文档
HTML查看器
3.所选择的区域对应的背景色发生了变化 1.选择 HTML 2.鼠标放到这里
HTML查看器
2.鼠标放到这里 1.选择 Inspect

Firebug控制台详解

控制台（Console）是Firebug的第一个面板，也是最重要的面板，主要作用是显示网页加载过程中产生各类信息。

一、显示信息的命令Firebug内置一个console对象，提供5种方法，用来显示信息。

最简单的方法是console.log()，可以用来取代alert()或document.write()。

比如，在网页脚本中使用console.log("Hello World")，加载时控制台就会自动显示如下内容。

另外，根据信息的不同性质，console对象还有4种显示信息的方法，分别是一般信息()、除错信息console.debug()、警告提示console.warn()、错误提示console.error()。

比如，在网页脚本中插入下面四行：("这是info");console.debug("这是debug");console.warn("这是warn");console.error("这是error");加载时，控制台会显示如下内容。

可以看到，不同性质的信息前面有不同的图标，并且每条信息后面都有超级链接，点击后跳转到网页源码的相应行。

二、占位符console对象的上面5种方法，都可以使用printf风格的占位符。

不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种。

比如，console.log("%d年%d月%d日",2011,3,26);console.log("圆周率是%f",3.1415926);%o占位符，可以用来查看一个对象内部情况。

比如，有这样一个对象：var dog = {} ; = "大毛" ;dog.color = "黄色";然后，对它使用o%占位符。

Firebug工具介绍和使用

Firebug工具在我实习的单位里需要不断测试前端开发出来的界面兼容性问题，以便用户体验更好。

为了更好地解决这个问题，我们公司采用了firebug进行监测前端开发出来的界面显示是否有问题。

Firebug是firefox下的一个插件,能够调试所有网站语言。

它集HTML查看和编辑javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。

Firebug从各个角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。

一、Firebug的安装首先安装Firefox浏览器。

打开浏览器，选择“工具”菜单 -“附加软件”- “获取扩展”。

在打开的页面search输入框中输入“firebug”，在点击Firbug 链接进入Firebug的下载安装页面。

当Firefox重启完后可以在状态栏最右边发现一个灰色圆形图标，表示Firebug已经安装好。

灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。

绿色则已开启对当前网站进行编辑、调试和监测的功能。

红色图标表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误。

二、Firebug的界面三、Firebug的功能列表Console 控制台显示当前页面中的javascript错误以及警告，并提示出错的文件和行号；看到每一个XML的HttpRequests请求post出去的参数、URL、http头以及请求到的内容，运作的程序；查看脚本的log，还可以定制彩色输出和格式。

HTML查看器可以显示清晰层次的HTML代码以及每一个标签之间的从属并行关系；源代码上方还标出了DOM的层次，清楚地列出了一个hml元素的parent、child以及root元素；直接修改HTML源代码，并在浏览器中查看修改后的效果；鼠标在页面中直接选择一些区块，通过Inspect功能来查看相应的HTML源代码和CSS样式表。

Firefox Firebug使用文档

Firebug DocumentCOMMAND LINE API (3)$(id) (3)$$(selector) (3)$x(xpath) (3)dir(object) (3)dirxml(node) (3)cd(window) (3)clear() (3)inspect(object[, tabName]) (3)keys(object) (3)values(object) (3)debug(fn) (4)undebug(fn) (4)monitor(fn) (4)unmonitor(fn) (4)monitorEvents(object[, types]) (4)unmonitorEvents(object[, types]) (4)profile([title]) (4)profileEnd() (4)CONSOLE API (4)console.log(object[, object, ...]) (4)console.debug(object[, object, ...]) . (5)(object[, object, ...]) .. (5)console.warn(object[, object, ...]) (5)console.error(object[, object, ...]) (5)console.assert(expression[, object, ...]) .. (5)console.dir(object) (5)console.dirxml(node) (6)console.trace() (6)console.group(object[, object, ...]) .. (6)console.groupCollapsed(object[, object, ...]) . (6)console.groupEnd() (6)console.time(name) (6)console.timeEnd(name) (6)console.profile([title]) (6)console.profileEnd() (6)console.count([title]) (6)I MPLEMENTATION N OTES (7)Firebug 1.4 (7)Firebug 1.3 (7)Firebug 1.2 (7)Firebug 1.1 and earlier (7)KEYBOARD AND MOUSE SHORTCUTS (7)Global (7)HTML Tab (7)HTML Editor (8)HTML Inspect Mode (8)Script Tab (8)DOM Tab (8)DOM and Watch Editor (9)CSS Tab (9)CSS Editor (9)Layout Tab (9)Layout Editor (9)Command Line (small) (10)Command Line APIThe Firebug command line provides these special functions for your convenience:$(id)Returns a single element with the given id.$$(selector)Returns an array of elements that match the given CSS selector.$x(xpath)Returns an array of elements that match the given XPath expression.dir(object)Prints an interactive listing of all properties of the object. This looks identical to the view that you would see in the DOM tab.dirxml(node)Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.cd(window)By default, command line expressions are relative to the top-level window of the page. cd() allows you to use the window of a frame in the page instead.clear()Clears the console.inspect(object[, tabName])Inspects an object in the most suitable tab, or the tab identified by the optional argument tabName.The available tab names are "html", "css", "script", and "dom".keys(object)Returns an array containing the names of all properties of the object.values(object)Returns an array containing the values of all properties of the object.Adds a breakpoint on the first line of a function.undebug(fn)Removes the breakpoint on the first line of a function.monitor(fn)Turns on logging for all calls to a function.unmonitor(fn)Turns off logging for all calls to a function.monitorEvents(object[, types])Turns on logging for all events dispatched to an object. The optional argument types may specify a specific family of events to log. The most commonly used values for types are "mouse" and "key".The full list of available types includes "composition", "contextmenu", "drag", "focus", "form", "key", "load", "mouse", "mutation", "paint", "scroll", "text", "ui", and "xul".unmonitorEvents(object[, types])Turns off logging for all events dispatched to an object.profile([title])Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.profileEnd()Turns off the JavaScript profiler and prints its report.Console APIFirebug adds a global variable named "console" to all web pages loaded in Firefox. This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts.console.log(object[, object, ...])Writes a message to the console. You may pass as many arguments as you'd like, and they will be joined together in a space-delimited line.The first argument to log may be a string containing printf-like string substitution patterns.console.log("The %s jumped over %d tall buildings", animal, count);The example above can be re-written without string substitution to achieve the same result:console.log("The", animal, "jumped over", count, "tall buildings");These two techniques can be combined. If you use string substitution but provide more arguments than there are substitution patterns, the remaining arguments will be appended in a space-delimited line, like so:console.log("I am %s and I have:", myName, thing1, thing2, thing3);If objects are logged, they will be written not as static text, but as interactive hyperlinks that can be clicked to inspect the object in Firebug's HTML, CSS, Script, or DOM tabs. You may also use the %o pattern to substitute a hyperlink in a string.Here is the complete set of patterns that you may use for string substitution:String Substitution Patterns%s String%d, %i Integer (numeric formatting is not yet supported)%f Floating point number (numeric formatting is not yet supported)%o Object hyperlinkconsole.debug(object[, object, ...])Writes a message to the console, including a hyperlink to the line where it was called. (object[, object, ...])Writes a message to the console with the visual "info" icon and color coding and a hyperlink to the line where it was called.console.warn(object[, object, ...])Writes a message to the console with the visual "warning" icon and color coding and a hyperlink to the line where it was called.console.error(object[, object, ...])Writes a message to the console with the visual "error" icon and color coding and a hyperlink to the line where it was called.console.assert(expression[, object, ...])Tests that an expression is true. If not, it will write a message to the console and throw an exception.console.dir(object)Prints an interactive listing of all properties of the object. This looks identical to the viewthat you would see in the DOM tab.console.dirxml(node)Prints the XML source tree of an HTML or XML element. This looks identical to the view that you would see in the HTML tab. You can click on any node to inspect it in the HTML tab.console.trace()Prints an interactive stack trace of JavaScript execution at the point where it is called.The stack trace details the functions on the stack, as well as the values that were passed as arguments to each function. You can click each function to take you to its source in the Script tab, and click each argument value to inspect it in the DOM or HTML tabs.console.group(object[, object, ...])Writes a message to the console and opens a nested block to indent all future messages sent to the console. Call console.groupEnd() to close the block.console.groupCollapsed(object[, object, ...])Like console.group(), but the block is initially collapsed.console.groupEnd()Closes the most recently opened block created by a call to console.group()or console.groupEnd()console.time(name)Creates a new timer under the given name. Call console.timeEnd(name)with the same name to stop the timer and print the time elapsed..console.timeEnd(name)Stops a timer created by a call to console.time(name) and writes the time elapsed.console.profile([title])Turns on the JavaScript profiler. The optional argument title would contain the text to be printed in the header of the profile report.console.profileEnd()Turns off the JavaScript profiler and prints its report.console.count([title])Writes the number of times that the line of code where count was called was executed. The optional argument title will print a message in addition to the number of the count.Implementation NotesThe console is an object attached to the window object in the web page. In Firebug for Firefox the object is attached only if the Console panel is enabled. In Firebug lite, the console is attached if Lite is installed in the page.Firebug 1.4The console is implemented by adding a div element and a script tag to the web page just before the first Javascript script tag is run. So the first script tag is compiled, then the console is injected, then the outer function code of the script tag is executed.Firebug 1.3As in Firebug 1.4Firebug 1.2The code and tags are added on document load event.Firebug 1.1 and earlierThe console is implemented with an insecure techniqueKeyboard and Mouse ShortcutsGlobalOpen Firebug Panel F12Close Firebug Panel F12Open Firebug in Window Ctrl+F12Switch to Previous Tab Ctrl+`Focus Command Line Ctrl+Shift+LFocus Search Box Ctrl+Shift+KToggle Inspect Mode Ctrl+Shift+CToggle JavaScript Profiler Ctrl+Shift+PRe-Execute Last Command Line Ctrl+Shift+EHTML TabEdit Attribute Click on name or valueEdit Text Node Click on textEdit Element Double-Click tag nameNext Node in Path Ctrl+.Previous Node in Path Ctrl+,HTML EditorFinish Editing ReturnCancel Editing EscAdvance to Next Field TabAdvance to Previous Field Shift+TabHTML Inspect ModeCancel Inspection EscInspect Parent Ctrl+UpInspect Child Ctrl+DownScript TabContinue F8Ctrl+/Step Over F10Ctrl+'Step Into F11Ctrl+;Step Out Shift+F11Ctrl+Shift+;Toggle Breakpoint Click on line numberDisable Breakpoint Shift+Click on line number Edit Breakpoint Condition Right-Click on line number Run to Line Middle-Click on line numberCtrl+Click on line number Next Function on Stack Ctrl+.Previous Function on Stack Ctrl+,Focus Menu of Scripts Ctrl+SpaceFocus Watch Editor Ctrl+Shift+NDOM TabEdit Property Double-Click on empty spaceNext Object in Path Ctrl+.Previous Object in Path Ctrl+,DOM and Watch EditorFinish Editing ReturnCancel Editing EscAutocomplete Next Property TabAutocomplete Previous Property Shift+TabCSS TabEdit Property Click on propertyInsert New Property Double-Click on white-spaceFocus Menu of Style Sheets Ctrl+SpaceCSS EditorFinish Editing ReturnCancel Editing EscAdvance to Next Field TabAdvance to Previous Field Shift+TabIncrease Number by One UpDecrease Number by One DownIncrease Number by Ten Page UpDecrease Number by Ten Page DownAutocomplete Next Keyword UpAutocomplete Previous Keyword DownLayout TabEdit Value Click on valueLayout EditorFinish Editing ReturnCancel Editing EscAdvance to Next Field TabAdvance to Previous Field Shift+TabIncrease Number by One UpDecrease Number by One Down Increase Number by Ten Page Up Decrease Number by Ten Page DownCommand Line (small)Autocomplete Next Property Tab Autocomplete Previous Property Shift+Tab Execute Return Inspect Result Shift+ReturnOpen Result's Context Menu Ctrl+ReturnC ommand Line (large)Execute Ctrl+Return。

Fire Bug-使用指南

Firebug入门指南作者：Estelle Weyl原文网址：/blog/2007/06/introduction-to-firebug/译者：阮一峰本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。

不过，本文的内容对一个新手来说，应该是足够了。

目录一、安装Firebug二、打开和关闭Firebug三、Firebug 窗口概览四、随时编辑页面五、用Firebug处理CSS六、盒状模型七、评估下载速度八、DOM九、Javascript调试十、AJAX十一、附注一、安装FirebugFirebug在Firefox浏览器中运行。

另外有一个Firebug lite版本，可以通过javascript调用，包含在页面中，从而在其他非Firefox浏览器中使用。

本文不涉及这个版本。

安装Firebug，请访问Firebug下载页面。

点击该页面右边栏中部巨大的橙黄色按钮即可。

你也可以在Mozilla的FireFox Add-ons站点下载它。

安装后只要重新启动FireFox，就可以使用了。

如果你已经安装过了，那么请检查是否更新到了最新版本。

打开Firefox的“Tools”菜单，选择“Add-ons”命令，然后在弹出窗口中点击左下角的“Find Updates”按钮。

二、打开和关闭Firebug在Firebug网站上，可以找到它的快捷键设置。

我最常使用以下三种方法：* 打开Firebug：按F12，或者点击浏览器状态栏右边的绿色标志。

* 关闭Firebug：按F12，或者点击浏览器状态栏右边的绿色标志，或者点击Firebug窗口右上角的红色关闭标志。

* 在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，或者使用Ctrl+F12/⌘+F12按钮。

Firebug的相关设置：* 固定Firebug在新窗口打开：先打开firebug，点击左上角的bug标志，选择options菜单中的“Always Open in New Window”设置。

Firebug的使用

Firebug的使用火狐浏览器是一个开放源码的浏览器，具有许多强大的功能。

其中最有用的功能之一就是Firebug调试器。

Firebug是一个免费的调试器，专为web开发人员而设计，可以帮助开发人员优化代码和网站的功能。

本文主要介绍Firebug的使用，包括Firebug分析器、控制台、网页元素和网络分析。

1. Firebug分析器Firebug分析器是一个很好的工具，可以用来追踪和分析网页的性能。

它可以告诉你每个脚本或样式表的下载时间、执行时间、内存使用情况等等。

它还提供了一个“Profile”(档案)的功能，可以帮助你找到导致性能问题的脚本代码或样式。

要使用分析器，首先打开你的网页，然后单击Firebug图标，选择“分析器”选项卡。

在选项卡下面的下拉菜单中，你可以选择测量每个网站资源的加载时间。

2.控制台Firebug的控制台是一个非常有用的工具，可以帮助你进行调试和解决问题。

控制台中有一个命令行窗口，可以允许你直接在网页上执行JavaScript代码，并在实时监控网页上的执行情况。

要使用控制台，首先打开你的网页，然后单击Firebug图标，选择“控制台”选项卡。

你可以在命令行窗口中输入JavaScript代码，然后按回车键执行它。

控制台中还有一个“控制台日志”，可以显示网页中的错误和信息。

3.网页元素Firebug还提供了一个网页元素面板，可以用来调试和修改网页中的元素。

它可以帮助你弄清楚一个网页是如何构建的，并查看一个元素的CSS样式和属性。

你可以使用这个面板来修改元素的CSS样式，或添加新的CSS规则。

要使用元素面板，首先打开你的网页，然后单击Firebug图标，选择“网页元素”选项卡。

你可以在面板中查看网页中的元素，并查看它们的属性和CSS样式。

你可以右键单击一个元素，在弹出菜单中选择“编辑HTML”，可以编辑网页中的HTML代码。

4.网络分析Firebug的网络分析面板可以帮助你监视和分析网页的请求和响应。