综合练习

这一课你将能做到

1. 独立用 DevTools Network 与 curl 完成「打开 /tracks → 读到 /api/tracks」的全链路记录：方法、状态码、关键头、协议版本、缓存迹象
2. 按现象速查表定位 401/403、CORS、502、数据陈旧、慢 TTFB 五类问题，说出每类该进 Nginx / Spring / Redis 哪条轨道深挖
3. 交付三件套：一张 ≥5 行的请求记录表 + 一段「HTTPS 在哪终止、JSON 谁生成」的链路说明 + 一条可落地的缓存改进建议

为什么要学

前面每课拆开讲，线上故障却是搅在一起的：一个「页面打不开」可能同时涉及 502、缓存、Cookie。会读 Network 里的一行，等于会读半条 Web 链路——这是后端与全栈的日常肌肉，也是「从输入 URL 到页面展示」面试题的实操版。

本课没有新概念，只有可重复的流程。做完这五个任务，本 track 的 12 课就收束成你自己的排错清单，而不是一堆零散知识点。

先建立图像

你的固定排错镜头（背下来，每次都用同一套）：

1. 复现     → 无痕窗口 + Preserve log + 硬刷新
2. 定位     → 找 document 与关键 XHR/fetch 请求
3. 顺序     → 先 Status → 再 Request/Response Headers → 再 Timing → 最后 Preview
4. 二分     → 同一请求 Copy as cURL，终端复现（排除浏览器独有因素）
5. 分层     → TLS/Nginx → 应用 → DB/Redis → 客户端缓存

现象 → 先查什么：

现象	先查
502 Bad Gateway	upstream 存活？端口对？Nginx error.log
401 / 403	Cookie/Bearer 带了吗？角色对吗？（401 登录、403 权限）
CORS 红字	OPTIONS 过没过？Allow-Origin 有没有？——先用 curl 看是不是其实是 5xx
数据陈旧	浏览器缓存 → Nginx → Redis → DB 逐层核对（应用缓存课演习表）
慢 TTFB	应用日志、慢 SQL、缓存命中、冷启动
混合内容	HTTPS 页面拉了 http:// 资源

跟着做

任务 A：页面加载链全记录

1. 无痕窗口打开 https://coderoadmap.cn/tracks（或本地 localhost:3000/tracks）
2. F12 → Network → 勾 Preserve log → Ctrl+Shift+R 硬刷新
3. 填这张表（每格都要动手看，不许猜）：

类型        方法   路径                       状态   Content-Type        Protocol   Size/缓存
document    GET    /tracks                    ___    text/html           ___        ___
stylesheet  GET    /_next/static/...css       ___    text/css            ___        ___
script      GET    /_next/static/...js        ___    ___                 ___        ___
xhr/fetch   GET    /api/tracks                ___    application/json    ___        ___
（再补 1 行：字体/图片/其它 API）

4. 点 api/tracks → Timing 标签：DNS、TLS、Waiting (TTFB)、Content Download 各占多少？