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」能自动中断网络请求发起处。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求,仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法,让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能,对常用的、强大的包
立即学习“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 的那一行,往往只是表象。









