如何在React Native开发中查看请求头及接口请求、响应参数

1. 内置开发者工具调试 #

• 打开App的摇一摇开发者菜单，选择调试JS远程选项，在Chrome打开对应调试页面后，调出Chrome DevTools的网络面板，即可直接查看所有API请求的头、请求参数、返回值，和Web开发的网络面板体验完全一致。
• 注意：如果项目使用fetch、axios这类标准网络库，该方法默认生效，无需额外配置。

2. 第三方桌面调试工具 #

• Flipper：React Native 0.62及以上版本默认内置支持，无需额外写代码，安装Flipper客户端后启动App，直接在网络插件面板就能查看所有请求的完整信息，还支持筛选、导出请求记录。
• Charles Proxy：给手机或模拟器配置代理到Charles端口，手机端信任Charles的根证书后，就能抓取RN App发出的所有HTTP/HTTPS请求，包括请求头、参数、返回值都可完整查看，还支持修改请求/返回值做场景测试。

3. 代码层埋点输出 #

如果不想用外部工具，可以直接在网络请求拦截器中加日志输出，以axios为例：

// 请求拦截器打印请求信息
axios.interceptors.request.use(request => {
  console.log('请求地址:', request.url)
  console.log('请求头:', request.headers)
  console.log('请求参数:', request.params || request.data)
  return request
})
// 响应拦截器打印返回信息
axios.interceptors.response.use(response => {
  console.log('返回状态码:', response.status)
  console.log('返回数据:', response.data)
  return response
})

配置完成后所有请求信息都会直接输出到终端的Metro日志面板，无需额外工具即可快速排查问题。

内容的提问来源于stack exchange，提问作者Shan Biswas