修改node_modules代码无法触发热重载，DevTools断点调试却正常？

这和硬件完全没关系，核心是构建工具的缓存机制、库的发布形式，以及Source Map的特性导致的，具体原因和解决办法如下：

核心原因 #

• 构建工具缓存：Vite和CRA（基于Webpack）都会对node_modules里的第三方包做预构建或缓存处理。一旦包被缓存，后续开发服务启动时会直接复用缓存的编译结果，你修改node_modules里的代码后，没有触发缓存更新，所以运行时还是旧代码。
• 库的预编译发布：像@mui/material这类库，发布到npm的是已经编译打包好的产物（比如dist目录下的ES模块或CommonJS文件），而不是源码。你修改的可能是库的源码文件（比如src目录下的文件），但项目实际加载的是编译后的产物，自然看不到修改效果。
• Source Map的映射误导：DevTools里显示的代码是通过Source Map映射回的库源码，但浏览器实际执行的是编译后的压缩/打包代码。所以你在DevTools里给源码断点能命中，但修改本地node_modules的源码不会影响实际运行的代码。

解决办法 #

• 强制清除缓存
  • Vite：删除项目根目录下的node_modules/.vite文件夹，或者启动时加强制参数：vite --force
  • CRA：删除node_modules/.cache文件夹，或者用命令：npm start -- --reset-cache
• 直接修改编译后的产物：找到node_modules/@mui/material/dist目录下对应的编译后JS文件，修改这些文件的代码（加console.log或debugger），然后重启开发服务，就能看到效果。
• 用patch-package管理补丁：如果需要长期保留修改，推荐用patch-package工具。修改完node_modules里的代码后，执行npx patch-package @mui/material，会生成一个补丁文件，后续团队成员安装依赖时，补丁会自动应用，不用每次手动修改。

内容的提问来源于stack exchange，提问作者Ivan Kohut