MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

What are browser developer tools?

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Cada navegador web moderno incluye un potente conjunto de herramientas para desarrolladores. Estas herramientas hacen una serie de cosas, desde la inspección de HTML, CSS y JavaScript actualmente cargado hasta mostrar qué activos la página ha solicitado y cuánto tardaron en cargarse. En este artículo se explica cómo utilizar las funciones básicas de los devtools de su  navegador.

Nota: Antes de ejecutar los siguientes ejemplos, abra el Ejemplo de sitio para principiantes que construimos durante la serie de Introducción a la Web. Debe tener esto abierto mientras sigue los pasos a continuación.

Cómo abrir los devtools en su navegador

Los devtools viven dentro de su navegador en una subventana que se parece más o menos a esto:

¿Cómo las abres? De tres maneras:

  • Teclado. Ctrl + Shift + I, excepto
    • Internet Explorer. F12
    • Mac OS X. ⌘ + ⌥ + I
  • Barra de menús.
    • Firefox. Menu  ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
    • Chrome. Ver ➤ Desarrollador ➤ Herramientas de Desarrollador
    • Safari. Desarrollar ➤ Mostrar Inspector Web. Si no puedes ver el menú de Desarrollo , ve a Safari Preferencias ➤ Advanzado, y comprueba el checkbox de Mostrar el menú del desarrollador en la barra de menús
    • Opera. Desarrollador ➤ Inspector Web
  • Menú de contexto. Pulse y mantenga pulsado el botón derecho del ratón en un elemento de una página web (Ctrl-clic en Mac), y selecciona Inspecionar Elemento en el menú contextual que aparece. (Una ventaja añadida: este método de inmediato resalta el código del elemento que ha hecho clic con el botón derecho.)

El Inspector: Explorador DOM y editor CSS

Los devtools normalmente se abren de forma predeterminada al inspector, que se parece a la siguiente captura de pantalla. Esta herramienta te permite ver como luce el HTML en tu página en tiempo de ejecución, así como 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 de visualización del navegador.

Si no ves el inspector,

  • Has clic en la pestaña Inspector.
  • En Internet Explorer, clic en Explorador DOM , o presiona Ctrl + 1.
  • En Safari, los controles no están tan claramente presentados, pero debería ver el código HTML si no ha seleccionado otra cosa que aparezca en la ventana. Presiona el botón Estyle para ver el CSS.

Explorando el inspector DOM

Para empezar, intenta hacer clic con el botón derecho del ratón (Ctrl-clic) en un elemento HTML en el inspector DOM y observa el menú contextual. Las opciones de menú varían entre los navegadores, pero las más importantes son principalmente las mismas

  • Eliminar nodo (a veces Eliminar Elemento). Elimina el elemento actual.
  • Editar como HTML (a veces agregar attributos/Editar texto). Le permite cambiar el código HTML y ver los resultados sobre la marcha. Muy útil para depurar y probar.
  • :hover/:active/:focus. Obliga a activar los estados de los elementos para que pueda ver cómo sería su estilo.
  • Copy/Copy as HTML. Copia el HTML seleccionado actualmente.
  • Algunos navegadores también tienen Copiar ruta CSS y Copiar XPath Disponible, para permitirte copiar el selector CSS o la expresión XPath que seleccionaría el elemento HTML actual.

Trata de editar algunos de tu DOM ahora. Has doble clic en un elemento o clic con el botón derecho en él y elija Editar como HTML desde el menú contextual. Puedes realizar los cambios que desees, pero no puedes guardar los cambios.

Explorando el editor CSS

De forma 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 específicidad.
  • Clic en el checkboxes a lado de cada declaración para ver que pasaría si fuera removida.
  • Haga clic en la pequeña flecha situada junto a cada propiedad abreviada para mostrar los equivalentes de longitudes de la propiedad.
  • Haga clic en un nombre de propiedad o valor para abrir un cuadro de texto, donde puede introducir un nuevo valor para obtener una vista previa en vivo de un cambio de estilo.
  • Junto a cada regla se encuentra el nombre de 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 saltarán para mostrarla en su propia vista, donde generalmente se puede editar y guardar.
  • También puede hacer clic en el cierre de cierre de cualquier regla para que aparezca un cuadro de texto en una nueva línea, donde puede escribir una declaración completamente nueva para su página.

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

  • computar: Esto muestra los estilos calculados para el elemento seleccionado actualmente (los valores finales normalizados que el navegador aplica).
  • Modelo de caja: Esto representa visualmente el modelo de caja del elemento actual, por lo que puede ver de un vistazo qué relleno, borde y margen se aplica a él y cuán grande es su contenido.
  • Fuentes: En Firefox, la pestaña Fuentes muestra las fuentes aplicadas al elemento actual.

Más información

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

La consola de JavaScript

La consola de JavaScript es una herramienta increíblemente útil para depurar JavaScript que no funciona como se esperaba. Le permite ejecutar líneas de JavaScript contra la página cargada actualmente en el navegador, e informa de los errores encontrados cuando el navegador intenta ejecutar su código. Para acceder a la consola en cualquier navegador, simplemente presione el botón de la consola. (En Internet Explorer, presione Ctrl + 2.) Esto le dará una ventana como la siguiente:

Para ver qué ocurre, intente introducir los siguientes fragmentos de código en la consola uno a uno (y luego presionando Enter):

  1. alert('hello!');
  2. document.querySelector('html').style.backgroundColor = 'purple';
  3. var myImage = document.createElement('img');
    myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
    document.querySelector('h1').appendChild(myImage);

Ahora intente ingresar las siguientes versiones incorrectas del código y vea lo que obtiene.

  1. alert('hello!);
  2. document.cheeseSelector('html').style.backgroundColor = 'purple';
  3. var myImage = document.createElement('img');
    myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
    document.querySelector('h1').appendChild(myImage);

Comenzarás a ver el tipo de errores que devuelve el navegador. A menudo, estos errores son bastante crípticos, pero debe ser bastante simple para resolver estos problemas!

Más información

Obtenga más información sobre la consola de JavaScript en diferentes navegadores:

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: DaniNz
 Última actualización por: DaniNz,