web-dev-qa-db-fra.com

Code VS: erreur "Point d'arrêt ignoré car le code généré est introuvable"

J'ai regardé partout et j'ai toujours un problème de débogage de TypeScript dans VS Code. J'ai lu this thread, mais je ne parviens toujours pas à atteindre mes points d'arrêt placés dans un fichier TypeScript, mais tous les éléments fonctionnent correctement.

Voici donc le projet "hello world" le plus simple que j'ai mis en place.

  • app.ts:

    var message: string = "Hello World";

console.log(message);

  • tsconfig.json

    {
    "compilerOptions": {
        "target": "es5",
        "sourceMap": true
    }
}

  • launch.json

    {
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/app.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": true,
            "outDir": null
        }
    ]
}

J'ai généré les fichiers js.map en exécutant la commande tsc --sourcemap app.ts.

Après toutes ces étapes, lorsque je définis un point d'arrêt sur la ligne console.log(message); et lance le programme (F5) à partir de l'onglet "Débogage", ce point d'arrêt est grisé et indique "Point d'arrêt ignoré car le code généré n'a pas été trouvé (problème de carte source?)". J'ai joint une capture d'écran de ce que j'observe: 

 enter image description here

Qu'est-ce que je rate? 

Modifier:

Bonjour, je suis toujours bloqué là-dessus. J'ai réussi à créer un exemple de projet qui atteignait les points de rupture, mais après avoir essayé de copier ce projet à un emplacement différent sur mon disque dur, les points de rupture sont redevenus gris et n'ont pas été touchés. Ce que j'ai fait de différent dans ce projet de test a été d'utiliser des cartes mères en ligne en compilant les fichiers TypeScript avec tsc app.ts --inlinesourcemap

J'ai téléchargé le projet exemple mentionné sur GitHub afin que vous puissiez le consulter ici .

javascriptdebuggingtypescriptvisual-studio-code
67
Vladimir Amiorkov

Le réglage de "outFiles" : ["${workspaceRoot}/compiled/**/*.js"], a résolu le problème pour moi.

"outFiles" valeur doit correspondre à celle définie dans tsconfig.json pour outDir et mapRoot qui est ${workspaceRoot} dans votre cas, alors essayez "outFiles": "${workspaceRoot}/**/*.js"

Voici mon tsconfig.json 

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "target": "es6",
        "outFiles": ["${workspaceRoot}/compiled/**/*.js"],
        "mapRoot": "compiled"
    },
    "include": [
        "app/**/*",
        "typings/index.d.ts"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}


et launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/compiled/app.js",
            "cwd": "${workspaceRoot}",
            "outDir": "${workspaceRoot}/compiled",
            "sourceMaps": true
        }
    ]
}
26
v-andrew

Je suis tombé sur cette question en cherchant une solution à un problème similaire à celui que je rencontrais. Bien que différent du problème de l'OP, cela pourrait aider les autres.

Contexte: Je suivais l'exemple Visual Studio Code HelloWorld et me trouvais incapable de m'arrêter aux points d'arrêt.

J'ai résolu mon problème en modifiant .vscode/launch.json afin que l'attribut "sourceMaps": true dans la configuration de lancement soit défini (la valeur par défaut est false).

16
DieterDP

Je pense que le problème pourrait être dans votre section "programme" de launch.json. Essayez comme ça:

{
    // Name of configuration; appears in the launch configuration drop down menu.
    "name": "Launch",
    // Type of configuration.
    "type": "node",
    "request": "launch",
    // Workspace relative or absolute path to the program.
    "program": "${workspaceRoot}/app.ts",
    // Automatically stop program after launch.
    "stopOnEntry": false,
    // Command line arguments passed to the program.
    "args": [],
    // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
    "cwd": "${workspaceRoot}",
    // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
    "runtimeExecutable": null,
    // Optional arguments passed to the runtime executable.
    "runtimeArgs": ["--nolazy"],
    // Environment variables passed to the program.
    "env": {
        "NODE_ENV": "development"
    },
    // Use JavaScript source maps (if they exist).
    "sourceMaps": true,
    // If JavaScript source maps are enabled, the generated code is expected in this directory.
    "outDir": "${workspaceRoot}"
}
6
Amid

Après m'être déchiré les cheveux toute la journée, je me suis enfin mis au travail.

Le problème est qu'il y a trois fichiers à manipuler: launch.json, tsconfig.json et webpack.config.js, donc tout est combinatoire.

le diagnosticLogging était la clé pour m'aider à comprendre.

Microsoft, rendez-vous s'il vous plaît, facilitez cela ... Vraiment, vscode aurait pu comprendre cela ou au moins me guider davantage sur le processus.

Quoi qu'il en soit, voici ce qui a finalement fonctionné dans mon launch.json:

"url": "http://localhost:8080/",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": { "webpack:///src/*": "${workspaceRoot}/src/*" }

mon tsconfig.json:

"outDir": "dist",
"sourceMap": true

mon webpack.config.js:

output: {
   path: 'dist/dev',
   filename: '[name].js'
},
...
module: {
    loaders: [...],
    preLoaders: [{
        test: /\.js$/,
        loader: "source-map-loader"
    }]
}
...
plugins: [
    new webpack.SourceMapDevToolPlugin(),
    ...
],
devtool: "cheap-module-eval-source-map",
5
Eric Hartford

Faire face au même problème et le résoudre en corrigeant le chemin d'accès aux fichiers .ts.
Mon projet contient des répertoires src et dist et le problème était que les fichiers .map générés ne contenaient pas le chemin correct vers le répertoire src.

Le correctif - tsconfig.json:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true,
        "outDir": "dist",
        "sourceRoot": "../src"
    }
}

Initialement, ma sourceRoot indiquait src et il n'y a pas de src dir à l'intérieur de dist.

De plus, sourceMaps doit être défini sur true dans launch.json.

5
tbutcaru
outFiles": ["${workspaceRoot}/compiled/**/*.js"],

Cela m'a sauvé la vie, parce que TS ne cherchait pas de sous-répertoires. Merci beaucoup

3
ScreamZ

Faire face au même problème et le résoudre en corrigeant "webRoot" config dans launch.json . Voici la vue de l'explorateur de mon espace de travail.

Puisque le résultat de compilation main.js and main.js.map est dans le répertoire "./project/www/build", je remplace l’entrée "webRoot" par "${workspaceRoot}/project/www/build" à partir de "${workspaceRoot}", et cela a fonctionné!

Le fichier launch.json est le suivant:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "url": "http://localhost:8100",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}/project/www/build"
        }
    ]
}
3
Hope Sun

Aucune des autres réponses n'a fonctionné pour moi. 

J'ai ensuite réalisé que l'attribut program de mon launch.json pointait vers le fichier .js, mais mon projet est un projet TypeScript.

Je l'ai changé pour qu'il pointe vers le fichier TypeScript (.ts), et ai défini l'attribut outFiles pour qu'il indique l'emplacement du code compilé

{
    "type": "node",
    "request": "launch",
    "name": "Launch Program",
    "program": "${workspaceRoot}/src/server/Server.ts",
    "cwd": "${workspaceRoot}",
    "outFiles": ["${workspaceRoot}/dist/**/*.js"]
}

Cela a résolu le problème pour moi!

2
Darius

Mise à jour: le débogage TypeScript est maintenant ajouté à la version 0.3.0 Mise à jour: effacez toujours vos points d'arrêt, puis attachez-les, puis ajoutez-en Ceci est un bug et a été rapporté.

2
Muhammad Yehia

Après avoir perdu beaucoup de temps à résoudre ce problème, le meilleur moyen consiste à activer le suivi de débogage en ajoutant la ligne suivante dans launch.json.

"trace": true

Et voyez où se situe le problème. Votre console de débogage affichera quelque chose dans les lignes suivantes: 

Verbose logs are written to: /Users/whatever/Library/Application Support/Code/logs/blah/blah/debugadapter.txt

Parmi beaucoup d'autres choses, votre console aura des lignes comme celles-ci:

SourceMap: mapping webpack:///./src/index.ts => C:\Some\Path\index.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Some/Path/*"

Utilisez sourceMapPathOverride pour le corriger afin qu'il corresponde réellement à votre chemin. Auparavant, la propriété "trace" était appelée "diagnosticLogging" et n'était plus utilisée.

1
Željko Tomić

Il n'existe en réalité qu'un moyen de résoudre ce problème, à savoir examiner le chemin de la carte source réellement utilisé.

Ajoutez la ligne suivante à launch.json:

"diagnosticLogging": true,

Parmi beaucoup d'autres choses, votre console aura des lignes comme celles-ci:

SourceMap: mapping webpack:///./src/main.ts => C:\Whatever\The\Path\main.ts, via sourceMapPathOverrides entry - "webpack:///./*": "C:/Whatever/The/Path/*"

Ensuite, vous ajustez simplement votre sourceMapPathOverrides pour que le chemin corresponde à votre chemin source actuel. J'ai constaté que j'avais besoin d'une configuration légèrement différente pour différents projets. Comprendre comment déboguer cela m'a vraiment aidé.

1
Cobus Kruger

En utilisant Angular, j'ai trouvé que je pointe toujours mon répertoire de dossiers sur le dossier src - de cette façon, mon espace de travail n'est pas encombré de fichiers racine que je n'utilise jamais. Mais cela m'a donné plusieurs problèmes dans le passé, en particulier lors de l'utilisation de VSCode, car de nombreuses fonctionnalités me semblent examiner la structure des dossiers et commencer à partir de là pour exécuter vos fichiers. (Attend certains des fichiers manquants)

Donc, j'ai eu exactement le même problème avec ce message d'erreur, et en tirant les leçons de l'expérience passée, j'ai réalisé que j'avais ouvert mon dossier de projet au plus profond du dossier, au lieu du dossier racine <app name>. Je viens donc de fermer mon projet et de l'ouvrir d'un dossier (afin que tous les autres fichiers soient également inclus dans la structure du dossier) et mon problème a été immédiatement résolu. 

Je pense également que bon nombre des réponses ci-dessus concernant la modification de vos fichiers et de la structure de vos dossiers sont des solutions de contournement à ce problème de ne pas ouvrir votre projet de travail au dossier racine, quel que soit le framework/langage utilisé.

0
Alfa Bravo

Cette configuration dans launch.json a fonctionné:

{ "type": "node", "request": "launch", "name": "Launch Program - app", "program": "${workspaceRoot}/src/server.ts", "cwd": "${workspaceFolder}", "outFiles": ["${workspaceRoot}/release/**"], "sourceMaps": true }

0
User1m

oui! dans mon cas, changer ceci dans le fichier launch.json résout le problème:

  "sourceMapPathOverrides": {
    "webpack:///./~/*": "${webRoot}/node_modules/*",
    "webpack:///./*":   "${webRoot}/*",
    "webpack:///*":     "*",
    "webpack:///src/*": "${webRoot}/*",
  }
0
user2735883

En retard pour la fête, mais vous pouvez vérifier cette publication sur github Testez la prise en charge de la définition de l'attribut outFiles dans la configuration de lancement # 12254 .

En gros, dans la nouvelle version de vscode, vous devez maintenant utiliser le modèle glob avec la propriété outFiles dans votre task.json.

J'ai eu un problème similaire. J'ai corrigé en indiquant le répertoire de sortie avec outFiles

0
TheSoul

J'aimerais contribuer à épargner quelques heures de coups à la tête.

J'ai utilisé Debugger for Chrome pour le code VS (vous n'en avez pas besoin pour webstorm), je recommanderais de passer 10 minutes à lire leur page , cela éclairera votre monde.

Après avoir installé l'extension du débogueur, assurez-vous que source-map est installé. Dans mon cas, j'avais également besoin de source-map-loader. Vérifiez votre package.json pour cela.

Mon launch.json qui est la configuration de débogueur de chrome (tous mes fichiers source étaient sous src):

{
  // 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"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceRoot}/",
      "sourceMapPathOverrides": {
        "webpack:///./*": "${webRoot}/*"
      }
    }
  ]
}

Ajoutez devtool: 'source-map' à votre webpack.config.js. Les autres paramètres générant des alignements ne fonctionneront pas avec Chrome Debugger (ils le mentionnent sur leur page).

Ceci est un exemple:

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js"
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Tutorial",
      inject: "body",
      template: "src/html/index.html",
      filename: "index.html"
    }),
    new DashboardPlugin()
  ],
  devtool: 'source-map',  
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        query: {
          presets: ["es2017", "react"],
          plugins: ['react-html-attrs']          
        }
      }
    ]
  },
  watch: true
};

Ensuite, vous lancez votre webpack: `webpack-dev-server --devtool source-map --progress --port 8080, j’ai utilisé webpack-dev-server mais il a les mêmes options que webpack.

Lorsque vous faites cela, vous devez voir un fichier .map de votre application générée. Sinon, revenez et vérifiez votre configuration.

Maintenant, dans le code VS, passez à la console de débogage et exécutez .scripts. Cette commande est très utile car elle vous indique quel code généré est associé à quelle source.

Quelque chose comme ça: - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

Si cela est incorrect, vous devez vérifier votre sourceMapPathOverrides dans votre launch.json. Des exemples sont disponibles sur la page de l'extension

0
Ayoub Khayati