[转]web调试工具总结（firebug/fidder/httpwatch/wireshark）

ONE:Firebug:

Firebug是网页浏览器 Mozilla Firefox下的一款开发类插件， 现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发 JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面， 给Web开发者带来很大的便利。例如 Yahoo! 的网页速度优化建议工具 YSlow。

  　  Firebug也是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM以及JavaScript代码，下面给大家介绍下Firebug的详细使用方法:

 

步骤阅读

 

工具/原料

• FIrebug调试工具

• 火狐浏览器、谷歌浏览器或者其他支持Firebug的浏览器皆可​

方法/步骤

1. 1

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

   也可以说Firebug的CSS调试器是专为网页设计师们量身定做的；那么如何安装firebug呢?首先进入浏览器的

    

    

    

   步骤阅读
2. 2

   进入附加组件之后，然后在搜索框中搜索Firebug附加组件，找到之后安装即可，安装完成后重启浏览器就行了，如下图所示:

    

    

   步骤阅读
3. 3

   下面来说说Firebug的详细使用方法，Firebug可以随时编辑页面：

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

    

    

   步骤阅读
4. 4

   Firebug有6个主要的Tab按钮，本经验将主要介绍这几方面的功能，下面说的是Console 控制台:

    

    

   步骤阅读
5. 5

   Fire的查看和修改HTM代码功能:

   利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。

    

    

   步骤阅读
6. 6

   Firebug的DOM功能：

   该功能主要用于查看页面DOM信息，通过提供的搜索功能实现DOM的快速准确定位，并可双击来实现DOM节点属性或值的修改。

    

    

   步骤阅读
7. 7

   Firebug的脚本（Javascript）功能：

   脚本功能主要是一个脚本调试器，可以进行单步调试、断点设置、变量查看等功能，同时通过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率。　　

    

    

    

   步骤阅读
8. 8

   Firebug的网络（Net）功能：该标签功能主要用来监控网页各组成元素的运行时间的信息，方便找出其中运行时间较慢的部分，进一步优化运行效率。

    

    

   步骤阅读
9. 9

   使用Firebug插件在附加组件中打开Firebug启用开关，启用开关默认未开，如果未打开此功能，那么很可能会出现点击后Firebug插件无效的情况；

    

    

   步骤阅读

   使用firefox进行网络抓包：

   抓包工具，目的就是用它分析网络数据包的内容，无论是POST数据还是GET数据。想要写个网络蜘蛛，网站登陆辅助程序之类是离不开抓包工具的。今天介绍一款免费的抓包工具：Firebug。

    

   准备：安装了firebug的火狐浏览器。

    

   1. 打开火狐浏览器，点击右上角Firebug的图标。

      

   2. 启用Firebug,进入控制台。

      

   3. 点击旁边的网络。

      

   4. 启用网络面板。访问需要分析的页面。网络面板已经把所有的POST和GET请求都记录了下来，包括图片，JS等等，当然有些对我们写代码来说是没有用的，firebug已经帮我们标为灰色的了，一般情况下我们只需要分析黑体的请求。

      

       

       

      

   5. 这里举个例子。点开黑色的get请求，可以查看具体信息，包括头信息，相应，缓存，cookie等。可以对其进行分析了。

      

   6. TWO:httpwatch

   7. httpwatch抓包工具的使用方法

      • |
      • 浏览：5286
      • |
      • 更新：2013-05-20 20:19
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

      分步阅读

      火狐浏览器下有著名的httpfox，而HttpWatch则是IE下强大的网页数据分析工具。这个工具到底有哪些具体功能呢？这个我就不再赘述了，百度百科上列的很全面，但也比较抽象。我只想说我曾经用这个工具去分析QQ农场的数据包，根据数据包制作辅助工作（当然只是纯技术研究，未对游戏商造成任何不好影响），教程最后会提供一下扩展阅读，对网页游戏辅助工具制作感兴趣的朋友可以感受下。

      工具/原料

      • HttpWatchPro-v6.014

      • 工具猫魔盒

      方法/步骤

      1. 1

         第一步当然是先下载本教程的主角：HttpWatchPro-v6.014。

         下载安装。。。

      2. 2

         打开HttpWatch

         话说这个HttpWatch,只支持IE,我不怎么使用IE,但是为了抓包,只好忍... 打开IE,可以按下图的操作,打开HttpWatch,图中分别截取的是IE8、IE9下的工具位置，不同版本的浏览器，这个工具的具体位置可能不同，各位仔细找找。

          

         步骤阅读

         步骤阅读

         步骤阅读
      3. 3

         正式开始抓包!

         我们来抓什么呢?就从最简单的开始,我们来抓一个,农场挖地的包 先用IE登陆qzone.qq.com(这个...人人皆知) 输入帐号密码登陆,进入农场
         先按下HttpWatch的  这个Record按钮,开始截取!当然,抓其他包也一样,顺序是
         抓包=>Record->执行动作->Stop->包就抓好了(见本步骤第一张图)
         至于那个Stop,后面会讲到，主要为了防止抓去多余的数据包影响分析数据
         我们来铲掉任意一块地(不是我狠心,如果你想做辅助工具,就按我的去做吧,之后还会介绍制作的方法)
         （见本步骤第二张图）
         铲掉以后,马上点击 Stop 这个按钮
         停止抓包,你是不是会惊奇地发现- -!数据出来了!
         （见本步骤第三张图）
         没错,这就是大家梦寐以求的数据!下一步,来分析这些数据!

         步骤阅读

         步骤阅读

         步骤阅读
      4. 4

         分析数据!

         既然是分析,就每一项都要看到 先看"Overview"这一项
         （见本步骤第一张图）
         最重要的数据,就是我用红框框起来的,这个是要post到的地址!所谓post,也就是请求,就是向腾讯的服务器发送一个请求,他会给你相对的回应,达到模拟操作农场的目的 这可是最最重要,如果没这个地址,就算你有再强的东西,也发不出去! "Time Chart"无视- -! 接下来,看"Headers",这个叫做"标头",里面是一些重要的数据 可是,好像在js里面,这些数据都被封装了! 但是,我写C#的时候 Content-Type\Cookie\Referer这些东西都是要手动去添加的 方便就是方便,继续向下看 "Cookies"不必我多说,这是详细分析cookie数据的
         （见本步骤第二张图）
         笔直看到"postData",这个可是一大要点啊! 这是要Post的数据,让我们来分析一下下! 如果抓到的包是post类型,就都会有这些数据,还有一种类型是get,这里不做介绍.
         （见本步骤第三张图）
         我把数据列举出来 cropStatus 0 farmKey fbbae8559ebc4f62f3d2b597141464b8 //这个是根据farmTime计算出来的 farmTime 1279757891 //这个是操作的时间,好像精确到了毫秒 ownerId 361410091 //这是ID place 17 //这个是第几块地 是从0开始数的 17其实是17+1=第18快地! uIdx 361410091 //同样是ID uinY 361429651 //这个是你的QQ 再看到content,这个是返回数据!
         （见本步骤第四张图）
         我们把数据拿来分析,稍微懂一点英语,就能看懂! {"code":1,"direction":"","exp":0,"farmlandIndex":17,"levelUp":false} code代表操作类型,1就肯定是铲除了 direction这个,我也不知道代表什么,反正是空的! exp代表增加的经验,因为我的作物还没有成熟,所以得到的经验是0! farmlandIndex也就是代表多少块地,farm:农场land:陆地Index:索引 levelUp也就代表是否升级,false代表没有,true代表有

         步骤阅读

         步骤阅读

         步骤阅读

         步骤阅读
      5. 5

         制作辅助!

         这里要用到工具猫魔盒了! 我们先写界面代码 创建main.htm,用记事本打开即可 代码为:

         当前登录QQ:

         //点击这个按钮,就执行action这个函数,他的参数为tt1的内容,也就是,下面的输入框,代表铲除多少块地

                块地

          

         核心代码,打开main.js编辑 写入 action函数,

         function action(place)

         {

         var uId ;

         //用户id

         var time = new Date().getTime();

         time = Math.floor(time/1000);

         //这两句是算farmTime的,具体算法我也不清楚,gn说一个十位数,然后把算法给我了!

         var key = getkey2(parseInt(time));

         //这是qqapp.js里的一个函数,取farmKey,注意,getkey1是第一版农场,2才是最新版本

         var index = parseInt(place) - 1;

         //这是代表铲除的地,我给大家说过,post的时候,这个是从0开始计数的!所以,我们要减去1

         var qq = getqq();

         //这个不多说,取到用户的qq

         if(place == "")

         {

         alert("请输入第几块地!");

         return null;

         }

         //这几句是异常处理,如果输入的是一个空东西,就会弹出提示,然后返回空.如果不加,会报错的!

         Net.post("http://nc.qzone.qq.com/cgi-bin/cgi_farm_index",{

         "mod" : "user",

         "act" : "run",

         "farmKey" : "85f004b176ec8fdb332a27422b145a02",

         "farmTime" : "1258167411"

         },function(rs){

         var $rs=eval("("+rs+")");

         uId=$rs.user.uId;

         }

         )

         //这个是取用户的数据,大家post就知道,返回的是一大堆的东西,用alert只能弹出一部分,我推荐大家用write写出,

         我们只需要uId= xxxx,因为在发送的时候,需要uId,var $rs=eval("("+rs+")");这一句是说,把返回的内容转换为json数据

         uId=$rs.user.uId;这个不要多说了吧,为uId这个变量赋值,为返回数据user这一部分的uId

         Net.post("http://nc.qzone.qq.com/cgi-bin/cgi_farm_plant?mod=farmlandstatus&act=scarify",{

         "cropStatus" : 0,

         "farmKey" : key,

         "farmTime" : time,

         "ownerId" : uId,

         "place" : index.toString(),

         "uIdx" : uId,

         "uinY" : qq

         },function(返回){

         alert(返回);

         })

         //这就是发送铲地的数据了

         }

          

         以上代码仅作参考。看看效果图

         步骤阅读
         Three:wireshark

      Wireshark工作流程编辑

      （1）确定Wireshark的位置。如果没有一个正确的位置，启动Wireshark后会花费很长的时间捕获一些与自己无关的数据。

      

      （2）选择捕获接口。一般都是选择连接到Internet网络的接口，这样才可以捕获到与网络相关的数据。否则，捕获到的其它数据对自己也没有任何帮助。

      （3）使用捕获过滤器。通过设置捕获过滤器，可以避免产生过大的捕获文件。这样用户在分析数据时，也不会受其它数据干扰。而且，还可以为用户节约大量的时间。

      （4）使用显示过滤器。通常使用捕获过滤器过滤后的数据，往往还是很复杂。为了使过滤的数据包再更细致，此时使用显示过滤器进行过滤。

      （5）使用着色规则。通常使用显示过滤器过滤后的数据，都是有用的数据包。如果想更加突出的显示某个会话，可以使用着色规则高亮显示。

      （6）构建图表。如果用户想要更明显的看出一个网络中数据的变化情况，使用图表的形式可以很方便的展现数据分布情况。

      （7）重组数据。Wireshark的重组功能，可以重组一个会话中不同数据包的信息，或者是一个重组一个完整的图片或文件。由于传输的文件往往较大，所以信息分布在多个数据包中。为了能够查看到整个图片或文件，这时候就需要使用重组数据的方法来实现。

   Four: fiddler

   Fiddler支持 断点调试技术，当你在 软件的 菜单—rules—automatic breakpoints选项选择before request,或者当这些请求或响应属性能够跟目标的标准相匹配，Fiddler就能够暂停Http通讯，并且允许修改请求和响应。这种功能对于 安全测试是非常有用的，当然也可以用来做一般的 功能测试，因为所有的代码路径都可以用来演习。

   通过显示所有的Http通讯，Fiddler可以轻松地演示哪些用来生成一个页面，通过统计页面（就是Fiddler左边的那个大框）用户可以很轻松地使用多选，来得到一个WEB页面的“总重量”（页面文件以及相关js,css等）你也可以很轻松地看到你请求的某个页面，总共被请求了多少次，以及多少字节被转化了。

   用户可以加入一个Inspector 插件对象，来使用.net下的任何语言来编写Fiddler扩展。RequestInspectors 和 ResponseInspectors提供一个格式规范的，或者是被指定的（用户自定义）Http请求和响应视图。

   另外，通过暴露HTTP头，用户可以看见哪些页面被允许在 客户端或者是代理端进行缓存。如果要是一个响应没有包含Cache-Control 头，那么他就不会被 缓存在 客户端。 ^[1]  

   同类的工具有: httpwatch, firebug, wireshark。

    

转载于:https://www.cnblogs.com/holiday-testing/p/firebug-fiddler.html