在浏览器开发者工具中查看真实请求日志，需打开DevTools的Network标签页并刷新页面；勾选Disable cache以避免缓存干扰，右键表头添加Protocol、Waterfall等列辅助分析，点击请求可查看Headers、Response及Timing详情。
浏览器开发者工具里怎么看真实请求日志
直接按 F12 打开 DevTools，切到 Network 标签页，刷新页面就能看到所有 HTML 页面发起的请求——包括 fetch、XMLHttpRequest、资源加载（JS/CSS/图片）、甚至 iframe 的导航。这不是“日志记录”，而是实时观测，但对调试绝大多数前端请求问题已经足够。
注意几个关键点：
-
Disable cache勾选上，否则某些请求可能被缓存拦截，不走网络，看不到真实响应 - 右键表头可勾选
Protocol、Waterfall、Response Headers等列，方便排查 HTTP/2、重定向、CORS 头缺失等问题 - 点击单个请求后，在
Headers里看完整请求头和响应头；在Response或Preview里看返回体；Timing可定位是 DNS、SSL 还是 TTFB 慢
用 console.log + fetch 拦截做简易请求日志（无侵入改写）
如果想把每次 fetch 的 URL、方法、状态码、耗时打出来，又不想全局替换所有 fetch 调用，可以用代理方式重写：
const originalFetch = window.fetch;
window.fetch = function(...args) {
const startTime = performance.now();
return originalFetch(...args)
.then(res => {
const endTime = performance.now();
console.log(`[FETCH] ${args[0]} ${res.status} (${Math.round(endTime - startTime)}ms)`);
return res;
})
.catch(err => {
const endTime = performance.now();
console.warn(`[FETCH ERR] ${args[0]} ${err.message} (${Math.round(endTime - startTime)}ms)`);
throw err;
});
};这段代码必须在任何 fetch 调用前执行（比如放在 的 <script></script> 中）。它不会影响原有逻辑，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 无法捕获
XMLHttpRequest或第三方库（如 axios）内部的请求，它们不走原生fetch - 如果页面用了 Service Worker，部分请求可能被拦截，
fetch代理看不到 - 生产环境务必移除，避免泄露敏感 URL 或拖慢性能
axios 请求怎么加响应日志（带 config 和 error 细节）
如果你项目用的是 axios，推荐用拦截器，比手动包每处 axios.get 干净得多：
axios.interceptors.request.use(config => {
console.log(`[REQ] ${config.method?.toUpperCase()} ${config.url}`);
return config;
});
<p>axios.interceptors.response.use(
response => {
console.log(<code>[RES] ${response.config.url} ${response.status} ${response.headers['content-length'] || '-'}b</code>);
return response;
},
error => {
const config = error.config || {};
console.error(<code>[ERR] ${config.url} ${error.code || 'unknown'} —</code>, error.response?.status, error.message);
return Promise.reject(error);
}
);这样能同时看到请求发出前的配置（含 headers、params）、响应原始数据、以及各种错误类型（ERR_NETWORK、ERR_BAD_RESPONSE、超时等）。特别注意：
-
error.code是 axios 自己的错误码，不是 HTTP 状态码；error.response只在收到服务器响应时存在，网络断开时是undefined - 不要在拦截器里直接
console.table(config)，因为config是引用对象，后续修改会影响日志内容，建议JSON.parse(JSON.stringify(config))浅拷贝后再打 - 若启用了
withCredentials: true，跨域响应头必须包含Access-Control-Allow-Credentials: true，否则拦截器收不到response
为什么不能靠 document.write 或 innerHTML 记录请求日志
有人想把请求信息实时写进页面某个 <div id="log"></div>，用 document.getElementById('log').innerHTML += ...。这看起来直观，但实际会出问题：
- 每次赋值都会触发 DOM 重排，高频请求下页面明显卡顿，尤其在低配设备或长列表页
-
innerHTML会自动解析 HTML 字符，如果 URL 含或 <code>&（比如带 query 参数），可能破坏结构甚至执行脚本（XSS 风险） - 没有滚动锚定，新日志进来后旧内容被顶上去，用户很难持续盯住最新条目
真要可视化展示，用 textContent + appendChild 创建 <pre class="brush:php;toolbar:false;"></pre> 行，再配合 element.scrollTop = element.scrollHeight 滚到底部，才稳妥。不过对多数调试场景，console 已经更轻量、更可靠。
