VS Code 1.95.2升级后Launch Chrome调试yarn dev卡顿，但yarn start正常

问题情况 #

升级VS Code到1.95.2版本后，出现以下调试异常：

• 用> Launch Chrome (workspace)调试yarn dev启动的localhost:3000应用时，页面卡顿无法加载，但普通Chrome窗口打开该地址应用运行正常
• 切换到yarn start启动应用，调试功能恢复，但yarn start没有React自动刷新能力，且断点无法正常使用
• 调试控制台报错：

Could not read source map for file:///C:/git/app/Source/client/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/runtime.js: ENOENT: no such file or directory, open 'c:\git\app\Source\client\node_modules\next\dist\compiled@next\react-refresh-utils\dist\runtime.js.map'

原调试配置 #

{
    "folders": [
        {
            "path": "../../../../../../../git/app/Source/client"
        }
    ],
    "settings": {},
    "launch": {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch Chrome",
                "request": "launch",
                "type": "chrome",
                "url": "http://localhost:3000",
                "webRoot": "${workspaceFolder}"
            }
        ]
    }
}

修复方案 #

方案一：修正source map路径映射 #

在调试配置中添加sourceMapPathOverrides，修正Next.js编译文件的source map路径映射，修改后的配置如下：

{
    "folders": [
        {
            "path": "../../../../../../../git/app/Source/client"
        }
    ],
    "settings": {},
    "launch": {
        "version": "0.2.0",
        "configurations": [
            {
                "name": "Launch Chrome",
                "request": "launch",
                "type": "chrome",
                "url": "http://localhost:3000",
                "webRoot": "${workspaceFolder}",
                "sourceMapPathOverrides": {
                    "webpack://_N_E/*": "${webRoot}/node_modules/next/dist/*",
                    "webpack://*": "${webRoot}/*"
                }
            }
        ]
    }
}

方案二：跳过缺失source map的文件 #

直接通过skipFiles配置，让调试器跳过读取不存在的source map文件，避免卡顿：

{
    "name": "Launch Chrome",
    "request": "launch",
    "type": "chrome",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "skipFiles": [
        "${webRoot}/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js"
    ]
}

内容的提问来源于stack exchange，提问作者gene b.