DevNull 知识库

Appearance

第 08 篇｜建立排错直觉：看着一堆红字报错，怎么知道是谁的锅？ ​

导读：
所有初学者的噩梦时刻，莫过于点击一个按钮，页面突然“白屏”或者“毫无反应”。
颤颤巍巍打开控制台，屏幕上炸开一整屏猩红色的英文报错，密密麻麻几十行。新手往往瞬间心跳加速：“完了，项目彻底报废了。”
别慌！在程序员眼里，红字报错不是病危通知书，而是系统给你的“破案线索”。
这一篇，我们教你用两招把现代浏览器变成你的“核磁共振仪”，听懂系统的呼救声，用最地道的姿势把错误投喂给 AI，一轮对话就命中问题。

一、 程序员的听诊器：按一下 F12 打开新世界 ​

当你的网页出现异常，直接对着屏幕发呆没有任何意义。因为所有的蛛丝马迹，都被浏览器悄悄记录在后台。

在任何网页上，按下键盘上的 F12（Mac 电脑按 Command + Option + I，或者在页面空白处点右键 ➔ “检查” / Inspect），你就会唤出整个互联网最重要的调试工具——开发者工具（DevTools）。

开发者工具里有花里胡哨的一堆标签页，不要被吓退。作为总指挥，你终生只需要紧盯其中两个窗口：

                    ┌───────────────────────────────────┐
                    │       浏览器开发者工具 (F12)         │
                    └─────────────────┬─────────────────┘
                                      │
              ┌───────────────────────┴───────────────────────┐
              ▼                                               ▼
     【Console（控制台）】                           【Network（网络）】
     负责：看前端的“内部神经中风”                   负责：看前后端传菜的“物流纠纷”
     特征：页面逻辑崩了、代码打错字、变量找不着     特征：接口报红、数据拉不回来、跨域拦截

二、 前端内部中风：Console（控制台）里的典型死相 ​

如果你的页面完全白屏，或者点按钮毫无反应，第一时间切到 Console 标签页。

Console 就像前端代码的“大喇叭”。只要前端执行过程中被某一行代码噎死，它就会立刻吐出一大片红字。

1. 经典绝症：TypeError: Cannot read properties of undefined ​

  • 人话翻译：“你试图去摸一个根本不存在的人的口袋。”
  • 生活场景：前端页面准备显示 用户.名字，结果这时候后端还没把用户资料送过来，“用户”本身是个空的空气（undefined），代码却急着去读取它的 名字，系统当场休克卡死。
  • 判定结论：纯前端逻辑顺序错误，或者没做空值容错处理。

2. 看懂堆栈：直击“案发第一现场” ​

控制台红字虽然有几十行，但大部分是底层框架的连锁反应，属于废话。
你的眼睛只需要看两处：

  1. 红字的第一行：它用最简短的英文概括了死因（比如上面提到的 TypeError）；
  2. 红字最右侧的文件链接：比如 UserCard.jsx:42。这等于凶手在案发现场留下的纸条——明明白白告诉你：“我是在 UserCard 文件第 42 行暴毙的！”

三、 物流传菜纠纷：Network（网络）里的典型翻车 ​

如果页面没有白屏，Console 里也没报错，但你点“提交”，系统一直在转圈，或者弹窗提示“获取数据失败”，这时候要立刻切到 Network 标签页。

Network 记录了浏览器发出的每一次“外卖订单（请求）”。

     Name (接口名称)      Status (状态码)     Type       Time
  ┌────────────────────────────────────────────────────────┐
  │  getUserInfo          200 (绿色/正常)    fetch      45ms │
  │  updateProfile        500 (红色/报错) ◄─ fetch     120ms │ ◄── 抓到凶手！
  └────────────────────────────────────────────────────────┘

把界面上的状态按颜色扫一眼，只要看到红色的行，用鼠标点进去，这就是翻车现场：

1. 状态码断案（复习第 05 篇） ​

  • 显示 404：请求的接口地址拼错了，门牌号不存在。
  • 显示 500：后端云端厨房炸了。这时候不要看前端代码了，问题出在后端服务内部。

2. 新手头号梦魇：CORS 跨域安全拦截 ​

你在 Network 里经常会遇到一个看起来极其恐怖的报错：
Access to fetch at '...' has been blocked by CORS policy。

很多新手被这一长串英文吓懵了。用大白话解释，它极其简单：

  • 生活比喻：你是 A 小区的业主（你的前端运行在 localhost:3000），你突然伸手翻墙去掏 B 小区（运行在 localhost:8000 的后端）的垃圾桶。
  • 浏览器的安保队长（CORS 机制）非常警惕，立刻冲出来按住你：“住手！为了防止跨站偷窃，除非 B 小区在门口贴个告示说‘允许 A 小区访问’，否则我绝对不把数据交给你！”
  • 责任方判定：代码本身没有错，纯粹是浏览器的跨域安全策略拦截了！
    解决办法永远只有一种：去后端配置里加上“允许跨域名单”。

四、 架构师级投喂法：让 AI 一击命中的“黄金三件套” ​

这是区别小白与高手的最关键分水岭。

看看绝大部分新手的低效提问：

❌ “AI，我的项目坏了，点击没反应，怎么办？”
❌ “页面白屏了，你刚才给我的代码有问题，重写一份！”

AI 面对这种没有任何线索的指令，只能像算命先生一样瞎猜，胡乱给你改一通，结果把本来对的代码也改烂了。

真正的高手，向 AI 报 Bug 永远只喂“黄金三件套”：

【第一件：用户动作】 ──► 我刚刚在界面上做了什么具体操作
【第二件：案发现场】 ──► F12 控制台的具体红字 / Network 接口报错截图或复制文本
【第三件：预期结果】 ──► 我本来期望界面发生什么

看看这套标准的“一击必杀” Prompt 模版： ​

“AI，我遇到了一个前端交互 Bug：
1. 操作行为：我在个人主页点击了‘保存昵称’按钮；
2. 控制台报错：F12 Console 抛出以下红字：
Uncaught TypeError: Cannot read properties of undefined (reading 'token') at handleSave (Profile.jsx:35)
同时 Network 标签页中的 /api/user/update 请求返回了 401 Unauthorized；
3. 预期效果：期望顺利提交新昵称，并弹出‘修改成功’的绿色提示。
请根据上面的堆栈和状态码，精准指出问题根源并给出修复方案。”

当你把这套线索甩过去：

  • AI 不需要猜是前端还是后端的问题（你已经指出了 401 和第 35 行）；
  • 它的推理神经元会被极度收敛在最小故障面上；
  • 大概率第一轮回复就能给出靠谱的补丁，不用来回猜。

📝 结语与本篇自查（模块二完结） ​

恭喜你！到这里，你已经扎扎实实学完了【模块二：技术通识】的全部 4 篇内容。
你不仅搞懂了互联网的运作骨架，分清了系统各部件的职责，更学会了像老手一样冷静看病。

最后做个收官自查：

  1. 当你点击页面上的一个按钮，页面没有跳转，但 Console 里干干净净一条红字都没有，你应该去哪里找线索？
    (去 Network 标签页查看是否有网络请求发出，看该请求的状态码是不是卡在挂起（Pending）或返回了错误。)
  2. 在浏览器控制台看到 blocked by CORS policy，第一反应应该让 AI 去改前端样式，还是去后端添加跨域白名单？
    (去后端或者网关配置里添加跨域许可头，这是浏览器的跨域安全策略，前端改样式毫无意义。)
  3. 向 AI 报告错误时，最致命的坏习惯是什么？
    (只说“坏了/白屏了”，不提供具体的报错日志、错误行号和复现操作步骤。)

下一篇预告：
认知的内功已经彻底大成，行话你也全听懂了。
从下一篇起，我们将真正握紧手中的武器，正式跨入【模块三：工程实战 —— 驾驭 AI 构建专属工作流 (Harness & Flow)】！
在这一模块，我们将告别网页端敲代码的过家家模式，全景拆解目前最顶级的 AI 编程神器：
从爆火的 Cursor、Windsurf，到前沿极客专属的终端 Agent（如 Claude Code / Aider），告诉你普通人到底该怎么选兵器、怎么配环境！
敬请期待：《第 09 篇｜AI 兵器库选型：从 Cursor、Windsurf 到桌面 Agent》！