如何用 fiddler / Charles / ReRes 调试线上代码

Fiddler

有时代码上线了，突然就碰到了坑爹的错误。或者有时看别人家线上的代码，对于一个文件想 fork 下来试试效果又不想把全部文件拉到本地，都可以使用 fiddler 的线上调试功能。

比方说我们打开携程的首页 www.ctrip.com，看到个叫 allsearch.js 的 js 文件，想往里加点代码调试下。

我们先把这个 js 文件下载到本地。

然后打开 fiddler（当然首先得下载安装 fiddler，参考如何用 fiddler 代理调试本地手机页面），浏览器访问 www.ctrip.com，fiddler 能捕获到所有请求，我们找到 allsearch.js 这个 session。

右侧面板切换到 AutoResponser ，勾上前两个选项，并把左边我们找到的这个文件拖到右边如图位置处。

右下角 “Rule Editor” 最下面的下拉选择 “Find a file”，选择之前下载到本地的那个文件。这时线上的该文件 url 就映射到本地的那个文件了。

我们在本地往该 js 文件的开头添加一句 alert('hello world');，刷新 www.ctrip.com，就有效果了。

Charles

2017.12.20 add:

Charles 下大致类似，千万要记住的是，抓包前先把代理都关掉，不论是系统级别的还是浏览器上的。

首先打开 Charles，在 【Proxy】tab 下选择 【macOS Proxy】。这个时候刷新页面正常情况下请求都会出现在 Charles

然后刷新网页，找到需要替换的文件：

右键该文件，选择最后一个【Map Local...】

然后选择本地文件：

本地修改该文件，之后对于该文件的请求便会转到本地。

如果不想 Proxy 了呢？可以在 Charles 右键文件，取消对于该文件的代理

如果出现 [unkown] 错误，点击发现如下解释「SSL Proxying not enabled for this host: enable in Proxy Settings, SSL locations」，右键开启 SSL 即可「Enable SSL」

ReRes

一款能够修改映射的 chrome 扩展。（仓库地址）

首先打开 chrome://extensions/，将扩展「允许访问文件网址」勾选上，这样就能访问本地文件。

然后插入映射规则如下：（默认将文件同名命名并保存到了桌面）

// If URL match:
https://webresource.c-ctrip.com/ResH5SearchOnline/allsearch.js.*
// Response:
file:///Users/fish/Desktop/allsearch.js

假设两个字符串分别是 a 和 b，a 两边加上 // 其实就是一个正则 pattern，其实是这样的：

if (a.test(url)) {
  url = url.replace(a, b)
)

接下去就是尽情修改本地保存的文件即可