debugging - debug - Angular 2 Errors and Typescript-¿cómo depurar?

how to debug angular 6

Question

Acabo de comenzar un proyecto para aprender Angular2 y Typescript + Javascript. Vengo de un entorno Java y mi enfoque para la depuración de proyectos suele ser una combinación de rastreos de pila, errores de compilación y, en proyectos más grandes, muchos casos de prueba. Sin embargo, gran parte de esto no parece traducirse directamente al mundo de web-dev; particularmente depurando mi código que está interactuando con las bibliotecas de Angular2.

¿Podría alguien sugerir algún enfoque que pueda tomar para depurar el código de trabajo con Angular2? Específicamente; ¿cómo puedo ver qué partes de mi HTML / TS están causando problemas? Revisé la consola, desde donde puedo ver que he roto Angular2, pero no parece mucho más informativo.

Solo para aclarar; No quiero ayuda para esta instancia específica. Me gustaría aprender a diagnosticar y solucionar estos problemas yo mismo.

Answer 1

Abra la consola del desarrollador web, vaya a la sección "Fuentes". Presione "cntrl + p". Se abrirá un cuadro de búsqueda donde escriba ".ts" y encuentre su archivo o busque directamente en su archivo como "myfile.ts". Ábrelo y puedes poner puntos de corte directamente en el código, de la misma manera que ponemos puntos de corte en un archivo js y Voila, puedes depurar Typescript.

Answer 2

Creo que esto no solo es válido para Angular2, pero dado que provienen de un fondo Java, supongo que esto es más como "cómo depuro con éxito las aplicaciones web de JavaScript" en general.

Relacionado con esto, recomiendo encarecidamente que eche un vistazo a la página de Chrome Devtools (dado que utiliza Chrome, que tiene un build-in muy limpio de devtools).
En esa página hay muchos tutoriales útiles. Específicamente en su caso, probablemente el artículo sobre la depuración de JavaScript que tiene algunos consejos interesantes como la depuración condicional, la ruptura de las modificaciones DOM, incluso romper las excepciones atrapadas / no detectadas, etc.

También sugiero a menudo que la gente haga el curso gratuito Code School en Discover Devtools, que también es agradable.

En el caso de TypeScript, también asegúrese de habilitar los mapas de origen . Como probablemente sepa, TypeScript no es ejecutado directamente por el navegador, sino que se está "compilando" (o como se lo llama "transpiled") en JavaScript. Dicho esto, probablemente no quieras depurar el JS transpilado sino el código TypeScript que escribiste. Para habilitar los mapas de origen, establezca la bandera adecuada en su tsconfig.json :

{
  "version": "1.6.2",
  "compilerOptions": {
    ...
    "sourceMap": true
  },
  "exclude": [
     ...
  ]
}

Answer 3

Si vienes del mundo de Java, hay muchas posibilidades de que ya estés usando IntelliJ IDEA de JetBrains. Si es así, entonces es posible depurar las aplicaciones JavaScript (y TypeScript) directamente en el IDE utilizando la misma interfaz que utiliza para las aplicaciones Java.

JetBrains tiene cierta documentación sobre el tema que podría ayudar.

Como se dijo en otras respuestas, también puede usar el depurador de Chrome Inspector. Personalmente, prefiero usar IntelliJ para hacer eso.

Si solo está buscando ejemplos de cómo funciona el flujo de trabajo, eche un vistazo a este proyecto de Github que muestra el uso de Webpack con Angular2 .

Answer 4

Suponiendo que esté utilizando Chrome, puede colocar puntos de interrupción en la pestaña "Fuentes" en su consola. Esos puntos de interrupción se pueden establecer en los archivos ts. Si necesita información del archivo js, ​​puede desmarcar Javascript sourcemaps en la configuración de la consola: esto le permitirá colocar puntos de interrupción en los archivos js.

En un punto de interrupción, puede hacer lo habitual (observar, espiar, trazar la pila, etc.). También puede escribir js en la consola accediendo directamente a las variables locales, por ejemplo:

function b(){
    var c = 1;
    // if you put a breakpoint here and type c in the console, it will write "1"
}

Específicamente en el angular 2, es posible que desee agregar puntos de interrupción en las líneas "throw e" en su biblioteca, obtendrá rastros de pila más detallados. Si hace clic en "..." en sus seguimientos de pila, obtendrá acceso a su archivo que causó el error.

Eso es para errores reales. Ahora, para el rendimiento, en la pestaña "línea de tiempo", puede hacer clic en el botón "grabar" en la parte superior izquierda. Una vez que haya terminado de grabar (haga clic en "finalizar"), verá el uso de la CPU. Puede acercar los eventos en la línea de tiempo para ver qué parte del código está utilizando demasiados recursos.

También puede rastrear la memoria marcando la casilla de "memoria".

Si necesita depurar un iframe, hay un cuadro de selección en la consola que dice "marco superior" que puede establecer en el marco que desee.

Si he olvidado algo importante, solo pregunte :).