VS Code: "point d'arrêt ignorée parce que le code généré n'est pas trouvé" d'erreur

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



"outFiles" la valeur doit correspondre à celle définie dans tsconfig.json pour outDir et mapRoot qui est ${workspaceRoot} dans votre cas, donc 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
        }
    ]
}

je suis tombé sur cette question, en cherchant une solution à un problème similaire que j'avais. Bien qu'il soit différent du problème de L'OP, il pourrait aider les autres.

contexte: je suivais le Code Studio visuel HelloWorld exemple et je me suis trouvé incapable de m'arrêter sur les points de pause.

j'ai résolu mon problème en changeant .vscode/launch.json de sorte que l'attribut "sourceMaps": true sous la configuration de lancement a été défini (it démarre par défaut sur false).

je pense que le problème pourrait être dans votre "programme" l'article de lancement.json. Essayez comme ceci:

{
    // 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}"
}

fait face au même problème et résolu en corrigeant le chemin vers les fichiers .ts .

Mon projet contient des DIR src et dist et le problème était que les fichiers .map générés n'avaient pas le chemin correct vers le dir src .

fix tsconfig.json :

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

initialement, mon sourceRoot pointait vers src et il n'y a pas de dir src à l'intérieur dist .

aussi, sourceMaps doit être mis à true à l'intérieur de launch.json .

après m'être arraché les cheveux toute la journée, j'ai finalement réussi à les faire marcher.

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

l'enregistrement du diagnostic a été la clé pour m'aider à le comprendre.

de Microsoft, veuillez vous rendre cela plus facile... Vraiment, vscode aurait pu le découvrir ou au moins m'en dire plus sur le processus.

Bref, voilà ce qui a finalement fonctionné lors de mon lancement.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",

face au même problème et résolu en corrigeant "webRoot" config dans le lancement.json. Voici la vue explorer de mon espace de travail.

puisque le résultat de compilation main.js and main.js.map est dans "./project/www/build" , je change l'entrée "webRoot" en "${workspaceRoot}/project/www/build" de "${workspaceRoot}" , et ça a marché!

le lancement.le fichier 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"
        }
    ]
}

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

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

mise à jour: le débogage en TypeScript est maintenant ajouté dans la mise à jour 0.3.0: toujours effacer vos points de rupture, puis attacher, puis ajouter des points de rupture. C'est un bug et a été signalé.

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

j'ai alors réalisé que l'attribut program dans mon launch.json pointait vers le fichier .js , mais mon projet est un projet dactylographié.

Je l'ai modifié pour pointer vers le fichier dactylographié ( .ts ), et j'ai placé l'attribut outFiles à l'endroit où le code compilé vit:

{
    "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!

il n'y a vraiment qu'une façon de résoudre cela et c'est de regarder le chemin de la carte source qui est réellement utilisé.

ajouter 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/*"

et puis vous avez juste modifié votre sourceMapPathOverrides pour faire correspondre le chemin à votre chemin source réel. J'ai trouvé que j'avais besoin d'une configuration légèrement différente pour différents projets, donc comprendre comment déboguer cela a vraiment aidé.

Late to the party, mais vous pouvez vérifier ce post sur github test globbing support for the outFiles attribut dans la config de lancement #12254 .

fondamentalement dans la nouvelle version de vscode, vous devez maintenant utiliser le motif glob avec la propriété outFiles dans votre tâche.json.

j'ai eu un problème simlar. I fixé en indiquant le dir de sortie avec outFiles

Cette config dans le lancement.JSON a travaillé:

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

je voudrais contribuer à épargner quelques heures de cognement de la tête.

j'ai utilisé débogueur pour Chrome pour le code VS (vous n'avez pas besoin de cela pour webstorm), je recommande de passer 10min de lecture de leur page , il éclairera votre monde.

après l'installation de l'extension du débogueur, assurez-vous que source-map est installé, dans mon cas j'ai aussi besoin de source-carte-loader . Vérifiez votre paquet .json pour ça.

mon lancement.json qui est la configuration du débogueur chrome (tous mes fichiers source où 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}/*"
      }
    }
  ]
}

ajouter devtool: 'source-map' à votre webpack.config.js. D'autres paramètres qui génèrent des mappages inlines 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 exécutez 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 .carte fichier de votre application générée. Si ce n'est pas le cas, revenez vérifier votre installation.

maintenant en VS commutateur de Code pour déboguer la Console et exécuter .scripts . C'est une commande très utile car elle vous montre quel code généré est mappé à quelle source.

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

si cela est erroné, alors vous devez vérifier votre sourceMapPathOverrides dans votre lancement.json, des exemples sont disponibles sur la page de l'extension

Oui! dans mon cas, changer ça au lancement.le fichier JSON résout le problème:

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

en utilisant Angular j'ai trouvé que je pointe toujours mon répertoire de dossier vers le dossier src - de cette façon mon espace de travail n'est pas si encombré avec des 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 beaucoup de la fonctionnalité me semble de regarder la structure des dossiers, et de commencer à partir de là pour exécuter vos fichiers. (En comptant certains des fichiers manquants)

Donc j'ai eu exactement le même problème avec cette message d'erreur, et l'apprentissage de l'expérience passée j'ai réalisé que j'ai ouvert mon projet un dossier profond, au lieu du dossier racine <app name> . Donc j'ai juste fermé mon projet et l'ai ouvert un dossier (de sorte que tous les autres dossiers sont également inclus dans la structure du dossier) et mon problème a été immédiatement corrigé.

je crois aussi que beaucoup des réponses ci-dessus au sujet de changer vos dossiers et la structure de dossier sont des solutions de rechange à ce problème de ne pas ouvrir votre projet de travail à le dossier racine, quel que soit le framework / langage que vous utilisez.

si vous passez à visual studio type script project vous pouvez déboguer des fichiers ts normalement je pense que le problème dans l'application.js.carte de génération de fichier voici un exemple de visual studio app.js.carte

{"version": 3,"file": "app.js","sourceRoot":"","sources": ["app.ts"],"nom":["HelloWorld","HelloWorld.constructor"],"mappings":"AAAA;IACIA,oBAAmBA,OAAcA;QAAdC,YAAOA,GAAPA,OAAOA,CAAOA;IAEjCA,CAACA;IACLD,iBAACA;AAADA,CAACA,AAJD,IAIC;AAED,IAAI,KAAK,GAAG,IAAI,UAAU,CAAC,kBAAkB,CAAC,CAAC;AAC/C,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC"}

vs code de visual studio app.js.carte

{"version": 3,"file": "app.js","sourceRoot":"","sources": ["../App.ts"],"names":[],"mappings":"AACA;IACI,oBAAmB,OAAc;QAAd,YAAO,GAAP,OAAO,CAAO;IAEjC,CAAC;IACL,iBAAC;AAAD,CAAC,AAJD,IAIC;AACD,IAAI,KAAK,GAAC,IAAI,UAAU,CAAC,aAAa,CAAC,CAAC;AACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;AAC3B,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC"}

essayer de le remplacer et essayer de nouveau n'oubliez pas de considérer la hiérarchie de répertoire des sources