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 说明字符串整数浮点数对象占位符只能在的第一个参数中使用。
当第一个参数中包含占位符时，程序会根据占位符的数量，取从第二个参数开始的足够数量的参数替换到对应的占位符所在的位置，剩下的其他参数，则按照默认行为被连接到输出信息的末尾。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Javascript的调试，是开发Web应用尤其是AJAX应用很重要的一环，目前对Javascript 进行调试的工具很多，我比较喜欢使用的是Firebug。
Firebug是Joe Hewitt开发的一套与Firefox集成在一起的功能强大的web开发工具，可以实时编辑、调试和监测任何页面的CSS、HTML和JavaScript。
本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。
由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！<!--[if !supportLists]-->1、<!--[endif]-->安装Firebug是与Firefox集成的，所以我们首先要安装的事Firefox浏览器。
安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。
在打开的页面的search输入框中输入“firebug”。
等搜索结果出来后点击Firbug链接（图1-1红色圈住部分）进入Firebug的下载安装页面。
<!--[if !vml]--><!--[endif]-->图1-1在页面中点击Install Now（图1-2）按钮。
<!--[if !vml]--><!--[endif]-->图1-2在弹出窗口（图1-3）中等待3秒后单击“立即安装”按钮。
<!--[if !vml]--><!--[endif]-->图1-3等待安装完成后会单击窗口（图1-4）中的“重启Firefox”按钮重新启动Firefox。
<!--[if !vml]--><!--[endif]-->图1-4当Firefox重启完后我们可以在状态栏最右边发现一个灰色圆形图标（<!--[if !vml]--><!--[endif]-->），这就表示Firebug已经安装好了。
灰色图标表示Firebug未开启对当前网站的编辑、调试和监测功能。
而绿色（<!--[if !vml]--><!--[endif]-->）则表示Firebug已开启对当前网站进行编辑、调试和监测的功能。
而红色图标（<!--[if !vml]--><!--[endif]-->）表示已开启对当前网站进行编辑、调试和监测的功能，而且检查到当前页面有错误，当前图标表示有5个错误。
<!--[if !supportLists]-->2、<!--[endif]-->开启或关闭Firebug单击Firebug的图标或者按F12键你会发现页面窗口被分成了两部分，上半部分是浏览的页面，下半部分则是Firebug的控制窗口（图2-1）。
如果你不喜欢这样，可以按CTRL+F12或在前面操作后单击右上角的上箭头按钮，弹出一个新窗口作为Firebug的控制窗口。
<!--[if !vml]--><!--[endif]-->图2-1从图2-1中我们可以看到，因为我们开启Firebug的编辑、调试和监测功能，所以目前只有两个可以选择的链接：“Enable Firebug”与“Enable Firebug for this web site”。
如果你想对所有的网站进行编辑、调试和检测，你可以点击“Enable Firebug”开启Firebug，则以后无论浏览任何网站，Firebug都处于活动状态，随时可以进行编辑、调试和检测。
不过一般的习惯我们只是对自己开发的网站进行编辑、调试和检测，所以我们只单击“Enable Firebug for this web site”开启Firebug就行了。
开启Firebug窗口（图2-2）后，我们可以看到窗口主要有两个区域，一个是功能区，一个是信息区。
选择功能区第二行的不同标签，信息区的显示会有不同，Options的选项也会不同，搜索框的搜索方式也会不同。
<!--[if !vml]--><!--[endif]-->图2-2要关闭Firebug控制窗口单击功能区最右边的关闭图标或按F12键就行了。
如果要关闭Firebug的编辑、调试和监测功能，则需要单击功能区最左边的臭虫图标，打开主菜单，选择“Disable Firebug”或“Disable Firebug for xxxxx”。
<!--[if !supportLists]-->3、<!--[endif]-->Firebug主菜单单击功能区最左边的臭虫图标可打开主菜单（图3-1），其主要功能描述请看表1。
<!--[if !vml]--><!--[endif]-->图3-1菜单选项说明Disable Firebug 关闭/开启Firebug对所有网页的编辑、调试和检测功能Disable Firebug for xxxxx关闭/开启Firebug对xxxxx网站的编辑、调试和检测功能Allowed Sites设置允许编辑、调试和检测的网站Text Size：Increase text size增大信息区域显示文本的字号Text Size：Decrease text size减少信息区域显示文本的字号Text Size：Normal text size信息区域以正常字体显示Options：Always Open in New设置Firebug控制窗口永远在新窗口打开WindowShow Preview tooltips设置是否显示预览提示。
Shade Box Model当前查看状态为HTML，鼠标在HTMLelement标签上移动时，页面会相应在当前标签显示位置显示一个边框表示该标签范围。
这个选项的作用是设置是否用不同颜色背景表示标签范围。
Firebug Website..打开Firebug主页。
Documentation..打开Firebug文档页。
Discussion Group打开Firebug讨论组。
Contribute打开捐助Firebug 页面。
表1<!--[if !supportLists]-->4、<!--[endif]-->控制台（Console）单击功能区第二栏的“Console”标签可切换到控制台（图4-1）。
控制台的作用是显示各种错误信息（可在Options里定义），显示脚本代码中内嵌的控制台调试信息，通过命令行对脚本进行调试，通过单击Profile对脚本进行性能测试。
控制台分两个区域，一个是信息区，一个是命令行，通过Options菜单的“Larger Command Line”可改变命令行位置。
<!--[if !vml]--><!--[endif]-->图4-1Options菜单的选项请看表2。
菜单选项说明Show JavaScript Errors 显示脚本错误。
Show JavaScript显示脚本警告。
WarningsShow CSS Errors显示CSS错误。
Show XML Errors显示XML错误。
Show XMLHttpRequests显示XMLHttpRequests。
Larger Command Line将命令行显示从控制窗口底部移动右边，扩大输入区域。
表2单击“Clear”按钮可清除控制台的控制信息。
<!--[if !supportLists]-->5、<!--[endif]-->页面源代码查看功能单击功能区第二栏的“HTML”标签可切换到源代码查看功能（图5-1）。
虽然Firefox 也提供了查看页面源代码的功能，但它显示的只是页面文件本身的源代码，通过脚本输出的HTML源码是看不到。
而Firebug则是所见即所得，是最终的源代码。
<!--[if !vml]--><!--[endif]-->图5-1我们来看一个例子，文件源代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""/TR/html4/strict.dtd"><html><head><title>简单的例子</title><meta http-equiv="content-type" content="text/html;charset=utf-8"><style>#div1{background:red;width:100px;height:100px;}#div2{background:blue;width:100px;height:100px;margin:10px;padding:10 px;border:5px solid black;color:white;}#div3{background:yellow;width:50px;height:50px;margin-left:25px;}</style></head><body scroll="no"><div id="div1">方块一</div><div id="div2">方块二</div><script>document.getElementById('div1').innerHTML+='<div id="div3">方块三</div>';</script></body></html>在例子中我们通过JavaScript在“div1”中加入了“div3”，在Firefox中查看源代码你是看不到“div1”中包含有代码“<div id="div3">方块三</div>”的，但是Firebug中我们是可以看见的（图5-2选中部分）。
<!--[if !vml]--><!--[endif]-->图5-2从图5-1中我们可以看到，信息区被分成了两个部分，左边是显示源代码，右边是一个功能区，可以从这里查看到HTML Element中的CSS定义、布局情况和DOM结构。