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

Ouvrez la console et exécutez :

/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

Linux

Ouvrez la console et exécutez :

google-chrome --remote-debugging-port=9222

Plug d'installation de Visual Stuido Code -in

Cliquez sur le bouton d'extension dans la barre latérale gauche de Visual Studio Code, puis saisissez Debugger for Chrome dans la zone de recherche et installez le plug-in, puis saisissez-le à nouveau après le. l'installation est terminée, cliquez sur recharger pour redémarrer VS Code

Ajouter une configuration de Visual Studio Code

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

Modifier le sourcemap du webpack

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

• 
  

Démarrer le débogage

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 :

Partage d'expérience de débogage de point d'arrêt js incontournable

Visual Studio Code vs. Node .Explication détaillée du débogage des points d'arrêt à l'aide de js

Discussion sur plusieurs méthodes de débogage des points d'arrêt en php

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!