配置HTTPS=true后VS Code调试器无法读取自签名证书的Source Map

方案1：在调试配置中忽略证书错误 #

直接在launch.json的Chrome/Edge配置里添加运行时参数，跳过证书校验：

修改后的launch.json：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Edge",
      "request": "launch",
      "type": "pwa-msedge",
      "url": "https://dev-local.com:4200",
      "webRoot": "${workspaceFolder}",
      "runtimeArgs": ["--ignore-certificate-errors"]
    },
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "https://dev-local.com:4200",
      "webRoot": "${workspaceFolder}",
      "runtimeArgs": ["--ignore-certificate-errors"]
    }
  ]
}

添加runtimeArgs参数后，调试器启动浏览器时会忽略自签名证书的安全警告，正常加载Source Map。

方案2：将自签名证书导入浏览器信任库 #

如果不想全局忽略证书错误，可以手动信任项目的自签名证书：

• 直接在浏览器中访问https://dev-local.com:4200，点击页面「高级」选项，选择「继续访问dev-local.com（不安全）」
• 点击地址栏的「不安全」图标，选择「证书」→「详细信息」→「复制到文件」，导出证书文件
• 打开浏览器设置，找到「证书管理」，将导出的证书导入到「受信任的根证书颁发机构」区域
• 重启浏览器和VS Code调试器，即可正常读取Source Map

方案3：生成系统信任的自签名证书（推荐） #

使用mkcert工具生成被本地系统信任的证书，彻底解决证书信任问题：

1. 安装mkcert工具（根据系统选择对应的安装方式）
2. 在项目根目录运行命令生成证书：

   mkcert dev-local.com
   

3. 在项目的.env文件中添加证书路径配置：

   HTTPS=true
   SSL_CRT_FILE=./dev-local.com.pem
   SSL_KEY_FILE=./dev-local.com-key.pem
   

4. 重启React开发服务器和VS Code调试器，此时证书已被系统信任，调试器可正常读取Source Map

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