try/catch仅捕获同步错误和显式throw，无法捕获异步拒绝、语法错误、eval错误及未await的Promise错误；需配合.catch()、全局监听或正确await使用。
try/catch 捕获运行时错误的边界在哪
try/catch 只能捕获同步代码和 throw 抛出的错误，对异步操作（如 setTimeout、Promise 中未 await 的拒绝）或语法错误完全无效。
常见误用是把整个函数体包进 try 却忽略异步分支：
async function fetchData() {
try {
// 这里没 await，错误不会被捕获
fetch('/api/data').then(res => res.json());
} catch (e) {
console.error('永远不会执行');
}
}
- Promise 链中必须用
.catch()或在await外层加try/catch - 全局错误需监听
window.onerror或window.addEventListener('unhandledrejection') -
eval和动态import()的语法错误也无法被try/catch捕获
console.log 调试时容易忽略的三个细节
直接写 console.log(obj) 在 Chrome/Firefox 中看到的是「实时引用」，不是打印瞬间的快照——后续修改 obj 会导致控制台输出变化，造成误判。
- 查看快照：用
console.log(JSON.parse(JSON.stringify(obj)))（仅限可序列化数据） - 定位调用位置：加
console.log('debug:', obj, new Error().stack) - 避免污染生产环境：用
if (process.env.NODE_ENV !== 'production') { console.log(...) }或自定义debugLog函数
Chrome DevTools 中断点调试的关键操作
不依赖 debugger 语句也能精准停住：右键变量名选「Break on property access/modification」可监听对象属性变更；在 XHR/fetch 面板勾选「Break on fetch/XHR」能自动中断网络请求发起处。
立即学习“Java免费学习笔记（深入）”；
- 条件断点：右键断点 → Edit breakpoint → 输入表达式如
i === 5，避免循环中手动暂停 - 黑盒脚本：Sources 面板右键第三方库 → 「Blackbox script」，跳过其内部单步，聚焦自己代码
- 事件监听器断点：Elements 面板右侧「Event Listeners」→ 展开后勾选
click等，点击即停
错误堆栈里最该盯住的那几行
浏览器报错堆栈顶部往往是框架封装层（如 React、Vue 内部），真正出问题的代码通常在倒数第 2–4 行，尤其是带文件路径和行号的 at myModule.js:123:45 这类。
- 注意
webpack:///或http://localhost:3000/前缀，说明 source map 生效；若全是blob:或无路径，检查devtool配置是否为source-map或eval-source-map -
Uncaught (in promise)表示 Promise 拒绝未处理，优先查fetch后是否漏了.catch()或await外层缺try -
TypeError: Cannot read property 'x' of undefined不一定真在报错行，可能上游返回了undefined，要逆向追踪数据流
错误处理不是加一堆 try/catch 就完事，关键是分清错误类型、匹配对应工具链，再决定是拦截、上报还是重构逻辑。堆栈里夹着 node_modules 的那一行，往往只是表象。
