HTML怎么做请求日志_html请求响应日志记录方法【新手必读】-html教程-PHP中文网

在浏览器开发者工具中查看真实请求日志，需打开DevTools的Network标签页并刷新页面；勾选Disable cache以避免缓存干扰，右键表头添加Protocol、Waterfall等列辅助分析，点击请求可查看Headers、Response及Timing详情。

html怎么做请求日志_html请求响应日志记录方法【新手必读】

浏览器开发者工具里怎么看真实请求日志

直接按 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 干净得多：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

[RES] ${response.config.url} ${response.status} ${response.headers['content-length'] || '-'}b

这样能同时看到请求发出前的配置（含 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