如何在Edge/Chrome DevTools自动输出调用栈至控制台？含异步调用排查

一、自动输出调用栈到控制台 #

不用手动插桩，靠DevTools的断点日志就能搞定：

• 加个临时debugger断点，在断点的「条件」框里输入console.trace(); false——每次触发断点时会自动打印调用栈，而且因为false的存在，不会暂停代码执行。无限循环场景下会输出大量日志，你可以用控制台的过滤功能筛选特定函数，或者导出日志到本地用文本工具找重复出现的调用链，定位循环点。
• 如果循环没抛错，全局错误监听那套没用，断点日志是最直接的方式。

二、实时显示异步调用 #

最实用的是Performance面板：

• 点「录制」，跑个几秒再停止，在「调用栈」视图里展开「异步任务」，所有宏任务（setTimeout、fetch这类）和微任务（Promise）的调用链都能看到。要是无限循环是异步触发的，这里会重复出现一模一样的调用模式，一眼就能揪出来。
• 另外，Sources面板的调用栈区域勾选「Async」，暂停时能看到完整的异步调用上下文，但实时追踪还是Performance面板更直观。

三、异步调用触发时自动断点 #

DevTools自带针对性的断点功能：

• 要是是XHR/fetch这类异步请求，在Sources面板的「断点」侧边栏找「XHR/fetch断点」，可以按URL匹配，或者直接勾「Any XHR/fetch」，触发时自动暂停。
• 针对setTimeout、setInterval这类定时器，打开「事件监听器断点」，展开「Timers」勾选对应的选项就行。
• 通用方案是加条件断点：找到Svelte编译后异步逻辑的入口（比如schedule_update），设置断点条件，比如window.callCount = (window.callCount || 0) + 1; window.callCount > 100——调用次数超过阈值才暂停，跳过前面的正常迭代，直接抓循环的问题点。

无限循环额外排查技巧（针对Svelte编译代码） #

编译后的代码太绕，别硬着头皮逐行调：

• 用黑箱脚本：把Svelte的runtime脚本（比如svelte.js或者带bundle的打包文件）加入黑箱，调试时会自动跳过这些框架代码，只停留在你的业务逻辑上（如果能区分开的话）。
• 拍内存快照：Performance录制时勾选「Memory」，或者直接去Memory面板拍快照。无限循环会导致内存暴涨，看哪些对象在疯狂重复创建，对应的调用栈就是循环的源头。

内容的提问来源于stack exchange，提问作者Paul W