web-dev-qa-db-fra.com

Impossible de déboguer le fichier TypeScript actuel dans VS Code car le code JavaScript correspondant est introuvable

J'utilise la version 1.17 de Visual Studio Code et mon objectif est de déboguer le fichier current TypeScript. J'ai une tâche de construction en cours d'exécution, j'ai donc toujours un fichier javascript correspondant comme ceci:

src/folder1/folder2/main.ts
src/folder1/folder2/main.js

J'ai essayé avec la configuration suivante launch.json: 

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": [
    "${workspaceFolder}/${fileDirname}**/*.js"
  ]
}

Mais j'ai l'erreur: Cannot launch program '--full-path-to-project--/src/folder1/folder2/main.ts' because corresponding JavaScript cannot be found.

Mais le fichier JavaScript correspondant existe!

tsconfig.json: 

{
"compileOnSave": true,
"compilerOptions": {
    "target": "es6",
    "lib": [
        "es2017",
        "dom"
    ],
    "module": "commonjs",
    "watch": true,
    "moduleResolution": "node",
    "sourceMap": true
    // "types": []
},
"include": [
    "src",
    "test"
],
"exclude": [
    "node_modules",
    "typings"
]}
javascripttypescriptvisual-studio-codevscode-settings
16
DauleDK

La configuration de votre outFiles pointe vers le mauvais répertoire.

Remplacer votre config launch.json par ceci résoudrait le problème:

{
  "type": "node",
  "request": "launch",
  "name": "Current File",
  "program": "${file}",
  "console": "integratedTerminal",
  "outFiles": ["${fileDirname}/*.js"]
}

Depuis la référence de la variable vscode launch.json :

${fileDirName} le nom du fichier actuellement ouvert

devrait être le répertoire dont vous avez besoin. 

Notez que vous pouvez également utiliser "outFiles": ["${fileDirname}/**/*.js"] pour inclure des sous-répertoires.

La configuration que vous utilisez ajoute le répertoire suivant:

"${workspaceFolder}/${fileDirname}**/*.js"

Ce qui se traduit par quelque chose comme:

"/path/to/root/path/to/root/src/folder1/folder2/**/*.js"

c'est-à-dire que le chemin d'accès à la racine est dedans deux fois, ce qui en fait un chemin invalide.

Si vos fichiers .js sont sur une outDir différente: utilisez simplement le chemin d'accès à ce répertoire. TypeScript sourceMaps fera le reste.

Par exemple, si vous placez vos fichiers .js dans un répertoire dist:

"outFiles": ["${workspaceFolder}/dist/**/*.js"]
4
lucascaro

Le problème peut provenir de vos fichiers de carte et non de la configuration. 

Avant d’essayer quoi que ce soit, vous voulez vous assurer que les chemins que vous utilisez dans votre configuration de lancement sont corrects.

Vous pouvez le faire en remplaçant temporairement les chemins par des chemins absolus sur votre système pour voir si cela fonctionne.

Si cela ne fonctionne pas, vous devriez:

Vérifiez votre tsconfig et assurez-vous que mapRoot sous compilerOptions n'est défini sur rien. Voici ce que la documentation officielle dit à ce sujet:

Spécifie l'emplacement où le débogueur doit localiser les fichiers de mappage à la place des emplacements générés. Utilisez cet indicateur si les fichiers .map seront situé au moment de l'exécution dans un emplacement différent de celui des fichiers .js. Le L'emplacement spécifié sera intégré à la sourceMap pour diriger le fichier débogueur où les fichiers de la carte seront situés.

Vous pouvez en lire plus à ce sujet ici

Dans la plupart des cas, vous ne voulez pas vraiment le définir.

Aussi, assurez-vous que

"sourceMap": true` 

est défini dans compilerOptions dans tsconfig.json et les fichiers de carte sont générés.

10
Aakash Malhotra

Si quelqu'un d'autre se heurte à ceci: si vous utilisez webpack pour construire votre projet, vous devez utiliser un paramètre devtool qui génère des mappes source compatibles avec le code VS. Par essais et erreurs, cheap-module-source-map et source-map fonctionnent bien. J'ai fini par l'ajouter à mon webpack.config.js:

devtool: env.production ? 'source-map' : 'cheap-module-source-map'
2
starkos

Cela a fonctionné dans mon cas:

Allez dans votre gulpfile.js et trouvez la ligne qui contient sourcemaps.write(). Changer cette ligne en

        .pipe(sourcemaps.write('.', { includeContent: false, sourceRoot: '../lib' }))

Reconstruisez votre projet et essayez de réexécuter le débogueur. Le crédit va à roblourens sur GitHub. Il a lié cette page, qui a été utile.

0
mneumann