Cómo depurar frontend y backend: instrucciones paso a paso

Hola Habr! Te presento la traducción del artículo " Cómo depurar javascript en Chrome de forma rápida y fácil ".

En esta publicación, aprenderemos cómo depurar JavaScript en el frente y el backends usando Chrome DevTools y VS Code.

Objetivos:


  1. Aprende a depurar frontend y Angular
  2. Analizar el proceso de depuración de Node.js

Detección de errores en la interfaz (JavaScript, Angular)


Muchos servicios ahora permiten el código de débito en la interfaz. Chrome DevTools y Firefox Developer Tools son las más populares entre ellas, pero otros navegadores también tienen sus propias herramientas. Usaremos Chrome DevTools para ejemplos.

Depuración de JavaScript


Francamente, la depuración de código puede llevar mucho tiempo. Especialmente si usa comandos tan simples como console.log () o window.alert () .

Debe escribir y luego eliminar el código adicional, y a veces estos comandos entran en la confirmación de todos modos (incluso si pensaba que todos los tomaron). Y si usa lints (depuradores estáticos), la consola o los comandos de alerta se resaltarán en el código.

Y en este punto, Chrome DevTools entra en juego, lo que nos permite depurar código sin comandos tediosos. Entre las características de esta herramienta, editar CSS y HTML, probar la red y verificar la velocidad del sitio son nuestros favoritos.

Para conocer esta herramienta en la práctica, creemos una página JavaScript simple con el método getData () . Este método simplemente recopilará datos del campo de entrada, creará un elemento DOM con ID de dataSpan y agregará un valor del campo de entrada a este elemento.

Así es como se verá nuestra página:

En HTML:


En JavaScript:



Gu√°rdelo como app.js.

Así es como se verá nuestra página en el navegador:



Para verificar cómo funciona el método antes de almacenar datos en dataSpan , puede usar el antiguo console.log (data) o window.alert (data) . Esto es lo que veremos al ejecutar el archivo en VS Code:



Este es el enfoque m√°s primitivo.

En su lugar, utilizamos puntos de interrupción (puntos de interrupción) en Chrome DevTools para asegurarnos de que todo funcione como debería.

El punto de interrupción es una línea de código en la que queremos pausar la ejecución del código para aprender cómo funciona (o no funciona).

Volviendo al ejemplo, iniciemos la p√°gina en Google Chrome y hagamos lo siguiente:

  1. Para abrir Chrome Developer Tools, en la esquina superior derecha del navegador, haga clic para abrir el men√ļ de configuraci√≥n.
  2. En este men√ļ, seleccione Herramientas adicionales (en el men√ļ en ingl√©s - M√°s herramientas), y luego Herramientas de desarrollador (Herramientas de desarrollador).

Además, puede usar el método abreviado de teclado Ctrl + Shift + I (lo usamos, pero depende de usted =).



Con la barra de herramientas del desarrollador abierta, detengamos el código del punto de interrupción:

  1. Seleccione la pesta√Īa Fuentes.
  2. En Fuentes, en el panel P√°gina, seleccione app.js (que creamos un poco antes).
  3. En el editor de c√≥digo, haga clic en el n√ļmero de l√≠nea let data =document.getElementById('name').value;

Por lo tanto, establecemos un punto de interrupción (por conveniencia, el programa asigna un lugar con un punto de interrupción con una bandera azul). Además, tenga en cuenta que la variable excavada se agrega automáticamente a la sección Puntos de interrupción> Local (en el panel Depuración de JavaScript).

Control de intervalos de ejecución de código


Habiendo establecido un punto de interrupción, suspendemos la ejecución de la función en él. Por lo tanto, necesitaremos continuar la ejecución del código línea por línea para examinar los cambios en nuestra variable.
En la esquina superior izquierda del panel de depuración de JavaScript , están los comandos principales para ejecutar puntos de interrupción:



El primer botón, Reanudar ejecución de script () continuará ejecutando el código hasta el final o hasta el siguiente punto de interrupción.

Ingresemos hello world en el campo de entrada. Datos = "hola mundo" se agregarán a la línea. Ahora hagamos clic en el botón Pasar sobre la siguiente función call ().



La l√≠nea seleccionada con un punto de interrupci√≥n se ejecutar√° y el depurador seleccionar√° la siguiente. Haga clic en la pesta√Īa Alcance para ver el valor de la variable de datos. Cambi√≥ a "hola mundo", que presentamos anteriormente y simplemente muestra el valor de nuestra variable en una l√≠nea particular de c√≥digo. Haga clic en Pasar sobre la siguiente llamada de funci√≥n nuevamente para ejecutar el m√©todo seleccionado y pasar a la siguiente l√≠nea.

Si actualiza la página, el valor de la variable de salida también se actualizará en el elemento DOM. Para ver el valor de una variable, puede hacer clic en Expandir () a la izquierda de la misma. Si hace clic en Pasar sobre la siguiente llamada de función nuevamente, el texto "hola mundo" se agregará nuevamente al dataSpan.

Depuración más compleja


Supongamos que realizamos una funci√≥n m√°s complicada, que ciertamente no hace da√Īo depurar. Por ejemplo, queremos que los usuarios ingresen n√ļmeros separados por espacios. La funci√≥n procesar√° y generar√° estos n√ļmeros, su suma y el resultado de la multiplicaci√≥n.



Para hacer esto, actualizaremos el código app.js como en la captura de pantalla anterior. Actualizamos la página y procedemos directamente a la depuración.



  1. Haga clic en 3 (n√ļmero de l√≠nea de let data = document.getElementById ('name'). Value;) para establecer un punto de interrupci√≥n.
  2. Ingrese 23 24 e en la línea de entrada en el navegador.
  3. Haga clic en Pasar sobre la siguiente llamada de función.

La captura de pantalla muestra que tanto la suma como el producto de los n√ļmeros tienen el valor NaN (no un n√ļmero). Esto muestra que necesita corregir el c√≥digo de inmediato.

¬ŅDe qu√© otra manera puedo poner puntos de interrupci√≥n?


En la mayor√≠a de los casos, su c√≥digo es mucho m√°s largo y, posiblemente, concatenado en una l√≠nea. Por ejemplo, suponga que tiene 1000 l√≠neas de c√≥digo. En este caso, establecer puntos de interrupci√≥n haciendo clic en los n√ļmeros de l√≠nea cada vez no parece una gran idea, ¬Ņverdad?

Para hacer esto, DevTools tiene una herramienta genial para establecer puntos de interrupción en diferentes tipos de interacciones del navegador. En el panel de depuración de JavaScript, haga clic en Puntos de interrupción de escucha de eventos para ver las categorías disponibles.



Como puede ver, puede poner un punto de interrupción en el mouse> evento de clic (clic del mouse) en cualquier parte de nuestro código. Esto significa que si hace clic en Obtener datos de entrada , la ejecución del código se detendrá en el evento onclick . Y no es necesario agregar nada manualmente.



Al hacer clic en Pasar sobre la siguiente llamada de función, nos guiará secuencialmente a través del código utilizado para procesar los clics.

Con los puntos de interrupción de escucha de eventos, puede poner puntos de interrupción en un montón de diferentes tipos de eventos, como Teclado, Toque y XHR.

Palabra clave "depurador"


Si ingresa el depurador en cualquier parte del código, Chrome DevTools detendrá la ejecución del código en esa línea y lo resaltará, así como los puntos de interrupción. Puede usar esta herramienta para depurar JavaScript en Chrome u otros navegadores. Solo recuerde eliminarlo cuando haya terminado de depurar.



El código de la captura de pantalla anterior se detendrá en la línea que contiene la palabra clave del depurador e iniciará automáticamente Chrome DevTools. De hecho, esto es lo mismo que poner un punto de interrupción en esta línea. Además, la ejecución del código se puede controlar utilizando los botones Paso a la siguiente llamada de función y Paso a paso de la siguiente llamada de función.


Apretar


Al principio, miramos los comandos console.log () y window.alert () y nos dimos cuenta de que no eran muy convenientes. Tuvimos que usarlos a menudo en todo el código, lo que podría hacer que el código sea "más pesado" y más lento si olvidamos eliminarlos antes de comprometernos.

A medida que aumenta el n√ļmero de l√≠neas, Chrome Developer Tools es mucho m√°s eficiente para detectar errores y evaluar el rendimiento general.

Débito angular


La forma más fácil de depurar el código angular es usar el Código de Visual Studio (Código VS). Para iniciar la depuración, deberá instalar la extensión del depurador para Chrome:

  1. Ejecute el proyecto en VS Code y abra la pesta√Īa Extensiones. O presione Ctrl + Shift + X en el teclado.
  2. En la barra de b√ļsqueda, ingrese Chrome.
  3. Seleccione Debugger for Chrome y haga clic en Instalar.
  4. Después de instalar la extensión, aparecerá el botón Recargar. Haga clic para completar la instalación y activar el depurador.

¬ŅC√≥mo establecer un punto de interrupci√≥n?

Al igual que en DevTools, haga clic en el n√ļmero de l√≠nea en app.component.ts. Una l√≠nea con un punto de interrupci√≥n se resalta en un c√≠rculo rojo (a la izquierda del n√ļmero de l√≠nea).



Configurar el depurador


Para comenzar, necesitaremos configurar el depurador:

1. Desde el Explorador de archivos, vaya a la pesta√Īa Depurar.
También puede usar Ctrl + Shift + D para esto.

2. Haga clic en el icono de Configuración para crear launch.json.
Este es el archivo de configuración que utilizaremos.

3. En el men√ļ emergente Seleccionar entorno, seleccione Chrome.
Esto crear√° una nueva carpeta .vscode y un archivo launch.json para su proyecto.

4. Ejecute este archivo.

5. Para usar este archivo para nuestros propósitos, en el método de url, reemplace el puerto localhost de 8080 a 4200.

6. Guarde los cambios.

Así es como debería verse el archivo:



7. Presione F5 o haga clic en el botón Iniciar depuración para iniciar el depurador.

8. Inicie Chrome.

9. Para pausar la ejecución del código en el punto de interrupción, actualice la página.



Para ver secuencialmente la ejecución del código y cómo cambian las variables, use la tecla F10.



Léame


Hay muchas configuraciones adicionales en la extensi√≥n Debugger para Chrome, que funcionan con mapas de origen y soluci√≥n de problemas. Para verlos directamente en VS Code, haga clic en la extensi√≥n y seleccione la pesta√Īa Detalles .



Depuración de backend (Node.js)


Aquí aprenderá cómo depurar código en Node.js. Estos son los enfoques más comunes:

‚ÄĘ Uso de Chrome DevTools
Por ahora, este es nuestro enfoque favorito.

‚ÄĘ Usar IDE shki como Visual Studio Code, Visual Studio, WebStorm, etc.

Por ejemplo, utilizaremos VS Code y Chrome DevTools.

Chrome y Node.js usan el mismo motor de JavaScript, Google V8, lo que significa que para el backend usaremos las mismas herramientas que para el frente.

Para hacer esto:

1. Ejecute su proyecto en VS Code.

2. Haga clic en la pesta√Īa Consola.

3. Escriba npm start --inspect y presione Entrar.

4. Ignore la URL "chrome-devtools: // ..." propuesta (hay un método mejor).



5. Inicie Chrome e ingrese "acerca de: inspeccionar".

Esto lo redirigir√° a la pesta√Īa Dispositivos en DevTools.

6. Haga clic en el enlace Abrir DevTools dedicado para Node.



El proceso de depuración es el mismo que para el frontend, es decir, el uso de puntos de interrupción. De hecho, es muy conveniente que no necesite cambiar a un IDE. Por lo tanto, puede depurar el frente y el backend en la misma interfaz.

Gracias por leer y espero que hayas disfrutado esta publicaci√≥n. Suscr√≠base a las actualizaciones, todav√≠a tenemos muchas cosas √ļtiles en nuestras mangas :-)

Source: https://habr.com/ru/post/439162/


All Articles