it-swarm.com.de

VS-Code: Fehler "Haltepunkt wurde ignoriert, da generierter Code nicht gefunden wurde"

Ich habe überall nachgesehen und ich habe immer noch Probleme mit TypeScript in VS Code. Ich habe den this -Thread gelesen, aber ich kann meine Haltepunkte in einer TypeScript-Datei nicht treffen. Die Haltepunkte in den .js-Dateien treffen alle gut.

Hier ist das einfachste "Hallo Welt" -Projekt, das ich eingerichtet habe.

  • 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
            }
        ]
    }
    

Ich habe die js.map-Dateien mit dem Befehl tsc --sourcemap app.ts generiert.

Nach all diesen Schritten, wenn ich einen Haltepunkt in der console.log(message);-Zeile gesetzt habe und das Programm (F5) von der Registerkarte "Debug" aus gestartet habe, wird dieser Haltepunkt abgeblendet und sagt "Haltepunkt wurde ignoriert, da der erzeugte Code nicht gefunden wurde (Quell-Map-Problem?)." Ich habe einen Screenshot von dem, was ich beobachte, angehängt: 

enter image description here

Was vermisse ich? 

Bearbeiten:

Hi, ich bin immer noch dabei. Es gelang mir, ein Beispielprojekt zu erstellen, das die Haltepunkte traf. Nachdem ich jedoch versucht hatte, dieses Projekt an einen anderen Ort auf meiner Festplatte zu kopieren, wurden die Haltepunkte wieder grau und wurden nicht getroffen. Was ich in diesem Testprojekt anders gemacht habe, war die Verwendung von Inline-Quellcaps durch Kompilieren der TypeScript-Dateien mit tsc app.ts --inlinesourcemap.

Ich habe das erwähnte Beispielprojekt auf GitHub hochgeladen, so dass Sie es hier ansehen können.

67

Das Setzen von "outFiles" : ["${workspaceRoot}/compiled/**/*.js"], hat das Problem für mich gelöst.

Der Wert von "outFiles" sollte mit einem Satz in tsconfig.json für outDir und mapRoot übereinstimmen, der in Ihrem Fall ${workspaceRoot} ist. Versuchen Sie also "outFiles": "${workspaceRoot}/**/*.js"

Hier sind mein 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"
    ]
}


und 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

Ich stieß auf diese Frage, als ich nach einer Lösung für ein ähnliches Problem suchte, das ich hatte. Obwohl es sich vom OP-Problem unterscheidet, kann es anderen helfen.

Kontext: Ich folgte dem Visual Studio Code HelloWorld-Beispiel und konnte mich nicht an Haltepunkten aufhalten.

Ich habe mein Problem gelöst, indem ich .vscode/launch.json so geändert habe, dass das "sourceMaps": true-Attribut in der Launch-Konfiguration festgelegt wurde (es startet standardmäßig bei false).

16
DieterDP

Ich denke, das Problem könnte in Ihrem Programmabschnitt von launch.json liegen. Versuchen Sie es so:

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

Nachdem ich mir den ganzen Tag die Haare gerissen habe, habe ich es endlich geschafft.

Das Problem ist, dass es drei Dateien gibt, mit denen man feilen kann - launch.json, tsconfig.json und webpack.config.js, sodass alles kombinatorisch ist.

das diagnostische Protokoll war der Schlüssel, um mir zu helfen, es herauszufinden.

Microsoft, bitte machen Sie das einfacher ... Wirklich, vscode hätte das herausfinden können oder mich zumindest mehr über den Prozess gelenkt.

Jedenfalls ist hier was in meiner launch.json endlich funktioniert:

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

meine tsconfig.json:

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

meine 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

Sich dem gleichen Problem stellen und es beheben, indem der Pfad zu .ts-Dateien korrigiert wurde.
Mein Projekt enthält src- und dist-Verzeichnisse. Das Problem war, dass die generierten .map-Dateien nicht den richtigen Pfad zum src-Verzeichnis hatten.

Das Update - tsconfig.json:

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

Meine sourceRoot zeigte anfangs auf src und es gibt kein src dir in dist.

Außerdem sollte sourceMaps in launch.json auf true gesetzt sein.

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

Das hat mir das Leben gerettet, weil TS nicht nach Unterverzeichnissen suchte. Danke vielmals

3
ScreamZ

Sich dem gleichen Problem stellen und es durch Korrekturen von "webRoot" config in launch.json . beheben. Hier ist die Explorer-Ansicht meines Arbeitsbereichs.

Da sich das Compilierungsergebnis main.js and main.js.map im Verzeichnis "./project/www/build" befindet, ändere ich den "webRoot"-Eintrag von "${workspaceRoot}/project/www/build" in "${workspaceRoot}" und es hat funktioniert!

Die Datei launch.json sieht wie folgt aus:

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

Keine der anderen Antworten funktionierte für mich. 

Dann erkannte ich, dass das program-Attribut in meinem launch.json auf die .js-Datei verweist, aber mein Projekt ist ein TypeScript-Projekt.

Ich habe es so geändert, dass es auf die TypeScript-Datei (.ts) verweist, und das outFiles-Attribut auf den Ort des kompilierten Codes gesetzt:

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

Das hat das Problem für mich gelöst!

2
Darius

Update: TypeScript-Debugging wurde jetzt in 0.3.0 hinzugefügt. Update: Löschen Sie immer Ihre Haltepunkte, fügen Sie dann Haltepunkte hinzu und fügen Sie dann Haltepunkte hinzu. Dies ist ein Fehler und wurde gemeldet.

2
Muhammad Yehia

Nachdem viel Zeit für die Behebung dieses Problems verschwendet wurde, stellte sich als beste Methode heraus, die Debugging-Trace-Funktion durch Hinzufügen der folgenden Zeile in launch.json zu aktivieren.

"trace": true

Und sehen, wo das Problem eigentlich liegt. Ihre Debug-Konsole gibt etwas in den Zeilen aus: 

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

Neben vielen anderen Dingen enthält Ihre Konsole folgende Zeilen:

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

Verwenden Sie sourceMapPathOverride, um den Pfad an Ihren Pfad anzupassen. Die Eigenschaft "trace" wurde früher als "diagnosticLogging" bezeichnet und wird nicht mehr verwendet.

1
Željko Tomić

Es gibt wirklich nur eine Möglichkeit, dies zu beheben, indem Sie den tatsächlich verwendeten Quellkartenpfad betrachten.

Fügen Sie die folgende Zeile zu launch.json hinzu:

"diagnosticLogging": true,

Neben vielen anderen Dingen enthält Ihre Konsole folgende Zeilen:

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

Und dann passen Sie einfach Ihre sourceMapPathOverrides an, um den Pfad an Ihren tatsächlichen Quellpfad anzupassen. Ich habe festgestellt, dass ich für verschiedene Projekte eine etwas andere Konfiguration benötigte. Das Verständnis für das Debuggen dieses Problems hat wirklich geholfen.

1
Cobus Kruger

Mit Angular habe ich festgestellt, dass ich mein Verzeichnis immer auf den Ordner src verweise. Auf diese Weise ist mein Arbeitsbereich nicht so sehr mit Stammdateien übersät, die ich niemals verwende. Dies hat mir in der Vergangenheit jedoch einige Probleme bereitet, insbesondere bei der Verwendung von VSCode, da mir viele Funktionen die Ordnerstruktur zu betrachten scheinen und von dort aus Ihre Dateien ausführen. (Erwartet einige der fehlenden Dateien)

Ich hatte also genau das gleiche Problem mit dieser Fehlermeldung und als ich aus früheren Erfahrungen lernte, stellte ich fest, dass ich mein Projekt einen Ordner tief geöffnet hatte, anstatt den Stammordner <app name>. Also habe ich mein Projekt gerade geschlossen und einen Ordner nach oben geöffnet (damit auch alle anderen Dateien in der Ordnerstruktur enthalten sind) und mein Problem wurde sofort behoben. 

Ich glaube auch, dass viele der oben genannten Antworten auf das Ändern Ihrer Dateien und der Ordnerstruktur Problemumgehungen für dieses Problem darstellen, wenn Sie Ihr Arbeitsprojekt nicht im Stammordner öffnen, je nachdem, welches Framework/welche Sprache Sie verwenden.

0
Alfa Bravo

Diese Konfiguration in launch.json hat funktioniert:

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

0
User1m

ja! In meinem Fall kann das Problem in der Datei launch.json behoben werden:

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

Spät zur Party, aber Sie können diesen Beitrag auf github Test globbing support für das outFiles-Attribut in der Startkonfiguration # 12254 überprüfen.

In der neuen Version von vscode müssen Sie nun das Glob-Muster mit der Eigenschaft outFiles in Ihrer task.json verwenden.

Ich hatte ein simples Problem. Ich habe das Ausgabeverzeichnis mit outFiles angegeben.

0
TheSoul

Ich möchte gerne dazu beitragen, einige Stunden Kopfschmerzen zu vermeiden.

Ich habe Debugger für Chrome für VS-Code verwendet (Sie benötigen dies nicht für Webstorm). Ich würde empfehlen, 10 Minuten zu lesen, um ihre Seite zu lesen , es wird Ihre Welt erleuchten.

Stellen Sie nach der Installation der Debugger-Erweiterung sicher, dass source-map installiert ist. In meinem Fall benötigte ich auch source-map-loader. Überprüfen Sie Ihre package.json.

Mein launch.json ist die Chrome-Debugger-Konfiguration (alle meine Quelldateien befanden sich unter 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}/*"
      }
    }
  ]
}

Fügen Sie devtool: 'source-map' zu Ihrer webpack.config.js hinzu. Andere Parameter, die Mapping-Inlines erzeugen, funktionieren mit Chrome Debugger nicht (sie erwähnen das auf ihrer Seite).

Dies ist ein Beispiel:

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
};

Dann führen Sie Ihr Webpack aus: `webpack-dev-server --devtool source-map --progress --port 8080, ich habe webpack-dev-server verwendet, aber es hat dieselben Optionen wie webpack.

Wenn Sie dies tun, müssen Sie eine .map -Datei Ihrer generierten App sehen. Wenn nicht, dann kommen Sie zurück und überprüfen Sie Ihre Einstellungen.

Wechseln Sie jetzt in VS Code zu Debug Console und führen Sie .scripts aus. Dies ist ein sehr nützlicher Befehl, denn er zeigt Ihnen, welcher generierte Code welcher Quelle zugeordnet ist.

Etwas wie das: - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

Wenn dies nicht der Fall ist, müssen Sie Ihr sourceMapPathOverrides in launch.json überprüfen. Beispiele sind auf der Seite extension verfügbar

0
Ayoub Khayati