（未成功）Chrome调试避免跳入第三方源码（设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本）

未可行，我发现把_next/static/chunks目录添加到忽略列表后，page.tsx文件也消失了，说是“映射不过去”？

🚀 Chrome 调试 React / Next.js 代码时避免跳入第三方源码的完整指南

在使用 Chrome DevTools 调试 React / Next.js 项目时，你可能遇到过这种让人崩溃的情况：

我在自己的组件里设置断点，点击「单步调试（F9 / F10）」后，代码却跳进了各种莫名其妙的 react-dom.development.js、next/dist/...、甚至是 Webpack 打包产物的源码里。
我只想调试自己的逻辑，结果调试器带我环游了整个 Node 模块世界。

别担心，这种情况几乎所有前端开发者都踩过。下面教你一劳永逸地让 Chrome 只在你自己的代码中调试。

---

一、问题的本质

React、Next.js 等现代框架经过构建工具（Webpack、SWC、Vite 等）打包后，会包含大量的第三方库代码。
调试器在执行单步（Step Into）时，不知道哪些是你写的、哪些是库，于是就会：

“很热情地”跳进 React 内部、Next.js runtime、polyfill、async helper 等文件。

要解决这个问题，我们需要告诉 Chrome 哪些文件可以“忽略”。

---

二、解决方案：设置「Blackbox Scripts」

Chrome DevTools 提供了一个非常实用的功能：Blackboxing（黑盒脚本）。

简单来说，你可以把某些文件或文件夹标记为“黑盒”，
调试器就不会再跳进去。

✅ 设置方法：

1. 打开你的项目并进入调试模式（Sources 面板）。
2. 在右侧调试器里找到你不想进入的文件（比如 react-dom.development.js）。
3. 右键该文件 → 选择 “Blackbox script”。
4. 之后调试时，Chrome 会直接跳过它。

---

三、全局配置：忽略 node_modules 下的所有代码

每次都手动标黑盒太麻烦，可以直接全局配置。

方法一：在 DevTools 设置中配置

1. 打开 DevTools → ⚙️（右上角设置）

2. 切换到 “Ignore List”（或 “Blackboxing”）标签页

3. 添加以下路径：

   **/node_modules/**
   **/next/**
   **/webpack/**
   

4. 保存后重新加载 DevTools。

这样，任何 node_modules 或 Next.js 的构建代码都不会再打扰你。

---

四、配合 Source Map 调试原始代码

Next.js 默认生成 Source Map，但有时候在生产模式或自定义配置下会被关闭。
确保在 next.config.js 中启用 source map：

const nextConfig = {productionBrowserSourceMaps: true,
};module.exports = nextConfig;

然后重新构建项目 (next build && next start)，Chrome 就能正确映射到你的原始源码文件。

---

五、调试技巧：高效使用快捷键

以下是一些能让你更舒服调试的快捷键（Windows 为例）：

操作	快捷键	说明
Step over（跳过函数）	F10	不进入函数内部
Step into（进入函数）	F11	进入当前函数（容易跳进第三方库）
Step out（跳出函数）	Shift + F11	快速返回上一层
Resume（继续执行）	F8	执行到下一个断点
Disable all breakpoints	Ctrl + F8	一键禁用所有断点

🔥 小技巧：如果你只想看自己写的逻辑，用 F10（跳过函数）代替 F11，可以大幅减少“掉进黑洞”的概率。

---

六、额外建议：使用 VS Code 的调试功能

如果你习惯用 VS Code，也可以直接在其中调试 Next.js 项目，体验比 Chrome 还流畅。

.vscode/launch.json 示例：

{"version": "0.2.0","configurations": [{"type": "node","request": "launch","name": "Debug Next.js","runtimeExecutable": "npm","runtimeArgs": ["run", "dev"],"port": 9229,"skipFiles": ["<node_internals>/**","node_modules/**","next/**"]}]
}

这样 VS Code 会自动跳过所有第三方源码，只调试你的代码。

---

🧭 总结

问题	解决方案
调试器跳进 React / Next.js 内部代码	使用 Blackbox scripts
每次都要手动标黑盒太麻烦	在 DevTools 的 Ignore List 全局配置
调试时映射不到原始文件	启用 Source Map
想更舒适地调试	使用 VS Code 调试器 或只用 F10

---

🎯 结语

Chrome 调试器功能非常强大，但默认设置对现代框架来说太“热心”了。
通过 Blackboxing + Ignore List + Source Map，
你可以让调试器只关注你写的代码，不再迷失在 react-dom 或 next/dist 的深处。

从此以后，调试不再是噩梦，而是一种享受。

---

是否希望我帮你把这篇文章排版成一篇可以直接发布在知乎 / 掘金 / 博客上的 Markdown 格式（含代码高亮和小标题优化）？