¿Cuáles son las herramientas de desarrollo del navegador?

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).

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,

• Toca o haz clic en la pestaña Inspector.
• En Internet Explorer, toca/haz clic en Explorador del DOM o presiona Ctrl + 1 .
• En Microsoft Edge u Opera, toca/haz clic en Elementos.
• En Safari, los controles no se presentan con tanta claridad, pero deberías ver el HTML si no has seleccionado otra cosa para que aparezca en la ventana. Presiona el botón Estilo para ver el CSS.

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:

• Eliminar nodo (A veces Eliminar elemento). Elimina el elemento actual.
• Editar como HTML (A veces Agregar atributo/Editar texto). Te permite cambiar el HTML y ver los resultados en tiempo real. Muy útil para depurar y probar.
• :hover/:active/:focus. Obliga a que se activen los estados de los elementos, para que puedas ver cómo se vería su estilo.
• Copiar/Copiar como HTML. Copie el HTML seleccionado actualmente.
• Algunos navegadores también disponen de Copiar ruta CSS y Copiar XPath, para permitirte copiar el selector CSS o la expresión XPath que seleccionaría el elemento HTML actual.

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:

• Las reglas aplicadas al elemento actual se muestran en orden de mayor a menor especificidad.
• Haz clic en las casillas de verificación junto a cada declaración para ver qué pasaría si eliminaras la declaración.
• Haz clic en la pequeña flecha al lado de la abreviatura de cada propiedad para mostrar los nombres completos equivalentes de la propiedad.
• Haz clic en el nombre o valor de una propiedad para que aparezca un cuadro de texto, donde puedes ingresar un nuevo valor para obtener una vista previa en vivo de un cambio de estilo.
• Junto a cada regla está el nombre del archivo y el número de línea en el que se define la regla. Al hacer clic en esa regla, las herramientas de desarrollo saltan para mostrarlas en su propia vista, donde generalmente puedes editar y guardar.
• También puedes hacer clic en la llave de cierre de cualquier regla para que aparezca un cuadro de texto en una nueva línea, donde puedes escribir una declaración completamente nueva para tu página.

Notarás una serie de pestañas en las que se puede hacer clic en la parte superior del Visor CSS:

• Calculado: Muestra los estilos calculados para el elemento seleccionado actualmente (los valores finales normalizados que aplica el navegador).
• Diseño: En Firefox, esta área incluye dos secciones:
  • Modelo de caja: representa visualmente el modelo de caja del elemento actual, por lo que de un vistazo puedes identificar qué relleno, borde y margen se le aplica, y qué tan grande es su contenido.
  • Cuadrícula: Si la página que estás inspeccionando utiliza Grid CSS, esta sección te permite ver los detalles de la cuadrícula.
• Fuentes: En Firefox, la pestaña Fuentes muestra los tipos de letra aplicados al elemento actual.

Obtén más información sobre el Inspector en diferentes navegadores:

• Inspector de páginas de Firefox.
• Explorador del DOM de Edge.
• inspector del DOM de Chrome. (el inspector de Opera funciona igual que este)
• Safari inspector y explorador de estilos.

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.

Lista de archivos

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.

Código fuente

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.

Ver expresiones y puntos de interrupción

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:

• Depurador de JavaScript en Firefox.
• Depurador de Microsoft Edge.
• Depurador de Chrome.
• Depurador de Safari.

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:

• Consola Web de Firefox.
• Consola de JavaScript Edge.
• Consola JavaScript de Chrome. (el inspector de Opera funciona de la misma manera)
• Consola en Safari.

• Depurar HTML.
• Depurar CSS. (en-US)