如何在React Native CLI调试中启用NETWORK标签页？

一、修复Chrome DevTools的NETWORK标签问题 #

如果之前用的是旧调试入口（http://localhost:8081/debugger-ui/），大概率看不到NETWORK标签，换成官方推荐的调试流程：

• 打开应用开发者菜单（Android摇设备/按Menu键，iOS摇设备）
• 选择Debug JS Remotely
• 打开Chrome，输入chrome://inspect，找到你的React Native应用，点击inspect按钮
• 此时弹出的DevTools面板中，NETWORK标签会正常加载并显示所有JS层面发起的网络请求（Fetch/Axios等）

注意：0.76.5默认启用Hermes引擎，不要选择Enable Hermes Debugger，该模式下Chrome DevTools暂时不支持网络请求监控，切换回Debug JS Remotely即可。

二、用Flipper监控网络请求（官方推荐） #

Flipper是React Native官方集成的调试工具，能全面监控原生和JS层面的所有请求：

• 下载并安装Flipper（未安装的话直接完成安装）
• 确保设备/模拟器和电脑在同一网络，Android需保证adb连接正常，iOS需开启开发者模式
• 运行应用（npx react-native run-android/run-ios），Flipper会自动识别并连接应用
• 在Flipper左侧面板找到Network插件，点击后可查看所有请求的详细信息：请求头、负载、响应内容、状态码等，还支持过滤请求类型、搜索关键词

三、使用React Native Debugger（第三方工具） #

这是集成了Chrome DevTools和Redux DevTools的独立调试工具，网络监控体验和Chrome一致：

• 安装React Native Debugger后打开
• 在应用开发者菜单选择Debug JS Remotely，工具会自动连接你的应用
• 打开DevTools的NETWORK标签，即可查看所有网络请求细节，还能配合Redux调试使用

四、临时调试方案：手动打印请求日志 #

如果以上工具暂时无法使用，可在请求代码中手动打印关键信息：

// 以Axios为例
axios.get('/api/data')
  .then(response => {
    console.log('请求URL:', response.config.url);
    console.log('请求头:', response.config.headers);
    console.log('响应数据:', response.data);
  })
  .catch(error => {
    console.log('请求错误:', error.response?.data || error.message);
  });

内容的提问来源于stack exchange，提问作者Infinity Bot