AngularJS应用在Live Server可正常运行但在VS Code调试模式下异常

看起来你遇到的是调试模式下依赖库加载异常的问题，结合你描述的场景——Live Server运行正常但F5调试失败，且之前调试正常、在尝试附加调试后出现问题，我整理了几个可能的原因和对应的解决步骤：

1. 调试Chrome实例的缓存或残留会话干扰 #

之前尝试附加调试失败后，Chrome可能残留了旧的会话缓存或损坏的文件缓存，导致调试时加载的redux.js不完整或版本错误。

解决步骤：

• 关闭所有Chrome窗口（包括VS Code启动的调试实例）
• 打开Chrome的设置，清理缓存的图片和文件（可以选择只清理最近1小时的，避免丢失其他数据）
• 在VS Code的launch.json中添加userDataDir配置，让调试用Chrome使用独立的用户目录，彻底隔离缓存：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://192.168.1.2:5500/index.html",
      "webRoot": "${workspaceFolder}",
      "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-profile"
    }
  ]
}

• 重新启动VS Code并尝试F5调试

2. Launch.json的路径映射或URL配置问题 #

虽然你的webRoot配置看起来正确，但调试器可能在解析lib目录下的依赖时出现路径映射错误，导致加载的文件无效。

解决步骤：

• 尝试将URL从局域网IP改为localhost，调试器对本地回环地址的路径解析更稳定：
  "url": "http://localhost:5500/index.html"
• 添加明确的路径映射，确保调试器能正确关联本地lib目录和服务器路径：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5500/index.html",
      "webRoot": "${workspaceFolder}",
      "pathMapping": {
        "/lib": "${workspaceFolder}/lib"
      }
    }
  ]
}

3. 依赖库文件损坏或不完整 #

错误堆栈指向redux.js的apply方法未定义，说明调试时加载的redux.js文件可能损坏（比如之前附加调试时中断了文件下载），而Live Server可能加载的是缓存的完整版本。

解决步骤：

• 删除lib目录下的redux.js和ng-redux.js文件
• 重新下载对应版本的文件到lib目录（确保版本和之前一致，比如Redux的版本要兼容NgRedux和AngularJS 1.8.3）
• 启动调试后，打开Chrome开发者工具的Network标签，检查redux.js和ng-redux.js的加载状态（状态码应为200），并查看文件内容是否完整

4. 切换到调试附加模式（替代启动模式） #

既然之前尝试附加调试失败后出现问题，或许直接使用附加模式更稳定——先启动Live Server，再将调试器附加到运行中的Chrome实例。

解决步骤：

1. 修改launch.json为附加模式配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "attach",
      "name": "Attach to Running Chrome",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ]
}

2. 关闭所有Chrome实例，然后用命令行启动Chrome并开启调试端口：
   • Windows：chrome.exe --remote-debugging-port=9222
   • macOS：open -a "Google Chrome" --args --remote-debugging-port=9222
   • Linux：google-chrome --remote-debugging-port=9222
3. 在Chrome中打开你的应用（http://localhost:5500/index.html）
4. 在VS Code中按下F5，选择Attach to Running Chrome配置，完成调试附加

5. 检查VS Code插件版本兼容性 #

有时候Live Server或Chrome调试插件的版本更新会导致兼容性问题，尤其是你之前调试正常，回退配置后出问题的情况。

解决步骤：

• 打开VS Code的扩展面板，检查Live Server和Debugger for Chrome（或PWA Chrome）插件是否为最新版本
• 如果是最新版本，尝试回退到之前能正常调试的插件版本（在插件详情页点击“安装另一个版本”）

如果以上方案都无效，建议提供counterApp模块的初始化代码以及redux.js的版本信息，这样能更精准定位问题。

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