zoukankan      html  css  js  c++  java
  • [转]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. 对于网页开发人员来说,Firebug是Firefox浏览器中最好的插件之一,

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

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

    3. 下面来说说Firebug的详细使用方法,Firebug可以随时编辑页面:

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

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

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

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

    6. Firebug的DOM功能:

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

    7. Firebug的脚本(Javascript)功能:

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

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

    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

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

        工具/原料

        • HttpWatchPro-v6.014

        • 工具猫魔盒

        方法/步骤

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

          下载安装。。。

        2. 打开HttpWatch

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

        3. 正式开始抓包!

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

        4. 分析数据!

          既然是分析,就每一项都要看到 先看"Overview"这一项
          (见本步骤第一张图)
          最重要的数据,就是我用红框框起来的,这个是要post到的地址!所谓post,也就是请求,就是向腾讯的服务器发送一个请求,他会给你相对的回应,达到模拟操作农场的目的 这可是最最重要,如果没这个地址,就算你有再强的东西,也发不出去! "Time Chart"无视- -! 接下来,看"Headers",这个叫做"标头",里面是一些重要的数据 可是,好像在js里面,这些数据都被封装了! 但是,我写C#的时候 Content-TypeCookieReferer这些东西都是要手动去添加的 方便就是方便,继续向下看 "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. 制作辅助!

          这里要用到工具猫魔盒了! 我们先写界面代码 创建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="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后会花费很长的时间捕获一些与自己无关的数据。
        (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。

       

  • 相关阅读:
    ElasticSearch原理
    redis master配置了密码进行主从同步
    redis sentinel 高可用(HA)方案部署,及python应用示例
    Linux Redis集群搭建与集群客户端实现
    字符串倒序
    单链表反转
    【python】面试常考数据结构算法
    面试中的排序算法总结
    Memcached 真的过时了吗?
    Activity生命周期
  • 原文地址:https://www.cnblogs.com/holiday-testing/p/firebug-fiddler.html
Copyright © 2011-2022 走看看