Partager la méthode de débogage de Vue avec des points d'arrêt dans Visual Studio Code

De nombreuses personnes sont habituées à déboguer le code Vue dans la fenêtre de débogage de Chrome, ou à utiliser directement console.log pour observer les valeurs des variables. C'est une chose très pénible et nécessite l'ouverture d'au moins 3 fenêtres en même temps. Personnellement, je suis plus habitué au débogage des points d'arrêt. Cet article explique comment configurer Visual Studio Code et Chrome pour déboguer le code directement aux points d'arrêt dans VS Code et voir la même valeur de console dans Chrome dans la fenêtre de débogage de VS Code.

Définissez le port de débogage à distance de Chrome

Nous devons d'abord démarrer Chrome avec le débogage à distance activé afin que VS Code puisse s'attacher à Chrome :

Windows

• Cliquez avec le bouton droit sur l'icône de raccourci Chrome et sélectionnez Propriétés

• dans la cible Une colonne, ajoutez --remote-debugging-port=9222 à la fin Attention à les séparer par des espaces
  

macOS
<.>

Linux

Plug d'installation de Visual Stuido Code -in

• Cliquez sur le bouton de débogage dans la barre latérale gauche de Visual Studio Code, cliquez sur les paramètres s'affichent dans la fenêtre de configuration de débogage contextuelle, puis sélectionnez Chrome, VS Code fonctionnera. Générez un répertoire .vscode dans le répertoire racine de la zone. Il y aura un fichier lanch.json et il s'ouvrira automatiquement <.>

. Utilisez le fichier de configuration suivant pour écraser le contenu du fichier lanch.json généré automatiquement.

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
  {
   "type": "chrome",
   "request": "attach",
   "name": "Attach to Chrome",
   "port": 9222,
   "webRoot": "${workspaceRoot}/src",
   "url": "http://localhost:8080/#/",
   "sourceMaps": true,
   "sourceMapPathOverrides": {
    "webpack:///src/*": "${webRoot}/*"
   }
  }
 ]
}

Si vous emballez un projet vue basé sur webpack, il peut y avoir des points d'arrêt . Pour les problèmes de correspondance, quelques modifications sont nécessaires :

Ouvrez le fichier index.js dans le répertoire config du répertoire racine
Modifiez le. dev node Modifiez la valeur devtool sous le nœud dev en 'eval-source-map'
et changez la valeur cacheBusting sous le nœud dev en false

• 
  

Tout est prêt, maintenant les résultats sont acceptés

Ouvrez la méthode de débogage à distance via la première étape Ouvrez Chrome
Exécutez npm run dev dans le projet vue pour démarrer le projet en mode débogage
Cliquez sur le bouton de débogage dans le barre latérale gauche de VS Code et sélectionnez Attacher à Chrome et cliquez sur le bouton de démarrage vert. La barre de contrôle de débogage apparaîtra dans des circonstances normales.
Vous pouvez désormais déboguer les points d'arrêt dans le code js du fichier .vue.
Recommandations associées :

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!