VScode和Chrome中的Vue，未绑定断点

osh3o9ms 于 7个月前发布在 Vue.js

关注(0)|答案(5)|浏览(341)

我正在调试一个我用VSCode和Chrome编写的Vue网站。当我在data() { return {...} }函数中放置断点时，它会停止在它上面，但是如果我试图将它放在Vue文件或JS服务中的方法中，一旦我通过调试配置启动Chrome，断点就会被解除绑定。有人知道如何保持断点绑定吗？这是我的配置文件：

"version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "pwa-chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/client/meet-for-lunch/src",
            "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Debug server",
            "runtimeExecutable": "nodemon",
            "program": "${workspaceFolder}/server/bin/www",
            "restart": true,
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "skipFiles": [
                "<node_internals>/**"
            ]
        }

    ]
}

字符串
我包括调试配置的服务器，因为在工程。
下面是我尝试调试的一个方法的例子（来自Vue文件），我在this.error = null处放置了一个断点。该方法正常运行，所以我希望它在断点处停止：

methods: {
            async login() {
                try {
                    this.error = null;
                    const response = await AuthenticationService.login({
                        email: this.email,
                        password: this.password
                    })
                    this.$store.dispatch('setToken', response.data.token)
                    this.$store.dispatch('setUser', response.data.user)

                }
                catch (err) {
                    console.log(`An error has occured: ${JSON.stringify(err.response)}`)
                    this.error = err.response.data.error
                }
            }
        }

型
我也在调试我的服务：

login(credentials) {
        return Api().post('/login', credentials)
    }

型
API对象只是创建Axios请求
谢谢你，
Ben

vue.js

来源：https://stackoverflow.com/questions/62384636/debugging-vue-in-vscode-and-chrome-unbound-breakpoint

5条答案

按热度按时间

wribegjk1#

https://www.codegrepper.com/code-examples/javascript/vuejs+vscode+unbound+breakpoint
经过一整天的搜索，这解决了我的问题

{
"version": "0.2.0",  
"configurations": [  
  {
    "name": "WSL Chrome",
    "type": "chrome",
    "request": "launch",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}/src",
    "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*"
    }
  }
]

字符串
}

赞(0）回复(0）举报 7个月前

s6fujrry2#

当我在VSCode中使用Unbound Breakpoints时，我最终需要使用--inspect或--debug-brk=5858标志启动该过程。

launch.json示例：

{
        "type": "node",
        "request": "attach",
        "name": "Node: Nodemon",
        "processId": "${command:PickProcess}",
        "restart": true,
        "protocol": "inspector",
    },
    {
        "name": "Launch tests via NPM",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
            "run-script", "testDebug"
        ],
        "port": 5858
    }

字符串
package.json

"scripts": {
  "start": "NODE_PATH=./src DEBUG=express:* NODE_ENV=dev nodemon -w src --ext ts --exec node --inspect -r tsconfig-paths/register -r ts-node/register src/index.ts",
  "testDebug": "NODE_ENV=test ts-mocha --debug-brk=5858 --paths -p tsconfig.json",
 }

型

赞(0）回复(0）举报 7个月前

vom3gejh3#

好吧，这不是一个真正的答案，但我已经重新启动了我的Node服务器几次（更多），现在它停止在断点。我希望这个问题不会再出现。现在他没有显示变量的值出于某种原因，但我想这是另一个问题。
谢谢你的帮助：）
Ben

赞(0）回复(0）举报 7个月前

7vhp5slm4#

我在我的vueJS项目中遇到了同样的问题。在对文件等进行任何更改之前尝试一下，这为我解决了这个问题：
在ClientApp/App文件夹中：1.删除node_modules文件夹2.删除package-lock.json文件3.打开ClientApp/App文件夹的cmd提示符4.使用cmd“npm i”
最后一步将重新安装所有的节点模块。我遇到的问题一定是节点模块冲突。

赞(0）回复(0）举报 7个月前

gmol16395#

截至2022年5月…
注意，如果你使用vscodium 和firefox**，你需要直接从marketplace安装firefox-devtools：https://marketplace.visualstudio.com/items?itemName=firefox-devtools.vscode-firefox-debug
除此之外，launch.json配置是标准的：

{
      "name": "Vue:Client",
      "type": "firefox",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [
        {
          "url": "file://",
          "path": ""
        }
      ]
    },

字符串
扩展建议我插入这些pathMappings。
请参阅https://github.com/firefox-devtools/vscode-firefox-debug/issues/267

赞(0）回复(0）举报 7个月前