Todos los navegadores web modernos incluyen un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una variedad de cosas, desde inspeccionar HTML, CSS y JavaScript actualmente cargados, hasta mostrar qué activos ha solicitado la página y cuánto tiempo tardaron en cargarse. Este artículo explica cómo utilizar las funciones básicas de las herramientas de desarrollo de tu navegador.

Nota:

Antes de ejecutar los siguientes ejemplos, abre el sitio de ejemplo para principiantes que crearemos durante avanzamos en este curso.

Las herramientas para desarrolladores (devtools) viven dentro de tu navegador en una subventana que se ve más o menos así, dependiendo del navegador que estés utilizando:

¿Cómo la levantas? Existen tres distintas maneras:

- _Teclado: Ctrl+Mayús+I_, excepto en
- Internet Explorer y Edge: F12
- macOS: ⌘+⌥+I

- Barra de menú:

- Firefox: Menú ➤ Desarrollador web ➤ Alternar herramientas,_ o ➤ Herramientas _➤ Alternar herramientas del desarrollador web_

- Chrome: Más herramientas ➤ Herramientas del desarrollador

- Safari: Desarrollador ➤ Mostrar el inspector web. Si no puedes ver el menú Desarrollar, ve a Safari ➤ Preferencias ➤ Avanzado y marca la casilla de verificación _Mostrar menú desarrollador en la barra de menú_.

- Opera: Desarrollador ➤ Herramientas para desarrolladores

- _Menú contextual:_ Presiona y mantén presionado / haz clic con el botón derecho en un elemento en una página web (Ctrl-clic en Mac) y elige Inspeccionar elemento en el menú contextual que aparece. (_Una ventaja adicional:_ este método, inmediatamente resalta el código del elemento en el que hiciste clic con el botón derecho).