debugging vscode调试vue-cli应用程序无法在vscode中设置断点

vatpfxk5 于 2022-11-14 发布在 Vscode

关注(0)|答案(1)|浏览(257)

我有一个看起来像这样的monorepo，

- myapp
   - packages
     - web
     - components
     - libraries

应用程序的webroot是myapp/packages/web，当我在那个文件路径中运行yarn serve时，我得到了运行的vue应用程序，我想做的是调试我的vscode中的代码，但我似乎不能设置断点。
我的launch.json如下所示，

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "webapp",
            "url": "http://localhost:8081",
            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                    "webpack:///./*": "${webRoot}/*"
            },
            "skipFiles": [
                    "${workspaceFolder}/node_modules/**/*"
            ]
        }
    ]
}

如果我在myapp/packages/web/src/components/MyComponent.vue中设置一个断点，vscode告诉我，
无法设置某些断点
有什么原因吗？这个项目是一个Lerna mono repo，所以我也从packages/components和packages/library中提取代码。

debugging

来源：https://stackoverflow.com/questions/73705582/vscode-debug-vue-cli-app-cant-set-breakpoints-in-vscode

1条答案

按热度按时间

c9qzyr3d1#

结构和网站路径在monorepo中是不同的，在我的例子中，我使用WebPack在TypeScript库中工作，它花了很多试验和错误。有很多事情会影响调试器，我遵循了这些

我使用Chrome调试器（尽管它已被弃用，但我仍然喜欢它），如果您按照VSCode Chrome调试器源代码文档的说明操作，我发现在VSCode调试控制台中运行.scripts对我找到正确的路径覆盖有很大帮助
如果您对如何运行.scripts感到困惑，您可以查看我不久前发布的这个旧评论，它有一个打印屏幕
如果您使用的是TypeScript，那么第1步可能还不够，在我的情况下，直到我在package.json中添加了browser属性，并确保您还设置了在webpack.config.js中定义的mainFields（请参阅文档）属性，它才完全工作
注意：browser属性可能会导致一些Web应用程序出现问题（在我的例子中就是这样），我有一个脚本，当发布一个新的版本并在发布后将其放回时，该脚本会删除此属性

第一个
我的monorepo结构与您的不同，但我的最终launch.json设置可以在下面看到
我的结构

root
 |- examples
    |- webpack-demo
 |- packages
    |- common
    |- graphql
    |- odata
    |- ...

我的launch.json配置如下（这里是我自己的launch.json设置）

{
      "name": "Chrome Debugger",
      "type": "chrome",
      "request": "launch",
      "breakOnLoad": false,
      "url": "http://localhost:8888",
      "webRoot": "${workspaceRoot}",
      "userDataDir": "${workspaceRoot}/.chrome",
      "trace": true,
      "sourceMapPathOverrides": {
        "webpack:///${workspaceRoot}/packages/*": "${webRoot}/packages/*",
        "webpack://webpack-demo/../../packages/*": "${webRoot}/packages/*",
        "webpack:///./src/*": "${webRoot}/examples/webpack-demo/src/*",
        "webpack://webpack-demo/./src/*": "${webRoot}/examples/webpack-demo/src/*"
      }
    },

总之，你的配置和我的不同，运行.scripts应该能帮助找到正确的覆盖路径，我不知道还有其他方法可以找到它们。您可以看看我开放源代码项目Slickgrid-Universal，它是一个TypeScript/WebPack Lerna monorepo，（Lerna-Lite monorepo更精确）。希望这能帮上一点忙

赞(0）回复(0）举报 2022-11-14

我来回答

debugging vscode调试vue-cli应用程序无法在vscode中设置断点

1条答案

相关问题

热门标签

最新问答