26 de marzo de 2023

Debugging en el navegador

Antes de escribir código más complejo, hablemos de debugging.

Todos lo exploradores modernos y la mayoría de los otros ambientes soportan el “debugging” – una herramienta especial de UI para desarrolladores que nos permite encontrar y reparar errores más fácilmente.

Aquí utilizaremos Chrome porque es uno de los que mejores herramientas tienen en este aspecto.

El panel “sources/recursos”

Tu version de Chrome posiblemente se vea distinta, pero sigue siendo obvio lo que hablamos aquí.

  • Abre la pagina de ejemplo en Chrome.
  • Activa las herramientas de desarrollo con F12 (Mac: Cmd+Opt+I).
  • Selecciona el panel sources/recursos.

Esto es lo que debería ver si lo está haciendo por primera vez:

El botón botón de activación (toggle button) abre la pestaña con los archivos.

Hagamos click allí y seleccionemos index.html y luego hello.js en el árbol de archivos. Esto es lo que se debería ver: