Fiddler实战指南：从抓包到调试解决前端难题

我的写法，亲测靠谱

在移动开发中，Fiddler 是一个非常实用的工具，尤其是当你需要调试 HTTP 请求、查看和修改网络流量时。我一般这样处理：首先，确保 Fiddler 已经安装并且配置好了。然后，在项目中通过代理设置将所有请求都通过 Fiddler 转发。

以下是我常用的配置方法：

javascript
// 配置代理
const proxy = 'http://localhost:8888';
const API_URL = 'https://jztheme.com/api';

// 设置代理
fetch(API_URL, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  agent: new HttpsProxyAgent(proxy)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这里用了 HttpsProxyAgent 来设置代理。这样做的好处是，所有的请求都会经过 Fiddler，你可以在 Fiddler 中看到详细的请求和响应信息，方便调试。

这几种错误写法，别再踩坑了

在使用 Fiddler 的过程中，我也遇到过不少坑，这里分享几个常见的错误写法，希望你们不要再踩这些坑了。

第一个坑是直接在代码里硬编码代理地址，比如：

javascript
const API_URL = 'https://jztheme.com/api';
fetch(API_URL, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这种写法的问题在于，一旦你切换了开发环境或者不需要代理了，你就得手动去改代码。而且，如果你不小心把代理地址提交到版本控制里，那就更麻烦了。

另一个常见的错误是忽略 HTTPS 证书问题。Fiddler 在默认情况下会生成一个自签名的证书，如果你不信任这个证书，请求就会失败。解决方法是在 Fiddler 中安装证书，并在代码中禁用 SSL 证书验证：

javascript
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; // 禁用 SSL 证书验证

const proxy = 'http://localhost:8888';
const API_URL = 'https://jztheme.com/api';

fetch(API_URL, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  },
  agent: new HttpsProxyAgent(proxy)
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

虽然这种方法能解决问题，但建议只在开发环境中使用，生产环境中还是不要禁用 SSL 证书验证，安全第一。

实际项目中的坑

在实际项目中使用 Fiddler，除了上面提到的一些坑，还有一些需要注意的地方。比如说，Fiddler 默认会拦截所有的 HTTPS 请求，这在大多数情况下是没有问题的，但有时候你会发现某些请求无法正常工作。

我曾经在一个项目中遇到过这样的情况：某个第三方服务的请求总是被 Fiddler 拦截，导致请求失败。后来发现，那个第三方服务对证书有特殊要求，Fiddler 生成的自签名证书不被信任。解决方法是，找到那个第三方服务的官方证书，导入到 Fiddler 中。

具体步骤如下：

• 在 Fiddler 中打开“Tools”菜单，选择“Options”。
• 在“HTTPS”选项卡中，点击“Actions”按钮，选择“Trust Root Certificate”。
• 找到第三方服务的官方证书文件，导入到 Fiddler 中。

这样做之后，Fiddler 就可以正常使用了。

另外，Fiddler 有时会导致一些性能问题，特别是在请求量很大的时候。如果发现应用变慢了，可以尝试关闭 Fiddler，看看是不是它的原因。

以上是我总结的最佳实践

以上就是我在使用 Fiddler 过程中总结的一些实战经验和踩坑经历。希望这些经验对你有帮助。如果你有更好的方案或建议，欢迎在评论区交流。

这个技巧的拓展用法还有很多，后续我会继续分享这类博客。希望大家都能在开发中少踩坑，多高效！