¿Qué está buscando?
Al crear una aplicación web compleja, probablemente se haya encontrado con el hecho de que algo no funcionó según lo planeado. Has pasado horas y horas buscando un error en tu código y luego en Internet buscando ayuda para solucionar el problema. Para que sea más fácil para usted, en este artículo explicamos algunas técnicas efectivas de depuración de una aplicación web que reducen significativamente el dolor de la depuración y acortan el tiempo de detección de problemas.Consola
.log
Primero, una consola de método javascript de uso común.registro. Puede insertar un método en su código con la variable dada. Durante la ejecución del código, la aplicación devolverá el valor de las variables especificadas dentro del método en la consola. Esta es la forma más fácil de comprobar si el programa devuelve el valor esperado.
Desafortunadamente, este no es un método muy efectivo de depuración. Tal enfoque t no nos permite ver el progreso de la ejecución de código (a menos que insertemos consola.registre cada pocas líneas, pero luego la cantidad de datos arrojados a la consola será ilegible y solo haremos un desastre en el código.) Además, devuelve solo la variable pasada, siempre que la aplicación no genere un error al ejecutar el código.
Número de consejo 1
Si tiene muchas consolas.los registros ponen el nombre en una cadena y la siguiente variable, por ejemplo, consola.log (‘variable’, variable).
Chrome DevTools (Pestaña Fuente)
Un método más eficiente para depurar una aplicación web es usar Chrome DevTools y la pestaña Fuente. Antes de comenzar a depurar en la pestaña fuente, necesitamos agregar node_modules al boxeo negro. Añadimos esta regla para que al pasar por puntos de interrupción no nos muestre archivos de paquetes externos, lo que dificulta la depuración. Necesitamos abrir la configuración en Chrome → Blackboxing → Agregar patrones y luego escribir allí / node_modules.
Cuando añades node_modules a black boxing podemos ir a la pestaña Source. Supongamos que desea seguir en tiempo real el proceso de su función y verificar las salidas. Pulse Ctrl + O en la pestaña origen e introduzca un nombre de archivo de origen. A continuación, coloque los puntos de interrupción en las líneas de código que le interesen, usted y usted pueden comenzar a ejecutar el proceso en su navegador. Cuando las líneas seleccionadas comiencen a procesarse, el navegador dejará de ejecutar el código. Vea la captura de pantalla a continuación.
Como puede ver, la línea de código actual donde se ha detenido el navegador tiene un fondo azul. En el lado derecho, hay un bar donde se encuentra nuestro centro de comando. Aquí está nuestra breve introducción.
Controles
En la parte superior de la barra, tiene la sección controles. Centrémonos en los elementos cruciales. El primer control de reanudación nos lleva al siguiente punto de interrupción marcado dentro del alcance del código que se está ejecutando. El segundo paso de control sobre la siguiente llamada a la función nos lleva a la siguiente línea del código que se está ejecutando. El último control de puntos de interrupción desactivados desactiva los puntos de interrupción seleccionados. Es un control útil cuando tenemos muchos puntos de interrupción seleccionados, y queremos volver a hacer clic en la aplicación durante un tiempo sin pausar en cada punto de interrupción.
Ámbitos
Tenemos una sección de ámbitos a continuación. Tenemos varios tipos de ámbitos: local (la función que se realiza actualmente) y cierres en función del ámbito en el que nos encontremos (por ejemplo, el padre de la función que se realiza actualmente o un componente). En cada uno de estos ámbitos, el navegador nos muestra todas las variables que ocurren en ellos.
Puntos de interrupción
La última sección que se discute es puntos de interrupción. Muestra qué puntos de interrupción y en qué archivos están marcados. Usando casillas de verificación, podemos desactivarlas y reactivarlas fácilmente.
No de consejos. 2-5
- Si usa inmutable.js en su proyecto, instale el Inmutable.complemento de formateador de objetos js y actívelo en la configuración del navegador. Esto simplificará significativamente la depuración de objetos inmutables.
- Si no utiliza inmutable.js en su proyecto y si utiliza el código de Visual Studio como IDE, le recomendamos encarecidamente que instale y configure el depurador para Chrome (VSC no tiene un depurador inmutable.plugin de formato js). Simplifica aún más la depuración y permite cambios de código más rápidos.
- Si la pestaña origen no muestra los archivos locales, compruebe el mapa de origen del proyecto.
- Cuando el navegador se detiene en un punto de interrupción, también tiene acceso a variables en la consola.
Las herramientas para desarrolladores de React
Las herramientas para desarrolladores de React también son soluciones útiles. Estas herramientas le permiten ver fácilmente la estructura de árbol de React en su proyecto, los estados y los accesorios en el componente. La función Seleccionar un elemento en la página para inspeccionarlo es potente, especialmente cuando no conoce todo el proyecto. Te ayuda a encontrar el componente que necesitas actualizar.
Número de consejo 6
Si utiliza Vue.js, puedes usar Sdv.js devtools. La extensión tiene funciones y acceso similares a Vuex (el equivalente de redux en react).
Redux DevTools
Si utiliza Redux en su proyecto, Redux DevTools es imprescindible. Esta solución le permite realizar un seguimiento del flujo completo de acciones, cambios de estado, carga útil y ver el almacén actual después de cada acción realizada. Si algo no funciona como suponemos, y todo parece estar bien en el código, vale la pena considerar qué acciones se están despachando, con qué carga útil. A veces hay errores simples como copiar la constante de la acción anterior, cambiar el nombre sin cambiar el valor y luego llamar a algo completamente diferente. A continuación se muestra un gif que muestra las funciones más importantes de Redux DevTools.
Tip no. 7
Si la aplicación ejecuta un gran número de acciones, es posible que la extensión no funcione correctamente debido a la falta de memoria para procesar tantas acciones. Puede intentar configurarlo en las opciones de extensión (en este caso, la opción maxAge).)
Fiddler
La última herramienta que nos gustaría presentar es Violinista. La herramienta fue creada para administrar el tráfico de red. Es extremadamente útil cuando tenemos algunos errores de producción y no podemos copiar los datos de producción a un entorno inferior para depurar localmente. En tal situación, para tener acceso a los datos de producción en el entorno local, configuramos el tráfico en la pestaña de respuesta automática. Al abrir la página, en lugar de descargar el archivo js del servidor, Fidler conecta nuestro archivo de producción creado localmente. La depuración adicional se realiza en la pestaña fuente de herramientas de desarrollo de Chrome. A continuación se muestra una captura de pantalla con la configuración para redirigir el tráfico al archivo local. El programa también permite puntos finales simulados.
Consejo no. 8
Si desea crear simulaciones de puntos finales de una manera fácil y rápida, puede usar un programa de luna simulada.
Resumen de una depuración ágil de una aplicación web
Para muchos de nosotros, el proceso de depuración de una aplicación web está asociado con un dolor de cabeza y largas horas frente a la computadora. Sin embargo, este proceso se puede acortar y hacer más agradable si tiene las herramientas adecuadas y los conocimientos técnicos para usarlas. A menudo están a su alcance y de forma gratuita. Compartimos con ustedes las herramientas más importantes y útiles que usamos a diario.