断点失灵主因是加载时机、沙箱隔离与source map缺失：需在子应用生命周期钩子或动态import回调中设断点，开发时可关沙箱并确保开启source-map。
在微前端架构中，主应用（host）和子应用（remote）通常独立部署、独立构建，调试切换过程中的问题（比如路由跳转失败、生命周期未触发、样式/脚本冲突）确实容易“断点失灵”。关键不是“能不能打断点”，而是断点打在哪、什么时候生效、上下文是否正确。下面分几个实际场景说明怎么做。
确认子应用加载时机再打点
子应用往往通过动态 import、script 标签或 iframe 加载，代码不是一开始就存在。直接在子应用入口文件顶部打点，很可能没命中——因为文件还没下载或执行。
- 在主应用中，监听子应用的
load或mount生命周期钩子（如 qiankun 的mounted回调），在里面设断点或debugger - 如果用的是
import('/remote-app/entry.js')，断点应放在then回调里，而不是 import 语句本身 - 浏览器开发者工具中，打开 Sources → Page → 找到子应用的 JS 文件（可能带域名或 hash），手动定位到关键函数（如
bootstrap/mount）再打点
处理跨域/沙箱导致的断点失效
qiankun 等框架默认启用沙箱（proxy sandbox 或 snapshot sandbox），子应用运行在隔离环境，全局变量、this 指向、甚至 console 都可能被劫持。这时候断点看起来“停了”，但实际执行上下文不对。
- 开发阶段可临时关闭沙箱：
new Qiankun({ sandbox: false })，让子应用与主应用共享 window，断点更“真实” - 若必须开沙箱，优先在子应用自己的源码里打点（确保 source map 正确映射），避免在沙箱代理层（如 proxy.js）盲目打断点
- 检查 Sources 面板左侧是否显示 webpack:// 或正确的项目路径，而不是 (no domain) —— 若是后者，说明 source map 未加载，需确认子应用构建时开启了
devtool: 'source-map'
路由切换时调试生命周期钩子
主应用路由变化触发子应用卸载/挂载，但 unmount 或 update 可能不执行，或执行异常。这时要验证钩子是否注册成功、是否被覆盖。
- 在子应用导出的生命周期函数中第一行加
debugger，例如：export async function mount(props) { debugger; console.log('mounted'); } - 主应用中检查
registerMicroApps传入的配置，确认activeRule匹配当前 URL，否则根本不会触发 mount - 在浏览器控制台手动调用
start()后，再切路由，观察 Network 面板是否发起子应用资源请求（JS/CSS），没请求说明路由没匹配或预加载被禁用
利用浏览器的 “Blackbox” 和 “Event Listener Breakpoints” 辅助定位
有些问题不是代码逻辑错，而是事件流或资源加载异常。纯靠代码断点效率低。
- 右键 Sources 中的子应用 JS 文件 → Add to blackbox，避免进入框架内部（如 single-spa 的 patch 逻辑），聚焦业务代码
- 打开 Event Listener Breakpoints → DOM → load / unload / popstate，看路由切换时是否触发了预期事件
- Network 面板勾选 Disable cache 和 Preserve log，切换应用时观察是否有 404、CORS、MIME 类型错误（比如返回 HTML 却当 JS 执行）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
