Comment implémenter le débogage de point d'arrêt Vue dans Visual Studio Code

Cet article résume la méthode et le partage d'expérience du débogage de point d'arrêt Vue dans Visual Studio Code. Les amis dans le besoin peuvent s'y référer.

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, sélectionnez Propriétés

• Dans la colonne cible, ajoutez à la fin --remote-debugging-port=9222 Notez que

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-in d'installation de Visual Stuido Code

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

Ajouter un visuel. Configuration de Studio Code

• Cliquez sur le bouton de débogage dans la barre latérale gauche de Visual Studio Code, cliquez sur l'engrenage des paramètres dans la fenêtre de configuration de débogage contextuelle, puis sélectionnez Chrome, VS Code générera un répertoire .vscode dans le répertoire racine de l'espace de travail, et il y aura un fichier lanch.json et s'ouvrira automatiquement

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

{
 // 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 plan source du webpack

Si vous emballez un projet vue basé sur webpack, il peut y avoir un problème de non-concordance de point d'arrêt, certains des modifications sont nécessaires :

• Ouvrez le fichier index.js dans le répertoire config du répertoire racine

• Changez le devtool sous le nœud dev Change la valeur à 'eval-source-map'

• Changez la valeur cacheBusting sous le nœud dev en false

Ce qui précède est ce que j'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter la fonction d'annulation et de rétablissement dans Immutable.js (tutoriel détaillé)

Comment résoudre le iview select Le problème des options de liste déroulante égarées, les opérations spécifiques sont les suivantes

Comment implémenter la liste déroulante de sélection via Vue.js, les opérations spécifiques sont les suivantes

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!