debugging - Depuración de mecanografía con mapas de origen y webpack

typescript intellij-idea

Question

Tengo un proyecto escrito en Typescript y quiero poder depurarlo (ya sea en Chrome Dev Tools o en Intellij ).

Al principio, vi que la funcionalidad de import de Typescript no era compatible. Así que intenté usar Webpack junto con el webpack dev server pero esto falló por completo. A pesar de que mi aplicación estaba funcionando (debido a que tenía un solo archivo bundle.js que tiene todo el código) no podría coincidir con el código con los mapas de origen dados y esto hace que la depuración sea imposible.

Después de que dejé de usar el paquete web, intenté agregar require.js ya que una dependencia para resolver el require is not defined error que estaba recibiendo. Eso funcionó pero ahora estoy atascado de nuevo y obtengo esto:

Error de referencia no capturado: las exportaciones no están definidas

No tengo idea de por qué esto no funciona. Quiero hacer que mi aplicación funcione (ya sea a través de un paquete web o poder resolver sentencias de importación después de la compilación) y aún así poder depurar el código utilizando los mapas de origen producidos por mecanografía. ¿Cómo puedo conseguir esto?

Estoy adjuntando mis archivos de configuración en caso de que falte algo:

tsconfig.json

{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"sourceMap": true
},
"include": [
"scripts/**/*"
],
"exclude": [
"node_modules"
]
}

webpack.config.js:

module.exports = {
resolve: {
extensions: [/*''.ts'', ''.tsx'', */''.js'']
},
entry: ''./scripts/main.js'',
output: {
path: ''/'',
filename: ''app.js''
},
module: {
rules: [
{ test: //.js$/, loader: ''source-map-loader'', enforce: ''pre'' }
],
loaders: [
{ test: //.tsx?$/, loader: ''ts-loader'', exclude: /node_modules/ },
{test: //.css$/, loader: "style!css"}
]
},
watch: true
};

Answer 1

Para habilitar la depuración con webpack, agregue devtool: "source-map" a su webpack.config.js .

Para cargar archivos usando require.js , cambie "module": "amd" en tsconfig.json . require.js no admite la carga de módulos commonjs .

Answer 2

Voy a publicar una respuesta aquí. Es posible que esta respuesta no funcione para usted (vea el Paso 5). Varía mucho de persona a persona. Después de tantos días dedicados a la investigación, el post de GitHub robin-a-meade fue el que lo clavó.

Antes de comenzar, el problema principal parece estar en la URL de la asignación de origen que se encuentra dentro del archivo de configuración de depuración de código de VS y cómo (código VS) ve la aplicación. Esto es independiente de cualquier pila de back-end que esté utilizando (por ejemplo, Express, .NET Core, Django, etc.). Lo único que debe tener en cuenta es que Google Chrome carga correctamente el mapa fuente generado cuando se ejecuta la aplicación.

Usado:

• Visual Studio Code versión 1.13.1
• NodeJS 7.4.0
• Windows 10 de 64 bits
• Webpack 2.5 (Debería solicitarse también para Webpack 3)
• TypeScript 2.3

Instala la extensión de Google Chrome:

1) Haga clic en el icono cuadrado a la izquierda.

2,3) escriba "Depurador para Chrome" sin comas y haga clic en instalar.

Configure el depurador:

4) Haga clic en el icono de error.

5) Haga clic en el icono de engranaje. Esto abrirá "launch.json", que se utiliza para configurar la depuración en Visual Studio Code.

Ahora. Aquí es donde se pone realmente complicado. Esta es la parte que puede o no funcionar para usted.

Nuevamente, muchas gracias a robin-a-meade de GitHub cuyo código lo hizo funcionar:

6) Introduzca lo siguiente. Esto lanzará una instancia de Google Chrome con http://localhost en la URL. Luego, utilizará la webpack:// para buscar las asignaciones de Webpack. Esto es realmente complicado y puede que tenga que probar con diferentes combinaciones para ver cuál funciona.

 {
"name": "Launch Chrome against localhost, with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*"
}
}

Si está usando Firefox, intente usar este:

{
"name": "Launch Firefox",
"type": "firefox",
"firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe",
"request": "launch",
"reAttach": true,
"webRoot": "${workspaceRoot}",
"sourceMaps": "server",
"pathMappings": [
{
"url": "webpack:///",
"path": "${webRoot}/"
}
],
"url": "localhost"
}

Configuración de Webpack Añadir:

devtool: "fuente-mapa"

Para la configuración de su webpack. Esto debería ir bajo el módulo modules.export.

Ejecutar / construir el proyecto con Webpack; esto debería generar el mapa de origen (verifique si el mapa de origen se genera, de lo contrario, ¡nada funcionará!):

Entonces deberías estar listo para ir: presiona el botón "Reproducir" en la depuración y debería funcionar.

Recuerde, cualquier archivo que no se importe a su archivo .js principal (donde tiene todas sus importaciones y requiere), no podrá tener un punto de interrupción establecido.

Si eso no funcionó, revise esta lista de URL que pueden ayudarlo.

1. GitHub (página del milagro que me ayudó)
2. Depurar el paquete de paquetes web ts con Visual Studio Code
3. Código VS: error "Punto de interrupción ignorado porque el código generado no se encontró"
4. https://github.com/Microsoft/vscode-chrome-debug
5. https://github.com/Microsoft/vscode/issues/25349
6. https://github.com/angular/angular-cli/issues/1223
7. https://github.com/Microsoft/vscode-chrome-debug/issues/40 (parte inferior de la página)
8. https://.com/a/42405563/1057052

Para generar mapas de soruce : ¿Cómo genero mapas de fuente cuando uso babel y webpack?