浏览器调试 vscode 中的 openlayers

问：

我想逐步执行 main.js 文件的代码，如此处找到的简单 openlayers web 地图所示：

https://openlayers.org/en/latest/examples/accessible.html

我正在使用最新版本的ol（8.1.0）。据我了解，openlayers 使用 vite。当我运行时，网页显示正常。npm start

在此处输入图像描述

为了使用 vscode 调试在浏览器中运行的“应用程序”，我尝试了 .这将启动 webmap。launch.json 文件如下所示：npm run dev

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Launch Edge",
            "url": "http://localhost:5173",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

我尝试在我的 main.js 文件中设置断点，但我在 vscode 中不断收到未绑定符号错误。上面写着：

未绑定的断点

无法设置某些断点。如果您遇到问题，可以对启动配置进行问题排查。

我在网上看了一下，还在scripts元素下的package.json文件中添加了以下内容：

"dev": "vite --port 5173"

当我在 vscode 中查看故障排除帮助时，它显示以下内容（省略路径前缀）：

在此处输入图像描述

我尝试从launch.json中删除webRoot行。我还尝试将 webRoot 更改为以下内容，但没有运气：

${workspaceFolder}/src ${workspaceFolder}/main.js ${workspaceFolder}/index.html

我不太遵循调试配置的整个过程。我只是希望能够通过按照描述进行设置来学习 openlayers，然后能够通过源代码进行调试。

欢迎任何想法。再次感谢。