使用Chrome DevTools、React Developer Tools、Vue.js DevTools、Lighthouse、Angular的Augury及APM工具可实时监控性能瓶颈与内存泄漏，开发阶段推荐结合浏览器内置工具与框架专用扩展进行分析，生产环境则通过Sentry等SDK实现持续监控，定期采样以预防问题积累。
要实时监控代码的性能瓶颈和内存泄漏，可以借助一些开发工具和浏览器扩展，它们能帮助你在开发或调试阶段快速发现问题。以下是几款实用且高效的扩展工具：
1. Chrome DevTools（内置功能）
Chrome 浏览器自带的 DevTools 是最常用的前端性能分析工具，无需额外安装扩展，但需要掌握其使用方法。
- Performance 面板：录制页面运行时的 CPU、渲染、脚本执行等数据，可精准定位卡顿和耗时操作。
- Memory 面板：通过堆快照（Heap Snapshot）、分配时间线等方式检测内存泄漏，查看对象引用关系。
- Allocation instrumentation on timeline：实时观察内存分配情况，找出持续增长的对象。
2. React Developer Tools（React 专用）
如果你使用 React，这个扩展不仅能调试组件结构，还能辅助性能分析。
- 启用 Profiler 功能，可记录组件的渲染耗时，识别重渲染问题。
- 结合
React.memo、useCallback等优化手段，快速发现不必要的更新。
3. Vue.js DevTools（Vue 项目适用）
针对 Vue 应用，该工具提供组件层级、响应式状态和性能追踪。
- Vuex 和组件状态监控有助于发现因状态管理不当导致的内存堆积。
- 性能面板可测量组件初始化和更新时间。
4. Lighthouse（集成于 Chrome）
虽然主要用于性能评分，但 Lighthouse 能生成详细的性能报告，提示潜在瓶颈。
- 分析加载性能、内存使用趋势、主线程工作负载。
- 建议优化点如减少 JavaScript 执行时间、避免内存泄漏模式。
5. Augury（已整合进 Angular DevTools）
专为 Angular 设计的调试工具，支持路由、依赖注入和性能分析。
- 可视化变更检测频率，帮助识别性能热点。
- 检查组件生命周期与内存驻留情况。
6. 使用第三方 APM 工具的浏览器 SDK（非扩展，但可嵌入）
像 Sentry、New Relic Browser、DataDog RUM 这类服务虽不是传统浏览器扩展，但可通过脚本集成到项目中，实现生产环境下的实时监控。
- 自动捕获内存异常、长任务、频繁垃圾回收等信号。
- 结合用户行为分析，定位特定操作引发的性能退化。
基本上就这些。开发阶段优先使用 Chrome DevTools 搭配框架专用工具，上线后可接入 APM 服务做持续监控。关键是养成定期采样分析的习惯，避免问题积累。
