web-dev-qa-db-fra.com

Débogage Vue en vscode et chrome, point d'arrêt non lié

J'essaie de déboguer un site Web Vue que j'écris dans VSCODE et Chrome. Lorsque je mets un point d'arrêt dans la fonction data() { return {...} } fonction, il s'arrête dessus, mais si j'essaie de le mettre dans une méthode dans un fichier Vue ou un service JS, une fois que je lance Chrome Par la configuration de débogage, les points d'arrêt deviennent non liés. Quelqu'un a-t-il des idées sur la façon de garder les points d'arrêt liés? Ceci est mon fichier de configuration:

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

    ]
}

Je comprends la configuration de débogage pour le serveur car dans les travaux.

Voici un exemple de méthode que j'essaie de déboguer (à partir du fichier Vue), j'ai mis un point de rupture à this.error = null. La méthode fonctionne normalement donc je m'attends à ce qu'elle s'arrête au point d'arrêt:

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

J'essaie aussi de déboguer mon service:

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

L'objet API crée simplement la demande Axios

Merci,

Ben

vue.jsdebuggingvisual-studio-codebreakpoints
2
Bwal

Eh bien, ce n'est pas vraiment une réponse mais j'ai redémarré mon Node serveur quelques fois (plus) fois et maintenant, il s'arrête au breakpiont. J'espère que le problème ne revient pas. Maintenant Il ne montre pas la valeur des variables pour une raison quelconque, mais je suppose que c'est un autre problème.

Merci pour l'aide :)

Ben

1
Bwal