如何配置Angular调试时启动常规Chrome浏览器？

开发者阿泽

2026-7-11

解决Angular调试时启动常规Chrome浏览器的配置方法

VS Code的Chrome调试器默认会启动一个干净的Chrome实例（使用临时用户数据目录），不会加载你本地的书签、主题和已登录账号信息，这就是Firebase谷歌认证无法正常复用登录状态的原因。

要让调试时启动你的常规Chrome实例，只需修改launch.json中的调试配置，添加userDataDir字段，指定本地Chrome的用户数据目录：

各系统Chrome用户数据目录路径

Windows：C:\\Users\\你的用户名\\AppData\\Local\\Google\\Chrome\\User Data（注意双反斜杠转义）
Mac：/Users/你的用户名/Library/Application Support/Google/Chrome/Default
Linux：/home/你的用户名/.config/google-chrome/Default

修改后的launch.json示例

将userDataDir添加到"Run & debug"配置中，替换成你自己的用户数据路径：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Run & debug",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: start",
      "url": "http://localhost:4200/",
      "sourceMaps": true,
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/src/*",
        "/*": "*",
        "/./~/*": "${workspaceFolder}/node_modules/*"
      },
      // 添加这一行，替换为你的实际路径
      "userDataDir": "C:\\Users\\你的用户名\\AppData\\Local\\Google\\Chrome\\User Data"
    },
    {
      "name": "ng test",
      "type": "chrome",
      "request": "launch",
      "preLaunchTask": "npm: test",
      "url": "http://localhost:9876/debug.html"
    }
  ]
}