在 VScode 和 Chrome 中调试 Vue,未绑定断点

新手上路,请多包涵

我正在尝试调试我在 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 请求

谢谢,

原文由 Bwal 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 5.4k
2 个回答

当我在 VSCode 中使用未绑定断点时,我最终需要使用 --inspect--debug-brk=5858 标志启动进程。除此之外, launch.json 给我带来了很多麻烦,这些资源帮助了我

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
    }

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

},

原文由 James L. 发布,翻译遵循 CC BY-SA 4.0 许可协议

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

}

原文由 akik90 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题