VS Code保存文件时冻结，Next.js v13开发环境异常求助

问题复现场景 #

• 基于Next.js v13的项目，通过npm run dev启动开发服务
• 项目运行一段时间后，修改文件并保存时VS Code出现冻结
• 终端显示“Debugger attached”提示，但未主动启用VS Code调试器或相关扩展
• 相同环境下的Vite项目无此问题，初步怀疑与Next.js热重载机制相关

可行排查与解决步骤 #

• 关闭自动调试器附加：打开VS Code设置，搜索debug.autoAttach，将其值设为off，避免系统自动附加调试器占用资源导致卡顿
• 分步排查扩展冲突：
  • 先禁用所有VS Code扩展，重启后运行项目测试是否还会冻结
  • 若恢复正常，再逐个启用扩展，每次启用后测试，定位出冲突的扩展
  • 重点排查Next.js相关扩展（如Next.js Developer Tools）、代码格式化类扩展
• 调整Next.js热重载配置：在next.config.js中修改webpack监听选项，优化热重载性能：

  module.exports = {
    webpackDevMiddleware: (config) => {
      // 调整监听参数，减少资源占用
      config.watchOptions = {
        poll: 800,
        aggregateTimeout: 300,
        ignored: /node_modules/,
      };
      return config;
    },
  };
  

• 清理项目缓存：
  • 停止开发服务，删除.next目录和node_modules/.cache目录
  • 重新执行npm install和npm run dev，避免缓存文件异常引发的问题
• 升级依赖与编辑器：
  • 将Next.js升级到最新稳定版本，修复官方已知的热重载bug
  • 更新VS Code到最新版本，确保编辑器与框架的兼容性

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