Abre las herramientas integradas en tu navegador para inspeccionar, probar y diagnosticar una página.
Abrir esta lección en KodokonTu navegador esconde un taller completo, ya instalado, gratuito y que la mayoría de la gente no abrirá jamás. Se le llama las herramientas de desarrollo, a menudo abreviadas como devtools. Para abrirlas, pulsa la tecla F12, o haz clic derecho en cualquier punto de una página y elige "Inspeccionar". En Mac, el atajo es Cmd + Opción + I. Entonces se abre un panel en el lateral o en la parte inferior de la ventana, con varias pestañas.
La primera pestaña, llamada Elementos o Inspector según el navegador, muestra el HTML de la página tal y como existe en este momento en la memoria del navegador. Pasa el cursor por encima de una línea: la zona correspondiente se ilumina en la página. Haz doble clic sobre un texto: puedes reescribirlo y ver el cambio al instante. Es la mejor manera de entender cómo está construida una página: desmontando las de los demás.
La pestaña Consola es la que más vas a frecuentar. Muestra los mensajes de error en rojo cuando algo se rompe, y también acepta instrucciones que escribes directamente, ejecutadas en el contexto de la página que tienes abierta. Pruébalo en cualquier sitio: escribe una línea, pulsa Intro y observa.
document.title
document.querySelectorAll("a").length
document.body.style.background = "gold"La pestaña Red hace visible todo lo que has aprendido en las lecciones anteriores. Ábrela y luego recarga la página con F5: cada petición aparece en su propia línea, con su dirección, su método, su código de estado, su peso y el tiempo que ha tardado. Una línea en rojo señala una petición fallida. Aquí es donde descubres, por ejemplo, que una imagen no se ve porque devuelve un 404.