debugging - idea - intellij typescript

La depuración de IntelliJ IDEA TypeScript/Webpack solo funciona con puntos de interrupción de JavaScript

Question

Estoy jugando con un proyecto Angular 2 / Bootstrap 4 / Webpack , solo para ver cómo se está alineando lo nuevo, y estoy tratando de que la depuración funcione en IntelliJ IDEA 15 en Chrome con la extensión JetBrains de Chrome.

El problema es que cualquier punto de interrupción que establecí en mis archivos de TypeScript se ignora. Estoy usando el transpiler incorporado y dejo los archivos de salida de JavaScript con el mismo nombre / ubicación que los archivos de TypeScript, de modo que my-app.ts esté en la misma carpeta que my-app.js y my-app asociada. Archivo de mapeo .js.map

Lo extraño es que si establezco puntos de interrupción en el archivo JavaScript generado, el IDE se divide en el lugar correspondiente en el archivo de TypeScript (aunque no muestre ningún punto de interrupción allí). Luego puedo dar un paso normalmente ya que el mapeo parece funcionar.

El problema parece ser que establecer un punto de interrupción en un archivo .ts no establece el punto de interrupción necesario en el archivo .js correspondiente.

¿Estoy haciendo algo mal (nunca he trabajado con depuración de TypeScript antes), o es un error en IDEA?

PD Obtengo los mismos resultados ya sea al realizar una depuración de JavaScript remota o al usar la depuración local a través del servidor web integrado de IDEA.

Answer 1

El truco fue agregar una referencia a la URL interna de la Webpack a la configuración de depuración. La ruta de acceso para esa URL de Webpack vendrá de la pestaña de scripts del depurador cuando la aplicación se está ejecutando. También puede verlo en las secuencias de comandos de Chrome con la misma facilidad, pero he incluido la vista de IntelliJ IDEA aquí:

Puedes ver que el . ruta en webpack:// corresponde a mi carpeta de proyecto (como lo atestigua la ruta src ). Eso es lo que me dijo que necesitaba usar el . ruta para Webpack en la configuración de depuración. Si su proyecto se alinea de manera diferente, tendrá que ajustar en consecuencia.

En cuanto a por qué es un webpack:///. (con tres barras inclinadas) en lugar de webpack://. , que no puedo responder Vi que se usa en una publicación de JetBrains y eso es lo que me llevó a esa solución de agregar una barra inclinada adicional.

Ahora necesita crear su configuración de depuración de JavaScript y configurarla de la siguiente manera:

Ajuste su URL y puerto de __build__ , así como su ruta de compilación ( __build__ en mi caso, tal vez build o dist en el suyo).

Ahora que tengo la configuración de depuración como la anterior, funciona bien.

Answer 2

He resuelto satisfactoriamente un problema con la depuración con un paquete web en Intellij / Webstorm basado en esta solución: ¿Cómo depurar la aplicación angular 2 usando el paquete web angular-cli? . Debe mapear el directorio y directorio principal del proyecto ui con las fuentes .ts a la URL remota, exactamente lo mismo que en el lado positivo de la solución.

Mi tsconfig.json:

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "mapRoot": "./",
    "module": "es6",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "../resources/static/out-tsc",
    "sourceMap": true,
    "target": "es6",
    "typeRoots": [
      "../../../node_modules/@types"
    ]
  }
}