Firebug入门指南

上一篇：地球，这个黯淡的蓝点

下一篇：希拉里的退选演说分类：IT技术

阮一峰的网络日志? 首页 ? 档案

Fireb g入 指南

作者：阮一峰

日期：2008年6月8日

据说，对于网页开发人员来说，Firebug是Firefox浏览器中最好的插件之一。

我最近就在学习怎么使用Firebug，网上找到一篇针对初学者的教程，感觉比较有用，就翻译了出来。

=================

Fi eb g入门指南

作者：Estelle Weyl

原文网址：https://www.wendangku.net/doc/966917428.html,/blog/2007/06/introduction-to-firebug/

译者：阮一峰

本文是Firebug的一个概览，并不对它的所有特性进行详尽解释。不过，本文的内容对一个新手来说，应该是足够了。

目录

一、安装Firebug

二、打开和关闭Firebug

三、Firebug窗口概览

四、随时编辑页面

五、用Firebug处理CSS

六、盒状模型

七、评估下载速度

八、DOM

九、Javascript调试

十、AJAX

十一、附注

一、安装Fi eb g

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

安装Firebug，请访问Firebug下载页面。点击该页面右边栏中部巨大的橙黄色按钮即可。你也可以在Mozilla的FireFox Add-ons站点下载它。安装后只要重新启动FireFox，就可以使用了。

如果你已经安装过了，那么请检查是否更新到了最新版本。打开Firefox的 Tools 菜单，选择 Add-ons 命令，然后在弹出窗口中点击左下角的 Find Updates 按钮。

二、打开和关闭Fi eb g

在Firebug网站上，可以找到它的快捷键设置。我最常使用以下三种方法：* 打开Firebug：按F12，或者点击浏览器状态栏右边的绿色标志。

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

击Firebug窗口右上角的红色关闭标志。

* 在单独窗口中打开Firebug：点击firebug窗口右上角的红色箭头标识，

或者使用Ctrl+F12/ +F12按钮。

Firebug的相关设置：

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

* 增加/缩小字体大小：先打开firebug，点击左上角的bug标志，选择 Text Size 命令。每次字体变化的幅度非常小，你可能需要使用多次。

* 限制只对某些站点使用Firebug：先右击浏览器状态上的green check

mark标志，选择 disable Firebug 命令。然后，再右击这个已经变灰的标

志，选择 Allowed Sites... 命令，增加允许Firebug生效的域名。

三、Fi eb g窗口概览

* Console标签：主要使用javascript命令行操作，显示javascript错误信息，在底部的>>>提示符后，你可以自己键入javascript命令。

* HTML标签：显示HTML源码，并且像DOM等级结构那样，每行之前有

缩进。你可以选择显示或不显示某个子节点。

* CSS标签：浏览所有已经装入的样式表，可以当场对其修改。在Firebug窗口上部， edit 命令的旁边，有一个本页面中所有样式表的下拉列表，你可

以选择一个样式表进行浏览。

* Script标签：显示javascript文件及其所在页面。在Firebug窗口上

部， inspect 命令的旁边，有一个本页面中所有Javascript文件的下拉列

表，你可以选择一个进行浏览。你可以在javascript命令中，设置断点

（breakpoint）及其出现的条件。

* DOM标签：显示所有的页面对象和window物体的属性。因为在

javascript中，所有变量都是window物体的属性，所以Firebug会显示所有变

量和它们的值。

* Net标签：显示本页面涉及的所有下载，以及它们各自花费的时间，各自

的HTTP请求头信息和服务器响应的头信息。XHR标签对AJAX调试很有

用。

四、随时编辑 面

在HTML标签中，点击窗口上方的 inspect 命令，然后再选择页面中的文本节点，你可以对其进行修改，修改结果会马上反应在页面中。

Firebug同时是源码浏览器和编辑器。所有HTML、CSS和Javascript文件中的对象，都可以用单击或双击进行编辑。当你输入完毕，浏览器中的页面立刻会发生相应变化，你可以得到瞬时反馈。DOM浏览器允许你对文档结构进行彻底的编辑，不局限于文本节点。在HTML标签中，点击窗口上部 inspect 命令旁边的 edit 命令，下方的窗口就会立刻变成一个黑白的文本编辑窗口，你可以对HTML源代码进行任意编辑。在CSS标签中，Firebug会自动补全你的输入。在DOM标签中，当你按Tab键时，Firebug会自动补全属性名。

五、用Fi eb g处理CSS

在DOM标签中，每个HTML元素的style属性揭示了该元素的所有CSS设置。你可以双击对这些设置进行编辑。

对于那些Firefox不支持的CSS规则，Firebug会自动隐藏。比如，Firebug会隐藏针对某些浏览器的CSS特定设置，以及一些它不支持的CSS3规则。所以，它会隐藏

_height:25px;（下划线是一个针对IE6的设置）和p:first-of-type {color: #ff0000;} (:first-of-type是一个CSS3规定的伪类，目前只有Safari 3支持）。但是，这也意味着，如果你恰巧发生了打字错误，导致某些规则无法显示，那么你只有使用其他编辑器显示全部CSS内容，找到你的错误。

Firebug允许你关闭CSS中的某些语句，页面会立刻反映相应变化，你可以立刻查看效果。 关闭 一条语句的方法是，在该语句的左边点击，会出现一个红色的禁止标志。

该语句就会变灰。再次点击，该语句就会恢复。

Firebug允许你编辑CSS的属性和属性值。你只要对它们点击，就能编辑。修改后的效果会立刻在浏览器窗口中显示出来。这个特性最好的运用，是在确定准确定位的padding和margin时，firebug允许你用方向键逐单位的增加。

Firebug允许你增加新的属性和属性值。增加方法是双击现有的selector，然后就会出现一个空白的属性名输入框，完成输入后则会出现一个空白的属性值。

六、盒状模型

当你在HTML标签中，点击一个元素时，左面窗口显示HTML代码，右面窗口显示该元素的CSS。在CSS窗口上方，有一个layout按钮，点击后会展示与该元素相关的方块模型，包括padding、margin和border的值。要查看每一个元素的这三项值，只需点

击 inspect 按钮，然后用 标悬停在页面中该元素的上方。

七、评估下载速度

Net标签中图形化了页面中所有http请求所用的时间。使用这个功能，必须打开Network monitoring，默认设置就是打开，但是你可以在 options 下拉菜单中关闭这个选项。你可以用这项功能评估javascript文件下载，占用整个页面显示的时间。

在每个HTTP请求的左面点击，会显示该次请求的头信息。

在1.0.5版以后，你可以单独查看HTML文件、CSS文件、图像文件等各自下载的时间。

八、DOM

DOM标签提供页面上所有物体的所有属性的信息。Firebug最酷的功能之一是，它可以动态修改页面，反映在浏览器窗口，但是如果使用浏览器自带的查看源码功能，你会发现源码并没有改变。

九、Ja a c ip 调试

JavaScript profiler可以报告你的Javascript函数执行所花的时间，因此你可以查看不同函数对速度的影响。使用这个功能的方法是，打开console标签，然后点击上面的Profile按钮（上部的按钮顺序是 Inspect |Clear | Profile ）。Firebug列出调用的所有函数，及其所花的时间。你可以针对要测试的某个函数，在其前部加上

console.profile([title])，在其后部加上console.profileEnd()。

console标签的底部是命令行输入，它以 >>> 开头。如果命令行输入有结果输出，那么它会展示在上部的窗口。有一个详细的命令行输入API值得看一下。Firebug内置console对象有几种有用的方法可供调用，包括console.debug、https://www.wendangku.net/doc/966917428.html,、

console.warning、console.error等。如果这些方法产生了输出结果，Firebug会提供一个链接，让你查看相应的代码。

调试的另一个方法是设置断点。Script标签允许你在任意行暂停执行。单击行号，就会设置一个断点。右击行号，就可以设置一个断点出现的条件，只有当条件为真时，程序才会暂停执行。右面还有一个watch窗口，可以查看当前变量的值。

十、AJAX

前面已经提到，Firebug可以捕捉页面的动态内容和其他DOM变化。如果你打开这

个示例文件，点击页面上的链接后，在浏览器中查看源码，你会发现什么也没有改变，源码中依然包含那个链接。但是，如果你在Firebug中查看源码，你会发现DOM 已经发生了变化， Hello World 已经被包括在内了。这就是Firebug的核心功能之一，没有它，AJAX的请求和回应就是不可见的。有了它，你可以看到送出的和收到的文本，已经相应的头信息。在Net标签中，你还能监控每个请求/回应各自所花费的时间。

Net标签中的XHR功能，对查看AJAX操作特别有用。如果你点击每个服务器端回应前的加号，你就会看到服务器端回应的头信息和内容。

当通过XMLHttpRequest对象向服务器端发出一个请求时，Firebug会记录请求的POST或GET内容，以及回应的头信息和内容。使用Net标签中的XHR功能，就可以看到这些内容。它会列出所有服务器的回应，以及所花费的时间。点击前面的+号，如果是GET请求，会显示三个标签；如果是POST请求，会显示4个标签：

Params: 显示请求URL中所包含的name/value对。

Headers: 显示请求和回应的头信息。

Response: 显示实际从服务器收到的信息。

Post：显示从通过POST请求，送到服务器的信息。（此项GET请求不包

括。）

这四个标签对编写和调试程序很有用。检查POST和Params标签，确定你的请求被正确地发出了。检查Response标签查看返回的格式，确定相应的Javascript处理函数应该如何编写。

十一、附注

* Firebug 1.05 及以前版本，与Firefox 3.0不兼容。

* Firebug的作者Joe Hewitt免费提供了这个软件，为了显示我们对他的爱，

你可以考虑对他进行捐助。

* Firebug的一些高级应用，请看Joe Hewitt的这段演示视频。

（完）

文档信息

版权声明：自由转载-非商用-非衍生-保持署名| Creative Commons BY-

NC-ND 3.0

原文网

址：https://www.wendangku.net/doc/966917428.html,/blog/2008/06/firebug_tutorial.html

最后修改时间：2012年6月14日14:27

付费支持： |

相关文章

2012.06.11: 互联网协议入门（二）

上一篇文章分析了互联网的总体构思，从下至上，每一层协议的设计思想。

2012.05.31: 互联网协议入门（一）

我们每天使用互联网，你是否想过，它是如何实现的？

功能链接

前一篇：地球，这个黯淡的蓝点

后一篇：希拉里的退选演说

更多内容请访问：首页 ? 档案 ? IT技术

站内搜索：网页开发G ！

Feed订阅：

广告（购买广告位）

留言（1 条）

崔 峰说：

突然不知道一峰哥是干什么的。

2008年6月8日17:32 | 档案 | 引用ooooofred说：

什么都干...

2008年6月8日19:26 | 档案 | 引用cch说：

GoogleReader里面浏览这篇文章显示乱码....

2008年6月9日07:37 | 档案 | 引用jason说：

* Firebug的一些高级应用，请看Joe Hewitt的这段演示视频。

点过去发现：

Sorry, this video is no longer available.

2008年6月9日23:07 | 档案 | 引用Ruan YiFeng 说：

引用j a s o n的发 ：

* Firebug的一些高级应用，请看Joe Hewitt的这段演示视频。

点过去发现：

Sorry, this video is no longer available.

谢谢指出，已经改正，可以打开了。

2008年6月10日09:43 | 档案 | 引用学习笔记说：

firebug也写个使用说明啊，强，firebug现在有1.2版了，不过还是测试版，具体的可以看看这里：

https://www.wendangku.net/doc/966917428.html,/lwk%5Fyy/blog/item/5e346259f7a42a2e2834f0c9.html

firebug是个开源项目，如果你关注firebug可以到这里来看最新的情况

https://www.wendangku.net/doc/966917428.html,/group/firebug

2008年6月10日22:27 | 档案 | 引用

中元说：

可不可以问下，过几天要买个macbook pro有没有什么建议。

不好意思，看了这么久的博客，第一次回复,还问了这样一个问题.

2008年6月11日20:45 | 档案 | 引用

Robin说：

希望有后续的firebug高级应用，谢谢

2008年6月12日21:41 | 档案 | 引用

天空说：

哇，真的很谢谢哦，找的好辛苦！

2008年6月13日00:16 | 档案 | 引用

杜贵彬说：

好东西.

谢谢您!

2008年6月26日22:29 | 档案 | 引用

c说：

捐助页面点过去看不明白。是英文，而且好像不是捐助页面。

2008年7月23日10:16 | 档案 | 引用

dc说：

有没有清晰版的演示视频？

2009年2月6日15:40 | 档案 | 引用

uting_lv说：

引用d c的发 ：

有没有清晰版的演示视频？

这些有点用吧？

h t t p://w w w. o u t u b e.c o m/r e s u l t s?s e a r c h_t p e=s e a r c h_v i d e o s&s e a r c h_q u e r =f i r e b u g+t u t o r i a l 博主翻译得真好，谢谢了，我先看了这篇英文版，不是太明白。

2009年2月25日16:44 | 档案 | 引用

的说：

楼主，我安装了后，不知道怎么打开啊，按F12也没用啊，那个打开图标也没有啊。

能不能帮我解决下啊，我的邮箱是azrael6619@https://www.wendangku.net/doc/966917428.html,

2009年7月9日12:43 | 档案 | 引用

Angine 说：

好东东感谢楼主！

2010年4月13日14:10 | 档案 | 引用

sniffer 说：

楼主我喜欢你的博客够清晰没有花花绿绿的结构看起来也很清爽

2010年4月15日13:49 | 档案 | 引用

tro 说：

从百度搜索过来的，很有用，立马就用上了！

2012年1月31日10:06 | 档案 | 引用

我是小王王说：

非常好，开始学习，下载firebug，

2012年3月23日09:15 | 档案 | 引用

六翼说：

命令行API的新链接：

https://www.wendangku.net/doc/966917428.html,/wiki/index.php/Command_Line_API

2012年6月14日14:27 | 档案 | 引用

我要发表看法

您的留言（HTML标签部分可用）

您的大名：

?-必填

电子邮件：

?-必填，不公开

个人网址：

?-我信任你，不会填写广告链接

记住个人信息？

发表?- 点击按钮

联系方式 | https://www.wendangku.net/doc/966917428.html, 2003 - 2012

Firebug+Firefox调试方法

在火狐中困扰我大半天的js问题.找到这个. 半小时就搞定了.. .下面是原帖内容. 什么是Firebug 从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript 给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。 Firebug是Firefox下的一款开发类插件，现属于Firefox 的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，这不能不说是种巧合。 应用 Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。 在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。 图1：Firebug插件展开图示 从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。 Console 控制台 控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。

图形组态设计系统使用说明书样本

组态软件设计系统说明 一、配置运行环境 1.1安装tomcat服务器及axis插件 首先需要安装Tomcat服务器(作为web容器, 主要是解析和运行jsp), 在安装Tomcat之前, 先要确定主机上是否有java环境, 如果没有则应该先安装jdk( 这个能够直接在网上下载到) , 根据安装提示安装完Tomcat之后, 要确认是否安装成功, 即启动Tomcat, 然后在网页地址栏输入http://localhost:8080( 注意这里的8080是在安装过程中所选择的端口号)如果出现Tomcat主页, 则说明安装成功。在网上下载个axis插件axis.war 文件, 放在Tomcat安装路径的webapps子文件下, 重启Tomcat, 同时将服务文件iPowerGraph.aar文件复制到webapps/axis2/WEB-INF/services下。将整个工程iPowerGraph文件拷到webapps子文件下。 新建一个环境变量, 变量名: CATALINA_HOME 变量值: D:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps( 即电脑上安装Tomcat的路径) 改完环境变量后重启电脑, 将iPowerGraph文件拷到Tomcat安装路径下的webapps子文件下, 同时将服务文件iPowerGraph.aar文件复制到webapps/axis2/WEB-INF/services下, 重启Tomcat即可。 1.2安装火狐浏览器( 4.0以下版本) 由于当前各种浏览器对svg矢量图的各种属性支持程度不一致, 在综合考虑之后, 最终选择火狐浏览器作为运行平台。当前实际应用的版本是火狐

FireBug调试

J a v a s c r i p t的调试利器：F i r e b u g使用详 解 收藏 J a v a s c r i p t的调试，是开发W e b应用尤其是A J A X应用很重要的一环，目前对 J a v a s c r i p t进行调试的工具很多，我比较喜欢使用的是F i r e b u g。F i r e b u g是J o e H e w i t t开发的一套与F i r e f o x集成在一起的功能强大的w e b开发工具，可以实时编辑、调试和监测任何页面的C S S、H T M L和J a v a S c r i p t。 本文主要是为初学者介绍一下F i r e b u g的基本功能与如何使用F i r e b u g。由于本人水平与能力有限，在文章中的可能会有很多错误与遗漏，希望大家能谅解和指正！ 1、安装 F i r e b u g是与F i r e f o x集成的，所以我们首先要安装的事F i r e f o x浏览器。安装好浏览器后，打开浏览器，选择菜单栏上的“工具”菜单，选择“附加软件”，在弹出窗口中点击右下角的“获取扩展”链接。在打开的页面的s e a r c h输入框中输入“f i r e b u g”。等搜索结果出来后点击F i r b u g链接（图1-1红色圈住部分）进入F i r e b u g的下载安装页面。 图1-1 在页面中点击I n s t a l l N o w（图1-2）按钮。 图1-2 在弹出窗口（图1-3）中等待3秒后单击“立即安装”按钮。

等待安装完成后会单击窗口（图1-4）中的“重启 F i r e f o x”按钮重新启动F i r e f o x。 图1-4

如何使用firebug进行调试

如何使用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”节点，按下“编辑”，即可输出页面上源文件的代码以及动态生成的代码。 [查看所有动态生成源代码]

网站文章发布指南

网站文章发布指南 (一)标题 1.尽可能更换标题内容； 2.系列文章可以更换系列主题（如：高尔夫球杆迷思->球具解惑）； 3.长短适中，最好刚好在首页上显示完整； 4.注意在标题中增加关键词； (二)文字 1.先复制到记事本中去除所有格式，然后使用word中（也可直接选择性复制到word 中）； 2.在word中进行繁简转换，并使用全角符号替换半角符号（替换.为。时候应注意）； 3.然后再复制到记事本中再次去除word格式，最后复制到编辑器中； 4.在编辑器里使用回车进行分段，每段前空两个全角空格； 5.小标题之前也空两格，并加粗（不包含空格，但包含之后的冒号）； 6.去掉段落前的“-”符号及其他无用符号； 7.文字使用默认对齐，不是点击编辑框的左对齐，若是操作错误（如点成居中），可 以到源代码中删除对应样式代码； (三)配图 1.所有文章必须配图，至少一张，长文章可以使用多张配图； 2.如原文中有无水印图可以直接使用； 3.原文中没有可以使用的图片，使用百度或者谷歌图片搜索相关关键词，尽量找前几 页的图片； 4.图片长宽建议值为500px（使用画图缩放后保存），如果特殊图片样式可酌情处理； 5.图片必须下载到本地，然后通过编辑器上传到空间中； 6.在保证图片大小及显示效果的同时，尽量使用JPEG格式的图片（扩展名.jpg）； 7.图片名称尽量长一些，特殊一些，避免与原有上传的图片冲突，无好想法的时候可 以使用日期+主题命名（如：20110915_callaway.jpg）； 8.图片嵌入位置一般为最开始或者第一段至第三段中间，多张图片可按照章节配图 （一般在小标题前）； 9.文章配图均为单独一段，居中对齐； 10.图片上传后必须填写图片说明（Alt值），图片说明内容一般为正常图片说明文字或 者文章标题，也可以用关键词（如人名、比赛名、球杆名）； 11.部分图片可以在图片下居中放置减短文字说明； 12.图片上传错误的情况，务必到FTP上删除上传错误的图片； 13.如有印象的图片重复使用，务必使用原来上传的图片，不要重复上传； (四)表格 1.可以直接复制来源中表格的HTML源代码； 2.注意去除无用的空格、无用换行、外链样式（class=”XXX”），保留直接写入的style 样式； 3.检查表格宽度，不能超过690px； 4.表格代码直接插入编辑器HTML代码编辑中，前后不加 ； (五)引用

Fiddler的基本介绍及使用(个人整理)

Fiddler工具的介绍及使用 一、Fiddler的基本介绍 Fiddler官方网站提供了大量的帮助文档和视频教程，这是学习Fiddler的最好资料。 Fiddler是最强大最好用的Web调试工具之一，它能记录所有客户端和服务器的http和https请求，允许你监视，设置断点，甚至修改输入输出数据。 Fiddler无论对开发人员或者测试人员来说，都是非常有用的工具。 Fiddler是一个http协议调试代理工具，它能够记录并检查所有你的电脑和互联网之间的http通讯，设置断点，查看所有的“进出”Fiddler的数据（指cookie,html,js,css等文件，这些都可以让你胡乱修改的意思）。Fiddler 要比其他的网络调试器要更加简单，因为它不仅仅暴露http通讯还提供了一个用户友好的格式。 二、Fiddler的工作原理 Fiddler 是以代理web服务器的形式工作的，它使用代理地址:127.0.0.1，端口:8888。当Fiddler 退出的时候它会自动注销，这样就不会影响别的程序。不过如果Fiddler非正常退出，这时候因为Fiddler 没有自动注销，会造成网页无法访问。解决的办法是重新启动下Fiddler。 三、同类的其它工具 同类的工具有: httpwatch, firebug, wireshark

四、Fiddler 开启原理 左下角的capturing显示，表示开，不显示表示关，也可以用F12进行开关，或者File菜单下Capture Traffic 被勾选，勾选后fiddler才能监控浏览器的一举一动。 代理开关为开：可以抓到包，代理开关为关：抓不到包 浏览器的代理设置默认是关着的，工具--Internet选项--连接--局域网设置--代理服务器 Fiddler在操作时，通过修改注册表的方式，将系统的一些VRnet的代理模式全部给修改掉，改到Tools--Telerik Fiddler Options--Connections自己的代理端口上，默认端口为8888。 如果修改端口，需重启软件件才会生效，就是每次重新开启软件，它会根据你填写的端口打开一个自己的的代理，此时在通过代理开关，比如IE或者系统软件。只要你走系统代理，都可以抓到数据包。 五、版本说明 Fiddler一共2个版本，一个是Fiddler2，一个是Fiddler4，两个版本没有太大的区别，系统底层支持是不一样的，Framework版本不同（.net版本） Fiddler4支持win8以上 Fiddler2支持winXP（.netk只有2.X版本）、win7（.netk只有3.X版本） 如果win7要安装Fiddler4，会提示安装.net 4.0以上版本 底层并没有太大的区别，最终会影响在做Fiddler插件，因为Framework版本最终决定Fiddler插件版本 建议使用Fiddler4版本，只要升级Framework框架版本到4.0即可。 六、Fiddler界面详解

火狐调试工具-DevTools的介绍与使用

火狐调试工具-DevTools的介绍与使用 咱们做写js代码的时候，遇到的一个最大的问题就是调试问题，很多开发者在写js代码的时候，经常都非常痛苦。但是我们如果掌握好相应的调试工具，那么就可以比较游刃有余的解决js的调试问题。工欲善其事,必先利其器。 调试工具比较好的有火狐的firebug,另外chrome的自带调试工具也非常不错(英文版)。 掌握好这些调试工具,可以更好的学习js,也可以大大提高咱们完成js的排错能力。因此，我建议所有要使用js的人员都最好能好好的掌握一下这些工具。 本来火狐的firebug一直以来都是我认为最好的调试工具，但是现在Firebug官方已经宣布了停止Firebug的维护，咱们新版本的火狐已经无法再使用它。 以下是在官网找到的Firebug最新版本(最多只支持火狐47)： 虽然非常可惜，但是好在火狐还有自带的调试工具，而Firebug团队也推荐大家可以使用火狐的DevTools工具。 下面就是我总结的这款工具的一些基本的使用方式。 1、安装并打开调试工具 下载火狐浏览器(我下载的firefox54)安装即可 地址：https://www.wendangku.net/doc/966917428.html,/ 咱们打开火狐浏览器，直接按F12即可打开这个调试工具。 PS:有些用户火狐安装插件，可能导致F12没有效果，可以在设置中打开(如下图): 找到开发者选项：

点击Web控制台打开

这时候可以看到调试工具已经打开：

2、调试工具的页面总体介绍 1）查看器：可以在下方看到页面的HTML代码，而选中某个HTML元素也可以看到它对应的CSS样式(结合审查元素工具使用非常好) 2）控制台：咱们用得最多的一个面板，可以自定义决定咱们要看哪些高度数据(console 打印的数据都在这里展示) 3）调试器：可以为js添加debug功能 4）样式编辑器: 查看当前页面的所有样式 5）性能:分析js的每一个操作的性能 6）内存:当前页面的一些堆栈内存 7）网络：查看当前每一次请求 对咱们比较重要的工具有：审查工具,控制台,网络 现在，咱们就单独介绍一下这三个工具的使用： 工具一：审查工具 点击这个审查工具，我们就可以查看页面上的所有元素(使用方式如下图):

Yslow和page speed使用指南

Yslow和page speed的使用说明 一、Yslow和page speed简介 Yslow可读为why slow（为什么慢），是Yahoo发布的一款基于FireFox的插件，由此可知其作用主要是检查网页运行缓慢的原因。 Page Speed 是开源 Firefox/Firebug 插件。网站管理员和网络开发人员可以使用 Page Speed 来评估他们网页的性能，并获得有关如何改进性能的建议。 二、安装Yslow和page speed 安装YSlow必须首先先安装Firebug，然后下载YSlow，再对其安装。 1、下载Firebug到本地，（https://www.wendangku.net/doc/966917428.html,/download/51156.html） 2、解压Firebug，得到如下图的xpi文件； 3、打开Firefox浏览器，点击左上角的菜单项，选择【附加组件】进入附加组件管理器；如下图 4、在附加组件管理器里面找到【从文件安装附加组件】选项；

5、在本地找到刚才解压的xpi文件，将其他加载并安装；完成firebug的安装。 6、安装Yslow、page speed和安装firebug的步骤一样。 三、启动Yslow和page speed 这两个插件的启动方式都一样，有两种启动方式，由firebug界面统一管理。 1、打开firefox浏览器，在浏览器的右上角有个爬虫图标，点击该图标即可进入（退出）插件管理界面； 2、打开firefox浏览器，在浏览器的右下角有个Yslow图标，点击即可进入（退出）插件管理界面；

Yslow和page speed的使用指南 一、Yslow的分析 启动firebug后，显示如下界面，其中Yslow和page speed两个插件都在里面： 先输入相应的URL地址后，再点击 Run Test 运行Yslow，也可以点击 Grade, Components, 或Statistics选项开始对页面的分析。 二、Yslow视图 YSlow显示测试结果的分析,分为等级、组件、统计信息。你可以浏览这些观点之间选择标签以观的名字在YSlow标签的Firebug控制台。以下是说明的等级、组件、统计信息。 （一）、等级视图 查看一个分析,选择页面的性能等级标签或点击网页的字母等级在状态栏这页纸的底部。视图显示了等级为网页的成绩单。整个字母等级为页面显示在顶部随着全面数值的表现。这个页面是基于22可分级的高性能网页的规则(见性能规则)。这些规则是列在按重要性的顺序,从最重要不重要。从 A 级到 F 级，A 级为最高。下面是一个等级的例子：

Selenium使用说明

Selenium安装及使用说明 这是我在使用Selenium中的一些经验，供大家参考。 一、版本说明 目前，Selenium有四个版本，Selenium IDE、Selenium Core、Selenium RC、Selenium Core HTA。Selenium Core需要在远程服务器上安装，不支持跨域，且仅支持selenese语言。Selenium Core HTA仅支持IE浏览器，selennese语言。Selenium IDE和Selenium RC（Remote Control）都支持跨域，不需要在远程安装，它们各自有一些无可比拟的优点，简单介绍如下： Selenium IDE 优点： 它能够嵌入到浏览器中（但它是一个完整的测试工具）；可以直接操作页面进行录制/回放，比较直观；可以保存成不同语言的版本，如java、python、PHP、C#、perl等。缺点： 目前只支持Firefox（最新版本可以支持Firefox3了）。另外，它仅支持selenese语言。 Selenium RC 优点： 支持目前几乎所有的浏览器，包括firefox、IE、Opera等；支持多种语言，IDE中生成的所有语言他都支持，可以使用这些语言进行编程；同时，RC支持两种框架JUnit和TestNG，借助JUnit可以生成多种不同形式的结果文档，TestNG目前也备受推崇，因为他支持多线程，对Selenium Grid支持比较好，如果有需要以后可以研究一下，这里我们用JUnit。 缺点： 对firefox3支持不太好，需要进行相关配置，目前使用firefox2； 鉴于我们的实际情况，Selenium IDE直观的页面录制及SeleniumRC支持Java语言等优点，所以采用了Selenium IDE + Selenium RC + Java + JUnit + Ant这样一个框架进行测试。使用Ant＋JUnit是为了测试自动化及更好的输出测试报告。 二、安装 以下是我在window下使用selenium进行测试需要安装的软件（注：使用的版本是我测试成功的版本）： ●FireFox2 ●JDK6： ●Selenium IDE 1.0 beta2： ●Selenium RC1.0 ●Ant1.7.1 ●JUnit4.5 ●Firebug（可选） 1.FireFox2：

30个HTML代码编写技巧

30个HTML代码编写技巧.txt不相信永远,不拥有期待,不需要诺言当你不能再拥有的时候，唯一可以做的，就是令自己不要忘记。王子之所以能口奂酉星目垂美人是因为王子用心了我能口奂酉星什么本文总结了30条HTML代码编写指南，只要在编写HTML代码的过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。1. 一定要闭合HTML标签 在以往的页面源代码里，经常看到这样的语句：