Depurador de código de Visual Studio: introducción y captura de pantalla
En publicaciones anteriores, he hablado un poco sobre por qué es importante usar un depurador adecuado en comparación con algunas de las declaraciones integradas de PHP. En la última publicación, incluso, explico cómo configurar Xdebug con Visual Studio Code (y MAMP Pro, si lo está usando).
Pero si nunca ha usado una herramienta como esta antes, nunca ha visto cómo funciona o nunca ha visto por qué es tan poderosa, quiero cubrir un poco de eso en esta publicación.
Así que voy a explicar un poco cómo hacer esto en el contexto de algunas definiciones y capturas de pantalla, así como una breve presentación de pantalla al final para poder mostrar el funcionamiento del depurador de Visual Studio Code en acción.
El depurador de código de Visual Studio
Suponiendo que tiene instalado el depurador; hay algunos términos que vale la pena aprender. Claro, hay más, pero estos son los que considero claves:
- Los puntos de interrupción son donde le dice al programa que detenga su ejecución. Una vez que el código se detiene en este punto, puede examinar las variables, ver qué valores están almacenados en la memoria, etc.
- Los relojes son variables en el código que desea observar literalmente a medida que cambian a lo largo de la ejecución de las variables.
- Start pone en marcha el depurador. Incluso si tiene puntos de interrupción y relojes configurados, el depurador no hará nada hasta que lo inicie.
- Step Into es una acción que, cuando presiona una llamada de función, lo llevará a la función que se está invocando. A veces esto es útil, por ejemplo, si desea ver qué está haciendo la función; otras veces, es innecesario si solo te importa la ejecución de la función o solo te importa lo que devuelve.
- Step Over le permitirá pasar por encima de la ejecución de una función de modo que la ejecución del programa se detenga inmediatamente después de que finalice la función que ha pasado por alto.
- Step Out se usa cuando ha entrado en una función, llega a un punto en el que ha terminado de evaluar el código y luego está listo para volver a donde había establecido un punto de interrupción.
- Stop terminará la ejecución del depurador.
Suena relativamente claro, ¿no? En mi opinión, es más fácil ver esto en acción.
Además, para ver qué íconos hacen qué, generalmente lo mejor que se puede hacer es pasar el mouse sobre ellos y luego leer la información sobre herramientas; sin embargo, después de un tiempo o dos de usarlos, estará familiarizado con lo que hace cada uno.
Después de todo, los íconos son bastante descriptivos.
Un ejemplo
Dicho esto, suponiendo que haya seguido los pasos del artículo anterior, aquí hay un breve ejemplo de cómo puede establecer un punto de interrupción y seguir su ejecución a través de un complemento.
1 punto de ruptura
Observe en la imagen a continuación, he colocado un punto de interrupción al lado de una línea de código (como lo indica el punto rojo).
Aquí es donde la ejecución se detendrá una vez que inicie el depurador y comience a ejecutar el programa.
2 Establecer un reloj
Luego, ver una variable significa que queremos ver el valor de una variable a lo largo del ciclo de vida del programa. A continuación, agrego un reloj a la variable $descripción.
En la siguiente sección, verá el valor del reloj después de que la ejecución del programa pasara esa línea de código.
3 Evaluar el reloj
Una vez que el código ha pasado esa línea, puede ver el valor de la variable en la sección Observar del panel de depuración.
Observe en la función que hay una llamada a woocommerce_wp_text_input. Usaremos esta función como ejemplo para entrar en una función, ya que es una función que forma parte del núcleo de WooCommerce.
4 Prepárese para intervenir
Antes de ingresar a una función, es importante asegurarse de que el nombre de la función esté resaltado.
Una vez que haya terminado, podrá hacer clic en el botón Entrar para ver qué sucede en la función.
5 Entrar
Después de ingresar, verá un código que no escribió. En cambio, es un código que forma parte de WooCommerce (al menos en este ejemplo).
Según su experiencia, verá el código que tal vez escribió usted o que escribió otra persona.
6 Salir
Una vez que haya salido del código, volverá a la línea de código inmediatamente después de donde entró en el código.
¿Tener sentido?
Un Screencast
Y finalmente, aquí hay un screencast muy breve que explica cómo se ve todo lo anterior en acción:
Como se menciona en el video, esto no es completo, pero debería ser suficiente para mostrar cuán poderosa puede ser la depuración.
Se necesita tiempo y práctica
La depuración lleva un poco más de tiempo que descargar variables en la pantalla.
Y no digo que hacer eso no tenga su lugar; sin embargo, si desea obtener una comprensión más profunda de lo que sucede cada vez que ejecuta su programa, o si desea explorar, por ejemplo, el núcleo de WordPress, entonces usar un depurador es una muy buena manera de hacerlo.
Además, diría que el uso de un depurador puede ayudar a comprender mejor lo que va mal (o bien) dentro del contexto de su código para que pueda crear la mejor solución posible.