web-dev-qa-db-fra.com

Le point d'arrêt du code Visual Studio apparaît au mauvais endroit

Dans mon projet Vue + Vuex, j'essaie de déboguer à l'aide de Visual Studio Code. J'ai le débogueur qui se lance correctement en utilisant Chrome outils de débogage et en utilisant correctement une carte, mais quand j'essaie de placer des points d'arrêt dans mes fichiers .js ou .vue, VS Code semble placer les points d'arrêt au mauvais endroit. Par exemple, ici, j'essaie de placer un point d'arrêt dans l'un de mes getters sur la ligne 40, mais il se termine 15 lignes plus tard:

enter image description here

Est-ce un bogue dans VS Code ou peut-être un autre problème? Des suggestions sur la façon de résoudre ce problème?

D'autres points d'arrêt sur d'autres lignes ont le même comportement d'apparaître sur des lignes ultérieures, mais je ne peux pas détecter un motif. Cela se produit dans les fichiers .js et .vue, et cela se produit à la fois dans les déclarations d'objet et dans les définitions de fonctions traditionnelles au niveau racine.

J'utilise VS Code 1.24.0.

debuggingvue.jsvisual-studio-codevuex
18
Patrick Szalapski

Pour répondre à cela dans un cas particulier, il faudrait disposer du launch.json la configuration utilisée et la structure du dossier source, au minimum. J'ai une histoire vraie de la semaine dernière pour illustrer pourquoi:

Contexte

J'ai récemment hérité d'un projet relativement petit Vue, et j'ai immédiatement rencontré le même problème. Les points d'arrêt dans VSCode étaient "instables" dans tous mes fichiers source.

Le projet n'a pas été développé dans VSCode, il n'y avait donc pas de launch.json dans le contrôle de code source. Ma première tentative naïve de configuration de débogage ressemblait à ceci:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome",
  "url": "http://localhost:8080",
  "webRoot": "${workspaceRoot}",
  "sourceMaps": true
}

Un détail très important est la structure du dossier source. Cela ressemble à ceci:

D:\TST\PROJECT
└───src
    │   main.js
    │
    ├───components
    │       AnotherComponent.vue
    │       SomeComponent.vue
    │
    └───services
            myservice.js
            yourservice.js

Fixation

Le problème facile à trouver était le webRoot. Étant donné que mes fichiers source étaient tous dans un dossier src, cela devait pointer vers ${workspaceRoot}/src, au lieu de simplement ${workspaceRoot}. Le fait de faire cela a corrigé toute la nervosité dans mon .vue fichiers sous src/components. Malheureusement, les points d'arrêt dans main.js et dans les fichiers du dossier services étaient toujours instables.

L'étape suivante consistait à ajouter une clé sourceMapPathOverrides à la configuration launch.json. VSCode complète automatiquement ce que je pense être les valeurs par défaut:

  "sourceMapPathOverrides": {
    "webpack:///./*": "${webRoot}/*",
    "webpack:///src/*": "${webRoot}/*",
    "webpack:///*": "*",
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "meteor://????app/*": "${webRoot}/*"
  }

Je les ai laissés tels quels et j'ai ajouté deux entrées. Pour réparer main.js, J'ai ajouté:

"webpack:///./src/*": "${webRoot}/*",

et pour corriger les fichiers dans le dossier des services, j'ai ajouté:

"webpack:///./src/services/*": "${webRoot}/services/*",

À ce stade, tous mes points d'arrêt se sont comportés dans tous mes fichiers tout au long du projet.

Mais pourquoi?

Malheureusement, je ne peux pas vous dire pourquoi ces deux lignes magiques sont nécessaires dans mon cas, ni même ce qu'elles font vraiment.

Cependant, je peux vous dire comment je les ai devinés. Dans les devtools de Chrome, j'ai exploré le webpack:// section de l'onglet "Sources". J'ai remarqué ça src/components s'affichait dans la "racine", (flèche verte), et mes autres sources (flèches rouges) ne l'étaient pas. Ils ne montraient que sous . (cerclé de rouge).

Chrome devtools sources tab showing webpacked sources

Disclaimers: Je ne suis pas un expert en Vue, webpack, chrome protocole de débogage, sourcemaps ou vue-loader. Je suis juste un développeur de plus qui veut définir ses points d'arrêt dans son IDE, pas dans son navigateur.

20
Mike Patrick

Je pense que vous essayez en fait de placer le point d'arrêt au milieu d'une déclaration.

Il s'agit en fait d'une seule déclaration.

Considérez la déclaration ci-dessous.

Vous pouvez définir un point d'arrêt en face de celui-ci.

> var obj = { a: value1, b: value2 }

Si vous écrivez ceci comme

var obj = { //can set break point here
 a: value1, //you can't set break point in this line 

 b: value2 //you can't set break point in this line 
}
0
Sreeragh A R

Peut-être que l'éditeur et le débogueur n'utilisent pas la même interprétation de "newline". Vérifiez si le code utilise\r ou\r\n et remplacez-le par l'autre.

0
user1027167