2015年6月

fiddler使用教程(二) 断点调试

fiddler的断点功能可以截获发送或者接收到的请求,然后更改信息方便我们的调试。对于前端开发工程师来说对发送或者对接受的请求做处理是再正常不过的了下面用fiddler做一个例子来讲解下如何用fiddler做断点调试。

1、断点的位置在界面的底部

点击一下会出现一个箭头朝上的标记,在点击下就会有抄下的标记

第一个是断点的发送请求出去之前,第二个是数据返回的时候截取。

2、我们以www.ly.com为例子:

点击这几个tab标签会请求异步替换掉下面的内容。

我们点击海岛的时候请求的异步里面有2个核心参数一个是method 一个是 typeName 。先断点断在发送求情的时候 

然后点击一个tab标签 比如欧洲:如下图

第一个是断点到返回状态,第二个是直接走完,第三个是传到服务器的一些值,我们在这里可以进行更改,然后点击Run to Completion 来完成这个请求,或者点击工具栏上的go按钮来走完全部的请求。当然我们还可以修改请求的头部信息,比如传过去的cookies等。

3、截断请求返回的内容进行修改

由于我们这是返回之后的信息修改,所以返回之前的头信息是无法修改的,点击右侧Texview 就是查看返回的内容,然后在这里是可以修改的. 还有点击右下角在 notepad里面查看这样看起来更方便,修改完之后点击 Run to Completion 走完整个请求的过程,然后查看下状态.


这只是个简单的例子,大家可以举一反三。


未完待续


fiddler使用入门(一)

一、主要功能

1、截获http或者https请求。
2、查看截获的请求
3、伪造请求 服务器到客户端  客户端到服务器
4、测试网站性能
5、解密hhtps的web会话
6、第三方扩展

二、工作原理


在客户端和服务器之间设置一个代理服务器 修改服务器和客户端之间的请求。
代理模式:流模式 和 缓冲模式。 流模式是实时将http的请求返回给我们的应用程序。缓冲模式是等所有的http全部准备好才返回给我的应用程序。缓冲模式可控制服务器的响应。流模式更接近于浏览器本身的行为。
三、实用场景
1、配置host。生效块。---比SwitchHosts好多了
2、前后端的接口调试。---发送开发提供的接口地址参数等等
3、线上的bugfix  ---就是的把线上的脚本fiddler到本地修改本地调试线上看效果。
4、性能优化分析。
四、工具界面介绍
1工具栏
依次是:1)添加备注。在请求后面添加备注 具体干嘛自行脑补。
             2)回放功能 重新发送该请求。亦可用R键 快捷键。前提是你要选中该请求。
             3)清空监控面板 有几个选项 全部清空也可在命令输入行里面输入 cls
             4)断点继续按钮  配合断点使用点击红色区域实现断点,可以发送请求时断点,接受响应时候断点。
             5)流模式和缓冲模式切换
             6) 将http里面的东西解压出来
             7)需要保持的会话数,就是监控框里面展示的最多条数
             8)大概意思就是点击然后移动到其他应用窗口比如chrom浏览器,这样就只会显示chrom浏览器的请求了
             9)查找功能不多说
             10)对当前回话的保存
             11)保存截图 点击之后5秒保存
             12) 计时器 
             13) 快速启动一些浏览器   
             14)清除ie缓存快捷键
             15)编码解码文本内容 很有用 比如百度搜索的关键字被编码了  用这个可以解码
             16) 将右侧面板做成浮窗
2、状态面板
            1) 黑色的部分是控制台,可以输入快捷命令 直接输入help可以跳转到快捷键页面查看帮助,alt+q是光标快速定位到控制台
            2)控制fiddler是否工作
            3)过滤回话来源比如点击webBrowser 这样fiddler就只会监控浏览器的回话请求(这里指的是ie)
            4)回话数量
3、监控面板
           1)记录值分别是  状态码  、 协议 、请求的主机地址(域名)、 服务器地址、 URL。
           2)Statistics数据统计 一个请求的性能方面的指标 一个会话的统计信息 可以为优化提供依据
           3)Inspectors 对请求进行解包。比如头 cookies 返回等 具体自己看脑补。
           4) AutoResponder最常用的功能 文件代理 本地文件替换线上文件
           5)Composer后端接口调试  不需要写任何js 就可以调试后台接口
           6)Timeline 查看请求性能 使用方式 选择一系列会话查看


五 、 实战

           一、host 

有点就是 立马生效 管理起来简单

 二、文件替换  AutoResponder

   不仅仅是文件 还能把文件替换成响应 比如延迟5妙等

未完待续


PhantomJS 入门(一)

Urna Semper
陆启东
2015年6月21日


PhantomJS 入门
PhantomJS is a headless WebKit with JavaScript API.


     我想我不需要说服你测试你的javascript代码是一个好习惯,但是有时候在dom里面测试你得javascript实在很乏味,也就是说你必须在浏览器里面测试你得代码而非命终端里面。这样真的对么?显然不对,请看这里PhantomJS


     那么PhantomJS到底是什么呢?这里我们引用下官网的一句话
PhantomJS is a headless WebKit with JavaScript API.
    你懂的,Webkit是Chrome,Safari和一些小众浏览器的引擎,所以说PhantomJS是一个浏览器但是又不是浏览器,也就是说通过它可以实现一个也没一个网页但是你并不需要打开它,或者这个让你听起来很困扰,所以你只要记住它类似于一个浏览器但是在控制台中使用就行了,哦了那我们来简单看下一个例子,当然首先你需要安装好PhantomJS。
     安装PhantomJS
     安装PhantomJS这实在是太简单了,只需要吧程序下载下来放到你的控制台环境变量路径里面,下载页面是PhantomJS download page。进去选择你当前系统的包,然后把文件复制到你得控制台系统路径里面。
     如果你是Mac OS X的话那更简单啦,直接运行:
    brew update && brew install phantomjs
     查看你是否已经安装好了PhantomJS
    phantomjs --version


简单的例子

    让我们来看一个简单的例子

    simple.js

console.log("we can log stuff out.");
 
function add(a, b) {
    return a + b;
}
 
conslole.log("We can execute regular JS too:", add(1, 2));
 
phantom.exit();


我们来用下面的命名来运行它

phantomjs simple.js

运行结果

我们在控制台看到了两行输出。当然这个非常简单,但是它反映出一点:PhantomJS可以像一个浏览器那也处理javascript,然而这段代码并没有PhantomJS-specific 代码,但是看最后一行,这个很重要,因为所有的phantomjs执行完之后都要退出,比如我们想再关闭里面写个回调。


加载页面

phantomjs可以帮助我们打开一个页面,并且执行javascript。

例如: script.js

var page = require('webpage').create();
 
page.open('http://www.ly.com', function (s) {
    console.log(s);
    phantom.exit();
});


这里我们利用webpage模块来创建一个webpage对象,然后使用open的方法打开它,里面有2个参数第一个是url,然后就是回调函数,回调函数里面,里面可以输出返回的状态,如上代码执行之后我们在控制台里面看到的应该是"success"。

    让我们来做些更有趣的事情,我们打开页面然后执行一段脚本看看:

page.open('http://www.ly.com', function () {
    var title = page.evaluate(function () {
        var posts = document.getElementsByClassName("logo");
        posts[0].style.backgroundColor = "#000000";
        return document.title;
    });
    page.clipRect = { top: 0, left: 0, width: 600, height: 700 };

    page.render(title + ".png");

  未完待续