Article de: https://www.cnblogs.com/xifengxiaoma/p/9530737.html
debug Chrome directement dans la fenêtre de débogage du code Vue pour la gêne occasionnée, mais heureusement le code Visual Studio fournit des Debugger pour Chrome plug-in, et peut être vu à travers la configuration Chrome directement dans le code VS point d'arrêt débogage du code, la fenêtre de débogage dans le code VS la même console valeurs, cet article présentera le processus de configuration.
1. Ouvrez le port Chrome débogage à distance
Tout d'abord, nous devons commencer à Chrome dans le débogage à distance est ouvert, de sorte VS code à insérer Chrome.
les fenêtres
- Faites un clic droit sur l'icône de raccourci Chrome, sélectionnez Propriétés
- Dans un but sur le terrain, et enfin ajouter
--remote-debugging-port=9222，attention à l' utilisation séparés par des espaces
macOS
-
Ouvrez la console
-
执行命令 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Linux
- Ouvrez la console
执行命令 google-chrome --remote-debugging-port=9222
2. Monter le plug-in de débogage Chrome
Cliquez une fois l'installation terminée, le bouton de développement dans la barre latérale gauche Code Visual Studio et puis tapez dans la zone de recherche Debugger pour Chrome et installer le plug-in, entrez, cliquez sur reload pour redémarrer.
3. Créer le profil de débogage
Cliquez sur le code barre latérale Visual Studio gauche Debugging bouton dans la fenêtre pop-up, cliquez sur la configuration de débogage paramètres pignon, puis choisissez le chrome, le code VS sera généré répertoire .vscode dans le répertoire racine de l'espace de travail, et il y aura un fichier lanch.json il ouvrira automatiquement
Lanch.json fichier de contenu de recouvrement généré automatiquement par le profil suivant.
Remarque: webpack garder la configuration cohérente du numéro de port dans le numéro de port de départ URL.
{
// Utilisation IntelliSense pour en apprendre davantage sur les attributs possibles.
// Hover pour afficher les descriptions des attributs existants.
// Pour plus d' informations, visitez le site: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
« demande ": "attacher",
"name": "Attachez à Chrome",
"port": 9222,
"Webroot": "$ {} workspaceRoot / src",
"url":" http: // localhost: 8080 / # / "
"sourceMaps": true,
"sourceMapPathOverrides": {
" webpack:
4. Modifier la configuration webpack
Si elle est basée sur le projet de vue emballé webpack, il peut y avoir un problème qui ne correspond pas au point d'arrêt, mais exigent aussi quelques modifications:
Index.js 1. Ouvrez le fichier dans le répertoire de configuration dans le répertoire racine
2. devtool noeud dev à la valeur 'eval-source-carte'
3. La valeur de contournement du cache à faux le noeud dev
5. Activer le débogage
Une fois la configuration ci-dessus:
1. Ouvrez Chrome au moyen d'une première étape pour ouvrir la voie pour le débogage à distance
2. Exécutez projet vue npm run dev en mode débogage pour démarrer le projet
3. Cliquez sur le bouton code VS Debugging sur la barre latérale de gauche, sélectionnez Joindre à Chrome et cliquez sur le bouton vert Démarrer, le débogage barre de contrôle apparaît dans des circonstances normales.
Maintenant, vous pouvez déboguer un point de rupture dans le dossier du code vue.
