Muy buenas, les saluda Miguel y esta vez les traigo un nuevo post.
Esta es una publicación originalmente del sitio web: Debug (): consejos de depuración de JavaScript
Debug () – La muerte de Ctrl + f
Si eres como yo, has perdido incontables horas de tu vida usando ctrl + f para encontrar funciones dentro de tu código. Si solo tiene un archivo, ctrl + f seguirá siendo su mejor opción. Pero tan pronto como empiece a trabajar con muchos archivos, el método debug () se convierte en un salvavidas.
Esta publicación continuará con mi serie de depuración de Javascript. Si este es el primero que ve, es posible que también le interesen algunos de los demás.
Este no va a ser largo hoy. El método de depuración es bastante simple para entenderlo.
El HTML con el que comenzamos es ligeramente diferente esta vez.
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debug Method</title>
</head>
<body>
<h1>Experimenting With debug()</h1>
<script src="script.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>
<script src="script4.js"></script>
<script src="script5.js"></script>
</body>
</html>
Comenzamos con 5 archivos de script diferentes para ilustrar el poder del método de depuración. Dentro de cada uno de estos archivos tenemos 10 funciones. Cada uno de los cuales solo muestra su número como una alerta. Me gusta esto:
function function1() alert("1"); function function2() alert("2"); function function3() alert("3"); function function4() alert("4"); function function5() alert("5"); function function6() alert("6"); function function7() alert("7"); function function8() alert("8"); function function9() alert("9");
Quiero encontrar la function23
Supongamos que no sabemos en qué archivo se encuentra la función 23, pero queremos encontrarlo. Estamos dentro del navegador y abrimos la pestaña de fuentes. Podríamos abrir todos los archivos de secuencia de comandos y comenzar con el confiable ctrl + f en todos los archivos buscando function23.
O podríamos usar el método de depuración. Todo lo que tenemos que hacer es pasar el nombre de la función que queremos encontrar en el método de depuración. En nuestro caso debug(function23)
. Ejecútelo en la consola.
¡No pasó nada!
Lo que está sucediendo ahora es que el código está siendo monitoreado. Cada vez que se llame a la función 23, la ejecución del código se detendrá y se le dirigirá directamente a la pestaña de fuentes y accederá al código de la función 23. ¡Muy genial! Intentémoslo invocando function23 manualmente en la consola.
Inmediatamente puede ver que la ejecución del código se ha detenido tan pronto como llamamos a function23 manualmente desde la consola. A continuación, también puede ver a dónde saltó el código. Sí, function23 está resaltada, dentro de script3.js. ¡No es necesario usar ctrl + f para encontrar a ese pequeño bribón de nuevo!
Código en pausa antes de que se ejecute la función
Una parte bastante asombrosa de esto es que la ejecución del código se detiene antes de que se ejecute el código dentro de la función. Esto significa que si se encuentra en su entorno local, ahora puede agregar código a esa función directamente desde la pestaña de fuentes y luego ejecutarlo sin tener que manipular el archivo real.
Esto puede relacionarse con otros consejos sobre los que he escrito, como console.trace.
Tal vez sepamos que se produce un error en algún lugar de la pila de llamadas que conduce a function23, pero no sabemos la pila de llamadas exacta ya que la aplicación es dinámica. Podemos usar debug en function23 y luego usar la aplicación hasta que ocurra el error, lo que conducirá a una pausa en function23.
Ahora podemos insertar un console.trace en la primera línea de la función y luego reanudar la ejecución. Este console.trace nos dará la pila de llamadas exacta que conduce a la llamada function23 en este caso de uso.
¿Puedes ver cómo el uso conjunto de todos estos consejos e ideas puede realmente acelerar las cosas? ¡Eso significa más tiempo para hacer la codificación real!
Hasta la próxima vez.
Mantente hambriento y sigue codificando.
Añadir comentario