JS日志中的网络请求怎样监控

调试 Ja vaScript 代码时，网络请求的监控往往是重中之重。虽然 console.log() 能快速输出一些基本信息，但要想深入诊断问题，光靠它还不够——浏览器开发者工具和第三方库才是真正的利器。

那么，有哪些靠谱的监控手段？下面从内置工具、代码日志和第三方库三个维度来拆解。

1. 活用浏览器开发者工具

现代浏览器几乎都内置了功能完备的开发者工具，Chrome DevTools 是最典型的代表。用起来很简单：直接打开浏览器按 F12，或者右键页面选“检查”，然后切到 Network 选项卡。刷新页面或者触发某个操作，所有网络请求就会实时显现出来——请求类型、URL、状态码、响应内容，一目了然。这个工具就像一台网络实时显微镜，特别适合排查接口返回错误、资源加载失败这类问题。

2. 用 console.log() 打点日志

如果想在业务代码层面追踪请求过程，可以直接在发起网络请求的地方加上 console.log() 语句。比如用 fetch 请求时，可以这样写：

fetch('https://api.example.com/data')
  .then(response => {
    console.log('Response:', response);
    return response.json();
  })
  .then(data => {
    console.log('Data:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

这样做的好处是能把请求的生命周期完整记录下来，便于在开发阶段做初步排查。不过要注意，生产环境下最好把日志关掉，否则控制台容易刷屏。

3. 借助第三方库实现更优雅的监控

当项目规模上来之后，手动在每个请求处加日志就显得有点笨重了。这时候不妨试试 axios，它自带的拦截器机制能帮你把请求和响应的监控统一管理起来：

import axios from 'axios';

// 请求拦截器
axios.interceptors.request.use(config => {
  console.log('Request:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  console.log('Response:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

// 发起请求
axios.get('https://api.example.com/data');

所有的请求都会经过拦截器，你可以在里面统一打印、统一处理错误，甚至结合自定义事件做更复杂的监控方案。

掌握这三种方式，前端网络排查的效率会提升一个台阶。需要警惕的是，无论是开发者工具还是代码日志，都只适用于开发或测试环境，生产环境下务必做好安全防护，避免敏感信息泄露。