在VScode和Chrome中调试Vue，未绑定断点 [英] Debugging Vue in VScode and Chrome, unbound breakpoint

问题描述

我正在尝试调试我在 VSCode 和 Chrome 中编写的 Vue 网站.当我在 data() { return {...} } 函数中放置断点时，它会停止，但是如果我尝试将它放在 Vue 文件或 JS 服务中的方法中，一旦我通过调试配置启动 Chrome，断点就会解除绑定.有没有人对如何保持断点有任何想法?这是我的配置文件:

I'm trying to debug a Vue website I'm writing in VSCode and Chrome. When I put a breakpoint in the data() { return {...} } function it stops on it, but if I try to put it in a method in a Vue file or a JS service, once I launch Chrome through the debug config the breakpoints become unbound. Does anyone have any ideas about how to keep the breakpoints bound? This is my config file:

"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>/**"
            ]
        }

    ]
}

我正在包括服务器的调试配置，因为在工作中.

I'm including the debug config for the server because in works.

这是我尝试调试的方法示例(来自 Vue 文件)，我在 this.error = null 处放置了一个断点.该方法正常运行，所以我希望它在断点处停止:

Here is an example of a method I'm trying to debug (from the Vue file), I put a break point at this.error = null . The method runs normally so I expect it to stop at the breakpoint :

        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
                }
            }
        } 

我也在尝试调试我的服务:

I'm also trying to debug my service:

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

Api 对象只是创建了 Axios 请求

The Api object just creates the Axios request

谢谢，

本

推荐答案

当我在 VSCode 中使用 Unbound Breakpoints 时，我最终需要使用 --inspect 或 -- 启动流程debug-brk=5858 标志.除此之外，launch.json 给我带来了很多麻烦，而这些资源帮助了

When I had Unbound Breakpoints in VSCode I ended up needing to start the process with the --inspect or --debug-brk=5858 flag. Beyond that, launch.json gave me lots of trouble, and these resources helped

• https://code.visualstudio.com/docs/nodejs/nodejs-debugging
• https://code.visualstudio.com/docs/nodejs/debugging-recipes
  • https://github.com/microsoft/vscode-recipes/tree/master/nodemon

  launch.json 示例:

  launch.json examples:

      {
          "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

  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",
   }
  

  },

  这篇关于在VScode和Chrome中调试Vue，未绑定断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！