window.onerror无法捕获HTML解析错误和JS语法错误，仅能捕获全局同步执行的JS运行时异常；需配合addEventListener('error')、unhandledrejection及try/catch等多层机制实现完整监控。
VSCode 本身不执行 HTML，所谓“未捕获的异常”一定来自 JavaScript 运行时，不是 HTML 解析错误，也不是 VSCode 报的错——你看到的红字堆栈，是浏览器控制台输出的，源头在你的 .html 文件里写的 JS 代码。
为什么 window.onerror 捕不到你改完就报的错
常见现象：刚写完一段 JS，刷新页面就看到控制台报 ReferenceError: xxx is not defined 或 TypeError: Cannot read property 'xxx' of null，但你在 window.onerror 里加了 console.log 却没触发。
-
window.onerror只捕获全局作用域下同步执行 JS 时抛出的未处理异常；而变量未声明、语法错误（如多了一个逗号）、const foo = ;这类解析期错误，根本不会进入执行阶段，直接中断脚本加载，window.onerror来不及注册就失效了 - 如果你把 JS 写在
<script>标签里且放在<body>底部，但 DOM 元素还没加载完就执行了document.getElementById('xxx')，返回null后再链式调用，这种TypeError是能被window.onerror捕到的——但前提是该<script>已成功加载并开始执行 - ES Module 场景下（
<script type="module">），顶层 await 或语法错误会直接导致模块加载失败，触发的是error事件而非window.onerror，得用addEventListener('error', e => {...}, { once: true })在<script>标签前监听
HTML 里怎么加 try/catch 才真正起作用
别对整个 <script> 块包一层 try { ... } 就以为万事大吉——它只覆盖内部同步代码，对异步回调、事件监听器、定时器里的错误完全无效。
- 对可能出错的同步操作单独包裹，比如 JSON 解析：
try { const data = JSON.parse(str); } catch (e) { console.warn('JSON 解析失败:', e.message); } - 事件监听器必须在回调内自己加
try/catch：btn.addEventListener('click', () => { try { riskyOperation(); } catch (e) { showError(e); } }); - Promise 链必须显式
.catch()或用async/await + try/catch，否则拒绝状态会变成 unhandledrejection，需额外监听window.addEventListener('unhandledrejection') - 避免在
setTimeout或requestAnimationFrame回调里裸写逻辑，统一包装：setTimeout(() => { try { step(); } catch (e) { logError(e); } }, 100);
VSCode 调试时看不到异常堆栈怎么办
不是 VSCode 没能力，是你没告诉它该连哪个浏览器实例——默认 F5 启动调试，如果没配好 launch.json，VSCode 根本不知道去哪找源码映射，自然断点不中、堆栈不全。
立即学习“前端免费学习笔记（深入）”；
- 确认已安装官方 Debugger for Edge/Chrome 插件（2026 年新版已合并支持）
-
.vscode/launch.json必须指定真实服务地址，例如 Live Server 启在http://127.0.0.1:5500，配置就得写"url": "http://127.0.0.1:5500/index.html"，不能留默认的localhost:8080 - 确保 HTML 文件里开启了 source map（如果是构建产物，检查打包工具是否生成了
.map文件并正确引用） - 在 Chrome DevTools 的 Sources 面板里手动加载本地文件夹（右键 → Add folder to workspace），可绕过调试配置直接映射源码
最常被忽略的一点：所有这些异常处理都建立在 JS 正常执行的前提下。如果你的 HTML 本身结构混乱（比如 <script> 放在 <head> 里却依赖了还没解析的 <body> 元素），浏览器静默修复后生成的 DOM 和你预期不符，后续 JS 操作必然失败——但这不是异常处理能解决的，得靠 html-validate 在保存时就拦住。
