Charles 监听网络请求

热度 ℃

使用 Charles 工具，可以 监听 / 修改 网络请求，

代理请求

在需要监听App的网络请求时，可以设置Charles代理端口，然后再在手机上设置代理，将代理设置成电脑的ip和对应的端口号，之后手机上发起的网络请求，就可以在电脑上看到了；

Proxy -> Proxy Settings -> Proxies 修改端口号；

修改请求

  1. 添加Breakpoints(断点)

Proxy -> Breakpoints Settings 添加一个请求地址；

Proxy -> Enable/Disable Breakpoints 打开/关闭断点；

比如有这样一个服务器，接收到请求之后返回msg和当前的请求地址；

1
2
3
4
5
var http = require('http');
http.createServer(function(req, resp) {
	console.log(req.url);
	resp.end('Hello Michael\r\n' + req.url);
}).listen(3000);

  1. 修改请求
    modify_request
    由浏览器发起一个请求，Charles在监听到请求之后，拦截请求，并不会直接发出去，在修改了一些内容并且点击Execute之后，才会真正发出请求。
    通过Charles可以修改URL，添加Headers，Cookies，甚至改变请求方式；

  2. 修改响应
    modify_response
    服务器响应之后，也是Charles第一时间收到请求响应，同样，也可以修改响应的内容；
    通过Charles可以修改响应的内容，Headers，甚至可以添加Raw，让请求变成一个下载文件地址；

  3. 浏览器network
    charles_browser_network
    查看浏览器的network栏，原本服务器返回的数据的确被修改了!

发起请求

charles_new_request
使用Charles可以方便的发起一个请求，对于联调测试接口很有用；
发起请求可以指定请求方式，添加Headers等；

1
2
3
4
5
6
7
8
9
10
11
12
13
var http = require('http');
http.createServer(function(req, resp) {
	console.log(req.url);
	var cookie = req.headers.cookie;
	console.log('cookie: ', cookie);
	if(cookie && cookie.indexOf('name') >= 0) {
		//
		return resp.end('Hello Michael\r\n' + cookie);
	}else{
		resp.setHeader('Set-Cookie', "name=user000");
	}
	resp.end('Hello Please Retry\r\n' + req.url);
}).listen(3000);