如何将本地code.html文件映射到远程URL以实现调试？

要将本地code.html映射到远程自动生成的页面代码，你需要在VS Code的调试配置中添加路径映射规则，具体操作如下：

1. 确认远程代码的实际路径 #

先打开已附加调试的Chromium开发者工具，切换到Sources面板，定位你部署的代码位置：

• 若代码是嵌入在远程页面的内联脚本，查看其标识（比如VMxxx格式的临时脚本名，或页面URL下的内联脚本条目）
• 若代码被转换为单独的远程脚本文件，复制该文件的完整URL（例如https://somewebsite.com/generated/embedded-code.js）

2. 修改launch.json添加路径映射 #

在launch.json的Attach to Chrome配置中，新增sourceMapPathOverrides字段，将远程路径映射到本地code.html：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 1234,
            "urlFilter": "https://somewebsite.com*",
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "deployment",
            // 添加路径映射规则
            "sourceMapPathOverrides": {
                // 示例1：匹配远程页面下的所有内联脚本内容
                "https://somewebsite.com/*": "${workspaceFolder}/code.html",
                // 示例2：匹配具体的远程动态脚本文件
                "https://somewebsite.com/generated/embedded-code.js": "${workspaceFolder}/code.html"
            }
        }
    ]
}

注意要点： #

• 如果代码是内联在远程页面中，需调整映射规则的匹配模式，确保精准命中你的代码块
• 若部署过程未生成Source Map，需修改CLI应用，在部署code.html时同步生成对应Source Map文件，并确保远程页面加载该文件，这样调试器能更精准关联本地代码

3. 验证调试效果 #

保存配置后重新启动调试（F5）：

• 直接在本地code.html中设置断点
• 触发远程页面的代码执行，断点应会命中，此时即可在本地文件中完成调试操作

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