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

时间：2023-03-09 16:42:56
[转]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的图标。

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

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

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

    3. 点击旁边的网络。

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

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

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

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

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

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

    6. TWO:httpwatch

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

      • |
      • 浏览：5286
      • |
      • 更新：2013-05-20 20:19
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 1
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 2
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 3
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 4
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 5
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 6
      • [转]web调试工具总结（firebug/fidder/httpwatch/wireshark） 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,用记事本打开即可 代码为:

        <html>

        <head>

        <script type="text/javascript" src="./lib/gnbox.js" title="魔盒核心库"></script>

        <script type="text/javascript" src="./lib/cn.js" title="魔盒中文化库"></script>

        <script type="text/javascript" src="./lib/md5.js" title="MD5加密函数"></script>

        <script type="text/javascript" src="./lib/qqapp.js" title="QQ常用函数库"></script>

        </head>

        <body>

        <div id="qqlogin">当前登录QQ:<span id="cqq"></span></div>

        <input type="button" value="铲除" onclick="action((tt1).value)"></input>

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

        <input id="tt1" type="text" value="18"></input>

        <script type="text/javascript">

        installXMLHTTP();

        /*让用户安装xmlhttp 5.0*/

        var qq=getqq();

        /*获取QQ号码*/

        $("cqq").innerHTML=qq;

        /*设置 id="cqq" 的东西的内容 等于 qq*/

        </script>

        <!--程序界面代码开始-->

        <div style="width:100%;padding:10px;">

        块地

        </div>

        <!--程序界面代码结束-->

        <script type="text/javascript" src="./main.js" title="程序主要JS"></script>

        </body>

        </html>

        核心代码,打开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后会花费很长的时间捕获一些与自己无关的数据。
      [转]web调试工具总结（firebug/fidder/httpwatch/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。