javascript - visual - Código VS: error "Punto de interrupción ignorado porque no se encontró el código generado"

sangria visual studio code

Question

He buscado en todas partes y todavía tengo problemas para depurar TypeScript dentro de VS Code. He leído this hilo, pero todavía no puedo alcanzar mis puntos de interrupción ubicados dentro de un archivo TypeScript, y los puntos de interrupción en archivos .js funcionan bien.

Así que aquí está el proyecto más simple de "hola mundo" que he configurado.

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

He generado los archivos js.map ejecutando el comando tsc --sourcemap app.ts

Después de todos esos pasos cuando configuro un punto de interrupción en console.log(message); fila e inicie el programa (F5) desde la pestaña "Depurar" ese punto de interrupción aparece atenuado diciendo "Punto de interrupción ignorado porque no se encontró el código generado (¿problema del mapa fuente?"). Adjunto una captura de pantalla de lo que estoy observando:

¿Qué me estoy perdiendo?

Editar:

Hola, todavía estoy atascado en esto. Logré hacer un proyecto de muestra que estaba alcanzando los puntos de ruptura, pero después de que intenté copiar ese proyecto en una ubicación diferente en mi HDD, los puntos de ruptura nuevamente se volvieron grises y no fueron alcanzados. Lo que hice diferente en este proyecto de prueba fue usar mapas fuente en línea compilando los archivos TypeScript con tsc app.ts --inlinesourcemap

Subí el proyecto de muestra mencionado a GitHub para que puedas echarle un vistazo here .

Answer 1

¡sí! en mi caso, cambiar esto en el archivo launch.json resuelve el problema:

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

Answer 2

Actualización: la depuración de TypeScript ahora se agrega en 0.3.0 Actualización: borre siempre sus puntos de interrupción, luego adjunte y luego agregue puntos de interrupción. Esto es un error y se ha informado.

Answer 3

Al usar Angular, descubrí que siempre apunto mi directorio de carpetas a la carpeta src , de esa manera mi espacio de trabajo no está tan abarrotado de archivos raíz que nunca uso. Pero esto me ha dado varios problemas en el pasado, especialmente al usar VSCode, ya que muchas de las funcionalidades me parecen mirar la estructura de carpetas y comenzar desde allí para ejecutar sus archivos. (Esperando algunos de los archivos que faltan)

Así que tuve exactamente el mismo problema con este mensaje de error, y aprendiendo de la experiencia pasada me di cuenta de que abrí mi carpeta de un proyecto en profundidad, en lugar de la carpeta raíz <app name> . Así que simplemente cerré mi proyecto y abrí una carpeta (para que todos los demás archivos también se incluyan en la estructura de carpetas) y mi problema se solucionó de inmediato.

También creo que muchas de las respuestas anteriores sobre el cambio de los archivos y la estructura de la carpeta son soluciones a este problema de no abrir su proyecto de trabajo en la carpeta raíz, independientemente del marco / idioma que esté utilizando.

Answer 4

Creo que el problema podría estar en la sección ''programa'' de launch.json. Pruébalo así:

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

Answer 5

Después de arrancarme el cabello todo el día, finalmente lo puse a trabajar.

El problema es que hay tres archivos para jugar: launch.json, tsconfig.json y webpack.config.js, por lo que todo es combinatorio.

El diagnóstico de registro fue clave para ayudarme a resolverlo.

Microsoft, por favor, haga esto más fácil ... Realmente, vscode podría haber descubierto esto o al menos guiarme más en el proceso.

De todos modos, esto es lo que finalmente funcionó en mi launch.json:

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

mi tsconfig.json:

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

my 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",

Answer 6

Después de perder mucho tiempo resolviendo este problema, resultó que la mejor manera es activar el rastreo de depuración agregando la siguiente línea en launch.json.

"trace": true

Y vea dónde está realmente el problema. Su consola de depuración generará algo en las líneas de:

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

Entre muchas otras cosas, su consola tendrá líneas como estas:

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

Use sourceMapPathOverride para arreglarlo para que realmente coincida con su ruta. La propiedad "trace" solía llamarse "diagnosticLogging", que ya no se usa.

Answer 7

En realidad, solo hay una forma de resolver esto y es mirar la ruta del mapa fuente que realmente se utiliza.

Agregue la siguiente línea a launch.json :

"diagnosticLogging": true,

Entre muchas otras cosas, su consola tendrá líneas como estas:

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

Y luego simplemente modifica su sourceMapPathOverrides para que la ruta coincida con su ruta de origen real. Descubrí que necesitaba una configuración ligeramente diferente para diferentes proyectos, por lo que entender cómo depurar esto realmente ayudó.

Answer 8

Encontré esta pregunta mientras buscaba una solución a un problema similar que estaba teniendo. A pesar de ser diferente del problema de OP, podría ayudar a otros.

Contexto: estaba siguiendo el ejemplo de Visual Studio Code HelloWorld y no pude detenerme en los puntos de interrupción.

.vscode/launch.json mi problema cambiando .vscode/launch.json para que se estableciera "sourceMaps": true atributo en la configuración de Inicio (comienza por defecto en falso).

Answer 9

Enfrentando el mismo problema y lo resolvió corrigiendo la configuración "webRoot" en launch.json. Aquí está la vista del explorador de mi espacio de trabajo.

Como el resultado de compilación main.js and main.js.map están en el directorio "./project/www/build" , cambio la entrada "webRoot" a "${workspaceRoot}/project/www/build" de "${workspaceRoot}" , ¡y funcionó!

El archivo launch.json es el siguiente:

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

Answer 10

Esta configuración en launch.json funcionó:

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

Answer 11

Frente al mismo problema y lo resolvió corrigiendo la ruta a los archivos .ts .
Mi proyecto contiene src y dist y el problema era que los archivos .map generados no tenían la ruta correcta al directorio src .

La solución - tsconfig.json :

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

Inicialmente, mi sourceRoot apuntaba a src y no hay ningún directorio src dentro de dist .

Además, sourceMaps debe establecerse en true dentro de launch.json .

Answer 12

La configuración de "outFiles" : ["${workspaceRoot}/compiled/**/*.js"], resolvió el problema por mí.

"outFiles" valor "outFiles" debe coincidir con un conjunto en tsconfig.json para outDir y mapRoot que es ${workspaceRoot} en su caso, así que intente "outFiles": "${workspaceRoot}/**/*.js"

Aquí están mis 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"
]
}

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

Answer 13

Me gustaría contribuir a ahorrar algunas horas de golpes en la cabeza.

Utilicé Debugger para Chrome para el código VS (no necesitas esto para la tormenta web), recomendaría pasar 10 minutos leyendo su page , iluminará tu mundo.

Después de instalar la extensión del depurador, asegúrese de que esté instalado source-map , en mi caso también necesitaba source-map-loader . Comprueba tu package.json para eso.

Mi launch.json, que es la configuración del depurador de Chrome (todos mis archivos fuente estaban bajo 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}/*"
}
}
]
}

Agregue devtool: ''source-map'' a su webpack.config.js. Otros parámetros que generan líneas de asignación no funcionarán con Chrome Debugger (lo mencionan en su página).

Esto es un ejemplo:

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

Luego ejecuta su paquete web: `webpack-dev-server --devtool source-map --progress --port 8080, utilicé webpack-dev-server pero tiene las mismas opciones que webpack.

Cuando lo haga, debe ver un archivo .map de su aplicación generada. Si no es así, regrese y verifique su configuración.

Ahora en VS Code cambie a la consola de depuración y ejecute .scripts . Este es un comando muy útil porque le muestra qué código generado se asigna a qué fuente.

Algo como esto: - webpack:///./src/stores/friendStore.js (/Users/your_user/Developer/react/tutorial/src/stores/friendStore.js)

Si esto está mal, entonces debe verificar su sourceMapPathOverrides en su launch.json, hay ejemplos disponibles en la page la page

Answer 14

Ninguna de las otras respuestas funcionó para mí.

Luego me di cuenta de que el atributo del program en mi launch.json apuntaba al archivo .js , pero mi proyecto es un proyecto TypeScript.

Lo cambié para que apunte al archivo TypeScript ( .ts ) y configuré el atributo outFiles para que apunte a dónde vive el código compilado:

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

¡Esto resolvió el problema para mí!

Answer 15

Tarde a la fiesta, pero puedes consultar esta publicación en el soporte global de prueba de github Test para el atributo outFiles en la configuración de lanzamiento # 12254 .

Básicamente, en la nueva versión de vscode, ahora debe usar el patrón outFiles con la propiedad outFiles en su task.json.

Tuve un problema similar. Lo arreglé indicando el directorio de salida con outFiles

Answer 16

si cambia al proyecto de script de tipo visual studio puede depurar archivos ts normalmente, creo que el problema en el archivo de generación app.js.map aquí es una muestra de visual studio app.js.map

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

vs código de estudio visual app.js.map

{"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, CAA, a , CAAC, CAAC; AACxC, OAAO, CAAC, GAAG, CAAC, KAAK, CAAC, OAAO, CAAC, CAAC; AAC3B, OAAO, CAAC, GAAG, CAAC, OAAO, CAAC, CAAC "}

intente reemplazarlo e intente nuevamente, no olvide considerar la jerarquía de directorios de las fuentes

Answer 17

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

Esto me salvó la vida, porque TS no estaba buscando subdirectorios. Muchas gracias