Console：浏览器里的前端事故记录

什么时候第一时间打开 Console

• 页面白屏。
• 按钮点了没反应。
• 某个组件突然不显示。
• 页面数据显示 undefined。
• Network 没有出现预期请求。
• AI 说“前端已修复”，你要验证有没有新错误。

Console 主要看到浏览器前端 JavaScript 的信息。后端 500 的详细调用栈通常要去服务器日志。

打开方式

Mac       Command + Option + J
Windows   Ctrl + Shift + J

也可以右键页面 → Inspect / 检查 → Console。

第一次操作：确认它真的在当前页面工作

在最下面 > 后输入：

document.title

按回车，应该看到当前网页标题。

再输入：

window.location.href

会看到当前页面地址。

这些操作只读取页面，不会修改项目文件。

排错前先清理现场

1. 点击 Console 左上角清空按钮。
2. 回到页面，严格走一次复现步骤。
3. 只观察这次操作新出现的错误。
4. 从最早的红色错误开始。

如果不清空，昨天的错误、浏览器扩展错误和当前问题会混在一起。

一条错误逐段读

Uncaught TypeError: Cannot read properties of undefined (reading 'trim')
    at handleSubmit (MessageForm.tsx:24:18)
    at onClick (MessageForm.tsx:51:7)

先抓三件事：

错误类型      TypeError
具体矛盾      undefined 却要读取 trim
第一处文件    MessageForm.tsx 第 24 行

点击 MessageForm.tsx:24:18，浏览器通常会跳到 Sources 对应位置。

怎样检查一个变量实际是什么

假设代码怀疑 text：

console.log('text value:', text)
console.log('text type:', typeof text)

运行页面后可能看到：

text value: undefined
text type: undefined

现在有证据说明 .trim() 前面的 text 不存在。

不要只打印：

console.log('到了')

更有用的是同时打印步骤名和关键值：

console.log('[handleSubmit] before validation', { text })

几种常见颜色和类型

Error      红色，功能可能中断
Warning    黄色，可能还能运行但存在风险
Info/Log   普通调试信息

黄色不一定要全部马上修，红色也不代表整个项目报废。先看是否和当前复现动作同时出现。

浏览器扩展错误怎样排除

如果错误文件名包含陌生扩展地址、chrome-extension://，它可能来自浏览器扩展。

判断方法：

1. 错误是否在你的操作后出现。
2. 文件路径是否属于当前项目。
3. 使用无痕窗口或暂时禁用扩展后是否消失。

不要因为任意红色错误就让 AI 重写项目。

Console 没有错误说明什么

只说明没有捕获到明显前端异常，不代表请求、后端或数据库一定成功。

下一步：

点击后没有请求      继续检查事件和调试日志
有请求              切换 Network 查看状态码和 Response
页面样式问题          使用 Elements 和 Styles

不要把秘密打印到 Console

不要输出：

API Key
Authorization Token
完整 Cookie
数据库连接串
用户私人信息

浏览器 Console 对当前用户可见，也可能被截图或日志工具收集。

不要粘贴不理解的陌生代码

有人可能让你把一长段代码粘到 Console。它能以当前页面身份读取或操作内容。只运行你理解、来源可信、范围明确的代码。

交给 AI 的 Console 材料

复现步骤：输入“你好”后点击保存
第一条错误：完整原文
文件和行号：MessageForm.tsx:24:18
Network：没有 POST /api/messages
相关代码：第 18 到 30 行，已删除敏感值

这比“控制台红了”有效得多。

官方参考：Chrome DevTools Console。

点击按钮后 Console 指向 MessageForm.tsx:24，Network 没有请求。第一步应该改数据库吗？

答案：不应该。请求还没发出，先打开第 24 行检查前端异常。