控制台红字报错是定位前端问题的第一线索，优先识别TypeError、ReferenceError、SyntaxError三类高频错误，点击报错链接跳转源码，验证变量存在性并检查网络请求阻断。
打开控制台并识别报错类型
网页功能异常、按钮无响应、图片不加载时，控制台里的红字就是第一线索——它不是噪音，而是浏览器在告诉你哪一行代码崩了、哪个对象丢了、哪段语法写错了。按 Ctrl + Shift + J（Windows/Linux）或 Cmd + Option + J（macOS）直接唤出Console面板，别点Elements或Network；若快捷键无效，先点一下页面空白处再试。
看到红字报错后，先看前缀：以 TypeError 开头说明调用了不存在的方法或访问了undefined的属性；ReferenceError 表示变量根本没声明；SyntaxError 是代码写漏括号、分号或引号配对错误——这三类占全部红字报错的87%以上，定位时优先盯住它们。
点击报错链接跳转到问题源码
每条红字末尾都带文件名和行号，例如 script.js:42:15，这就是精确坐标。直接点击它，开发者工具会自动切到Sources面板，并高亮第42行第15列。
如果点击后跳转失败，说明该JS是内联脚本（写在HTML里的<script>标签中）或已被压缩混淆。此时不要硬找，先右键报错信息→【Open in Sources panel】，或手动在Sources的Page标签下展开当前网页，逐个点开<script>块查找对应逻辑。</script>
注意：若跳转后显示“Source map not found”，说明你正在看压缩后的代码，真实行号已失效——必须切换到未压缩的开发版本，或启用zeus://flags中的#enable-javascript-source-maps再重试。
验证关键变量是否存在
很多TypeError本质是“还没准备好就去用”。比如报错 Cannot read property 'style' of null，说明 document.querySelector('.btn') 返回了 null，元素压根没渲染出来。
第一步：在报错语句前加一行 console.log(document.querySelector('.btn'))，回车执行，看控制台输出是不是 null；
第二步：确认该元素是否在 DOMContentLoaded 之后才插入——如果是动态渲染（如 Vue/React 组件 mount 后追加），就把调试代码包进 document.addEventListener('DOMContentLoaded', () => { /*你的代码*/ })；
第三步：对可能为空的对象链，立刻改用可选链操作符，把 obj.user.profile.avatar.src 改成 obj?.user?.profile?.avatar?.src，避免整行崩溃。
检查网络请求是否阻断执行流
部分红字报错看似是JS语法问题，实则是 fetch 或 XMLHttpRequest 失败后，后续代码因 response 数据缺失而报错。这类问题不会在Console顶部显眼报出，得往下翻。
方法一：切换到 Network 面板 → 刷新页面 → 筛选 XHR 或 Fetch → 找状态码为 4xx/5xx 或时间超长（>5s）的请求 → 点击它 → 查看 Preview 或 Response 标签页是否为空或返回错误 JSON；
方法二：回到 Console，输入 window.onerror = (msg, url, line) => console.log('全局错误:', msg, '位置:', url, line) → 刷新 → 若新出现“Failed to load resource”类提示，说明某个脚本或CSS加载失败，直接导致后续JS无法执行；
关键前提：Network 面板必须勾选 Preserve log，否则跳转后记录清空，你永远看不到首屏加载时的真实失败请求。
