无法自动抓取 script 执行前后堆快照，需手动或脚本配合：方法一用断点+手动快照对比；方法二注入 console.time 和 performance.memory 辅助标记；方法三通过 puppeteer 调用 cdp 自动化捕获。
直接在控制台的 Memory 面板无法自动“抓取 script 标签执行前后的堆快照”，因为 Memory 面板本身不监听 DOM 变化或 script 加载事件。但你可以通过手动+脚本配合的方式，在 script 执行关键节点主动触发堆快照，从而对比前后内存状态。
明确目标：什么是“script 标签执行前后”
通常指以下任一场景：
- 页面中某个
<script src="xxx.js"></script>开始加载并执行完毕的瞬间 - 内联
<script>...</script>中代码运行前/后 - 动态插入 script（如
document.createElement('script')）触发执行的前后
Chrome DevTools 的 Memory 面板只提供手动录制（Record）、捕获（Take Heap Snapshot）和分析功能，不支持按 JS 执行时机自动快照——必须由你主动调用 performance.memory 或借助调试 API 控制时机。
方法一：手动 + 断点法（适合调试单个 script）
适用于你想观察某段内联脚本或已知位置的外链脚本：
- 打开 DevTools → Memory 面板 → 点击左上角 Capture heap snapshot 按钮，拍下「执行前」快照（Snapshot 1）
- 切到 Sources 面板，在目标 script 的第一行设断点（比如内联 script 的第一行，或外链 JS 的入口函数）
- F8 继续执行，让断点停在 script 开始处 → 再次在 Memory 面板点击 Capture heap snapshot，得到「即将执行时」快照（Snapshot 2）
- F8 运行完 script → 再拍一次（Snapshot 3），即「执行后」
- 在快照列表中选中 Snapshot 1 / Snapshot 3 → 点击右上角 Comparison 视图，选择对比差异（如 “Objects allocated between Snapshot 1 and Snapshot 3”）
方法二：用 console.profile() + 自动快照（需配合代码注入）
如果你能修改页面代码（如本地调试或测试环境），可在 script 前后插入快照触发逻辑：
- 确保页面已启用 “Enable JavaScript memory profiling”（DevTools → Settings → Preferences → Memory → ✅ Enable JavaScript memory profiling）
- 在目标 script 前加：
console.profile('before-script'); // 启动性能分析（可选）<br>if (window.chrome && chrome.devtools) {<br> // 主动请求 DevTools 拍摄快照（仅限 Chrome 扩展或本地调试，普通网页会报错）<br> // ⚠️ 注意：此 API 不是公开 Web API，不可用于生产页 - 更可靠的做法：使用
performance.memory辅助判断 + 手动标记时间点
例如：console.time('script-execution');<br>// 拍下快照前，打印当前内存基线<br>console.log('Before:', performance.memory.usedJSHeapSize);<br>// ...你的 script 逻辑<br>console.log('After:', performance.memory.usedJSHeapSize);<br>console.timeEnd('script-execution');再配合手动快照，定位对应时刻
方法三：用 Puppeteer + Chrome DevTools Protocol（自动化场景）
适合 CI、批量分析或无法手动操作的环境：
- 启动 Chrome 并启用
--remote-debugging-port=9222 - 用 Puppeteer 连接，监听
Network.requestWillBeSent捕获 script 请求 - 在
Runtime.evaluate执行目标 script 前后，调用 CDP 的HeapProfiler.takeHeapSnapshot - 导出快照文件（.heapsnapshot），用 DevTools 打开对比
示例关键代码片段（Puppeteer）：
await client.send('HeapProfiler.enable');<br>await client.send('HeapProfiler.takeHeapSnapshot'); // 执行前<br>await page.evaluate(() => {/* 注入并执行目标 script 逻辑 */});<br>await client.send('HeapProfiler.takeHeapSnapshot'); // 执行后
不复杂但容易忽略：快照命名建议带上下文（如 “before-init.js”, “after-chart-render”），方便后续识别；对比时重点关注 Constructor 列中增长明显的对象类型（如 Closure、Array、Object、Detached DOM tree），它们往往是内存泄漏线索。
