F12 网络调试实战：前后端交互原理与 Flask 路由定位
架构基础：客户端、服务端与前后端分层
理解通信角色是排查问题的第一步。所有客户端发起请求时，目标链接必然包含 IP 和端口。
请求发给谁了？
如果 URL 里直接有 IP，直接使用；如果没有，浏览器会调用 DNS 查询域名，解析出对应的 IP。
服务端（Server）
这里指程序实际运行的机器环境。在 Web 系统中，我们常称为'后端'；在非 Web 系统或传统架构中，则更多被称为'服务端'。
前端（Front-end）
前端不等于浏览器本身，浏览器只是前端代码最常见的运行环境之一。Web 系统通常采用前后端分离的架构，而非 Web 系统则更强调客户端与服务端的交互。
F12 Network 面板实战
打开开发者工具，进入 Network 面板，这是观察前后端交互最直接的窗口。
筛选关键请求
如果请求记录过多，建议先点击清空按钮，再进行实际操作。重点查看 XHR / Fetch 面板，这里过滤出的就是浏览器向后端发送的 HTTP 接口请求。
为什么关注 XHR / Fetch？
XHR（XMLHttpRequest）和 Fetch 代表了前端与后端接口'交互'的主要方式。其他类型的资源加载（如图片、CSS）通常不携带业务逻辑数据。
请求详情分析
点开其中一个请求，我们可以从以下几个维度深入分析：
- Payload：载荷，即请求体中的数据。
- Preview：预览，方便快速查看返回数据的结构。
- Response：响应内容，后端返回的具体数据。
- Initiator：启动器，显示是谁触发了这个请求。
- Timing：时间轴，分析请求各阶段的耗时。
- Cookies：Cookie 信息，用于会话管理。
- Header：请求头，包含 Content-Type、Authorization 等关键信息。
后端路由定位技巧
当你在前端看到某个请求 URL，想在后端代码中找到它对应的处理逻辑，该怎么搜？
搜索路径段
直接在代码库中搜索 URL 的 Path 段。如果找不到，可以尝试少复制一点关键路径，避免匹配到无关文件。
Flask 类视图查找
对于使用 Flask 框架的项目，如果是类视图（Class-Based View），可以通过 .as_view() 方法定义路由。在代码中搜索该方法的调用位置，往往能迅速定位到具体的视图类。
总结
掌握 F12 网络面板的使用，配合对前后端架构的理解，能极大提升问题排查效率。记住，XHR 和 Fetch 是核心，而路径搜索是连接前端现象与后端逻辑的桥梁。在实际开发中，养成随时观察 Network 面板的习惯，会让调试过程更加从容。