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 creamos durante la serie de artículos Introducción a la Web. Lo deberías tener abierto mientras sigues los pasos que explicamos a continuación.
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:
➤ Desarrollador web ➤ Alternar herramientas, o ➤ Herramientas ➤ Alternar herramientas del desarrollador web
Las herramientas del desarrollador, generalmente se abren de forma predeterminada en el inspector, parecido a la siguiente captura de pantalla. Esta herramienta muestra cómo se ve el HTML en tu página en tiempo de ejecución, así como qué CSS se aplica a cada elemento de la página. También te permite modificar instantáneamente el HTML y CSS y ver los resultados de tus cambios reflejados en vivo en la ventana del navegador.
Si no ves al inspector,
Para empezar, haz clic con el botón derecho (Ctrl+clic) en un elemento HTML en el inspector del DOM y observa el menú contextual. Las opciones disponibles en el menú varían según el navegador, pero en su mayoría, las más importantes son las mismas:
Intenta editar algo de tu DOM ahora. Haz doble clic en un elemento o haz clic con el botón derecho del mouse y selecciona Editar como HTML en el menú contextual. Puedes realizar los cambios que desees, pero no los puedes guardar.
De manera predeterminada, el editor CSS muestra las reglas CSS aplicadas al elemento seleccionado actualmente:
Estas características son especialmente útiles:
Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del Visor CSS:
Obtén más información sobre el Inspector en diferentes navegadores:
El depurador de JavaScript te permite observar el valor de las variables y establecer puntos de interrupción, lugares en tu código en los que deseas pausar la ejecución e identificar los problemas que impiden que tu código se ejecute correctamente.
Para llegar al depurador:
Firefox: Selecciona ➤ Desarrollador Web ➤ Depurador o presiona Ctrl+Mayús+S para abrir el depurador de JavaScript. Si ya estás viendo las herramientas, haz clic en la pestaña Depurador.
Chrome: Abre las herramientas para desarrolladores y luego selecciona la pestaña Fuentes. (Opera funciona de la misma manera).
Edge e Internet Explorer 11: presiona F12 y luego Ctrl+3, o si ya estás viendo las herramientas, haz clic en la pestaña Depurador.
Safari: Abre las herramientas para desarrolladores y luego selecciona la pestaña Depurador.
En Firefox hay tres paneles en el depurador de JavaScript.
El primer panel de la izquierda contiene la lista de archivos asociados con la página que estás depurando. Selecciona el archivo con el que deseas trabajar de esta lista. Haz clic en un archivo para seleccionarlo y ver su contenido en el panel central del depurador.
Establece puntos de interrupción donde desees pausar la ejecución. En la siguiente imagen, el resaltado del número 18 muestra que la línea tiene un punto de interrupción establecido.
El panel de la derecha muestra una lista de las expresiones en observación que has agregado y los puntos de interrupción que has establecido.
En la imagen, la primera sección, Ver expresiones, muestra que se ha agregado la variable listItems. Puedes expandir la lista para ver los valores del arreglo.
La siguiente sección, Puntos de interrupción, enumera los puntos de interrupción establecidos en la página. En example.js, se ha establecido un punto de interrupción en la instrucción listItems.push(inputNewItem.value);
Las dos últimas secciones solo aparecen cuando el código se está ejecutando.
La sección Pila de llamadas muestra qué código se ejecutó para llegar a la línea actual. Puedes ver que el código está en la función que maneja un clic del mouse y que el código está actualmente en pausa en el punto de interrupción.
La sección final, Alcances, muestra qué valores son visibles desde varios puntos dentro de tu código. Por ejemplo, en la siguiente imagen, puedes ver los objetos disponibles para el código en la función addItemClick.
Obtén más información sobre el depurador de JavaScript en diferentes navegadores:
La consola de JavaScript es una herramienta increíblemente útil para depurar JavaScript que no funciona como se esperaba. Te permite ejecutar líneas de JavaScript en la página actualmente cargada en el navegador e informa los errores encontrados cuando el navegador intenta ejecutar tu código. Para acceder a la consola en cualquier navegador:
Si las herramientas para desarrolladores ya están abiertas, haz clic o presiona la pestaña Consola.
De lo contrario, Firefox te permite abrir la consola directamente usando Ctrl+Mayús+K o usando el comando del menú: Menú ➤ Desarrollador web ➤ Consola web, o Herramientas ➤ Desarrollador web ➤ Consola web. En otro navegador, abre las herramientas para desarrolladores y luego haz clic en la pestaña Consola.
Esto te dará una ventana como la siguiente:
Para ver qué sucede, intenta ingresar los siguientes fragmentos de código en la consola uno por uno (y luego presiona Intro):
alert('hello!');
document.querySelector('html').style.backgroundColor = 'purple';
const myWordmark = document.createElement('img');
myWordmark.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myWordmark);
Ahora intenta ingresar las siguientes versiones incorrectas del código y ve lo que obtienes.
alert('hello!);
document.cheeseSelector('html').style.backgroundColor = 'purple';
const myWordmark = document.createElement('img');
myBanana.setAttribute('src','https://blog.mozilla.org/press/wp-content/themes/OneMozilla/img/mozilla-wordmark.png');
document.querySelector('h1').appendChild(myWordmark);
Comenzarás a ver el tipo de errores que devuelve el navegador. A menudo, estos errores son bastante crípticos, ¡pero debería ser bastante sencillo resolver estos problemas!
Obtén más información sobre la consola de JavaScript en diferentes navegadores: