Comment déboguer le code Vue dans VSCode ?

Comment déboguer le code Vue dans VSCode ? L'article suivant vous expliquera comment déboguer Vue.js dans VS Code. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Recommandations associées : "Tutoriel vscode"

Étapes

• Ouvrez vscode et installez Debugger pour Chrome
• Utilisez vue cli3 pour créer une application vue
• Ajoutez le fichier "vue.config.js" au chemin racine du projet

module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}

• . lancement dans le fichier .vscode .json ajouté :

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

• Définissez un point d'arrêt
• Ouvrez votre terminal habituel dans le répertoire racine et utilisez Vue CLI pour démarrer l'application :
  npm run serve
• Allez dans la vue Débogage, sélectionnez la configuration "vuejs: chrome/firefox" , puis appuyez sur F5 ou cliquez sur le bouton de lecture vert.

• Avec une nouvelle instance de navigateur ouverte http://localhost:8080, votre point d'arrêt devrait maintenant être atteint

Pour plus de programmation- connaissances connexes, veuillez visiter : Cours de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!