Chrome Developer Tools

Guía definitiva de Chrome Developer Tools

Bienvenido al primer capítulo de la Guía definitiva de Google Chrome Developer Tools o lo que es lo mismo "Guía definitiva de las heramientas para desarrolladores de Google Chrome". En esta guía conocerás de una forma rápida todos las características de este complemento y aprenderás a sacarle el máximo partido.

Si ya estás familiarizado con el entorno de las Developer Tools, puede que esta primera parte te parezca algo básica, pero de igual manera te invito a que la leas, puede que encuentres alguna característica que desconocías o bien puedas aportar información complementario a los demás usuarios participando con un comentario.

Introducción a las herramientas para desarrolladores de Chrome

Chrome Developer Tools te permite profundizar en las entrañas de una página web y revisar casi todo, desde su estructura hasta los recursos utilizados. En general puedes:

  • Obtener una visión general de los estilos utilizados en una página y que estilo se aplica a cada elemento.
  • Visualizar y modificar el código correspondiente a los elementos HTML
  • Modificar un estilo y ver los cambios en el navegador en tiempo real
  • Ejecutar código JavaScript en el contexto de la página
  • Ver las peticiones HTTP realizadas por el navegador
  • Identificar cuellos de botella que afecten al rendimiento
  • Consultar métricas de rendimiento
  • Investigar los recursos offline para averiguar que datos de la página se almacenan localmente
Ventana Chrome Developer Tools

Instalación y apertura

Puedes utilizar las herramientas de desarrollo de Chrome en las diferentes versiones del navegador: Chrome Canary y Chrome Chromium.

Descarga e instalar el navegador (disponible para Windows, Mac y Linux) desde: http://google.com/chrome. Una vez abierto, tenemos diferentes formas para abrir las Developer Tools:

  • Tecla rápida: Ctrl+Shift+i (en Windows/Linux) - Cmd+Alt+i (en Mac)
  • Haciendo clic derecho sobre un elemento de la página y seleccionando "Inspeccionar elemento"
  • Desde el menú de Chrome -> Herramientas -> Herramientas para desarrolladores
Abrir Chrome Developer Tools

Controles de la interfaz

Veámos los diferentes controles de la interfaz de Chrome Developer Tools:

  1. Los diferentes paneles de herramientas.
  2. Anclar/Desanclar las herramientas de desarrollo de la ventana del navegador.
  3. Muestra/oculta la consola.
  4. Inspeccionar un elemento. Haz click en la herramienta inspeccionar y selecciona un elemento de la página para ver sus propiedades.
  5. Errores de JavaScript que hay en la página.
  6. Abre la pantalla de configuración de las herramientas de desarrollo.
  7. Botón para cerrar las herramientas de desarrollo.
Controles de la interfaz Developer Tools

Desacoplar la ventana de las Herramientas de Desarollo puede ser últil y muy cómodo si tienes dos monitores por ejemplo.

Panel elementos

  1. Código fuente de la página
  2. Un elemento, si tiene una flecha significa que tiene elementos hijos. Si la flecha está hacia abajo significa que los elementos están contraídos
  3. Miga de pan (o como se conoce en inglés "Breadcrumb"). Se índica desde el elemento inicial <html> hasta el elemento selccionado. Si pasas el cursor por encima de la miga de pan, destacará el elemento correspondiente en la ventana del navegador.
  4. Paneles plegables que muestran el estilo u otras características aplicadas al elemento.
  5. Panel "Computed Style": muestra información de los estilos del elemento seleccionado.
  6. "Show inherited": muestra los estilos heredados, así como los estilos por defecto del navegador que se aplican al elemento seleccionado.
  7. Muestra los estilos incrustados directamente sobre un elemento del html, estilos añadido a través de JavaScript y estilos añadido a través de las herramientas de desarrollo.
  8. Botón "Añadir nueva regla de estilo": permite crear crea una regla de estilo nuevo para el elemento seleccionado.
  9. Botón para desplegar/plegar los estilos que se aplican sobre el elemento en los estados: hover, activo, foco y visitado.
  10. Te permite escoger el formato preferido para los valores de color. El valor por defecto es "como autor" en el que el color se muestra tal cual está indicado en el estilo. Puedes cambiarlo a hexadecimal, RGB y HSL.
  11. En el panel "Metrics" puedes ver los valores de margin, padding y border aplicado al elemento, así como su ancho y alto.
Panel elementos de Developer Tools

Modificar el DOM

Modificar el DOM en el panel de elementos es un proceso bastante sencillo. Para eliminar un nodo, simplemente haz clic en él y selecciona Eliminar nodo. Ten en cuenta que al eliminar el nodo padre también se eliminan sus hijos. También puedes pulsar la tecla suprimir o retroceso para eliminar el nodo seleccionado con el teclado.

Cambiar el tipo de un elemento es posible haciendo doble clic en el nombre del elemento en sí. Por ejemplo: si cambiamos un elemento span a un div cambiará tanto la etiqueta de apertura como la de cierre.

Añadir atributos

La adición de atributos se realiza haciendo clic derecho en un elemento y seleccionando Add atribute. El cursor se posicionará inmediatamente a continuación del elemento seleccionado para empezar a escribir el atributos que quieres agregar al elemento. Por ejemplo: class="center". Si pulsas tabulador el cursor se desplazará permitiendote añadir un nuevo atributo.

Añadir atributos de Developer Tools

Editar atributos

La edición de atributos es similar a la adición. Busca el atributo que quieres modificar y haz doble clic en el nombre del atributo o su valor. Verás destacado el elemento además de su clase/id y el ancho y alto que ocupa.

Editar atributos de Developer Tools

Editar el código html

Para editar el HTML directamente desde la herramienta de desarrollo tienes que hacer click derecho sobre el elemento y escoger Edit as HTML

Localizar elementos

Si seleccionas un elemento verás una capa con información sobre el elemento correspondiente de la página web.

Si sobre un elemento haces click derecho y seleccionas "Scroll into view" te desplazará el cursor hasta la parte de la página donde está localizado ese elemento.

Las herramientas de desarrollo también disponen de una función de búsqueda interna, por lo que si dentro de la ventana de las Dev Tools pulsas Ctrl+F se abrirá un cuadro de búsqueda, para localizar el elemento que estás buscando.

Buscar elementos de Developer Tools

Visualización de la información del estilo

Ya habrás podido comprobar que al situarte encima de un elemento aparecen unos cuadros de colores sobre dicho elemento en la página web. Estos colores representan: el margin (en color anaranjado), el padding (en verde), el borde (en beige) y el propio elemento (color azul). Esto nos da una información rápida sin necesidad de ver el panel de estilos.

Esta misma información puedes obtenerla desde el panel Metrics

Información elementos de Developer Tools

Añadir y modificar estilos

Para añadir y/o modificar estilos directamente a una clase o id dirígete al panel Styles ubicado a la derecha, en Matched CSS Rules verás los estilos pertenecientes a la clase o id que afectan a ese elemento, si haces click sobre una de sus propiedades puedes modificarlo. Para añadir un nuevo estilo, haz un click dentro de las llaves de la clase/id de ese elemento. Verás que al empezar a escribir la propiedad aparecerá una ventana de sugerencias, pulsa tabulador o enter para autocompletar la propiedad y posteriormente indica el nuevo valor.

Añadir/Modificar propiedad de Developer Tools

Si prefieres modificar los estilos de un elemento en particular y no a una clase o id, haz de hacerlo directamente desde el panel Styles. Un click dentro de las llaves bastará para añadir una propiedad o bien utilizando el botón + New Style Rule.

Añadir/Modificar estilos elementos de Developer Tools

Cosas a tener en cuenta:

  • Si escribes incorrectamente una propiedad aparecerá un icono de warning a la izquierda de la propiedad.
  • Si haces click sobre un pequeño cuadrado de color aparecerá una ventana flotante, para poder escoger el color desde una paleta de color.
  • Si pulsas shift+click sobre un pequeño cuadro de color, cambiarás el formato de color.
  • En una propiedad con un valor en porcentaje o píxeles si seleccionas el valor y pulsas Shift+Flecha arriba/abajo, puedes variar de 10 en 10 su valor.
Modificar color de Developer Tools

Panel de Recursos

El panel Recursos muestra los recursos utiliza una página.

  1. El panel de la izquierda muestra los distintos tipos de recursos que puedes inspeccionar. Desde información de almacenamiento de sesión hasta información de cookies. Haciendo click en la flecha se desplegará un submenú con más opciones.
  2. Muestra los detalles sobre el recurso seleccionado en el panel de la izquierda.
  3. En el menú frames obtendremos información de lso recursos utilizados, incluyendo imágenes, hojas de estilo, fuentes, archivos JavaScript...
  4. Si la página web utiliza bases de datos SQL la información se mostrará aquí.
  5. Si la página web utiliza base de datos IndexedDB mostrará su información aquí.
  6. Se muestran los pares clave/valor almacenados en localStorage.
  7. Se muestran los pares clave/valor almacenados en sessionStorage.
  8. Muestra las cookie creadas por el dominio.
  9. Muestra los activos almacenados en caché.
Panel recursos de Developer Tools

La opción Frame nos muestra información detallada de los siguientes elementos de la página:

  • Imágenes
  • Hojas de estilo
  • Fuentes
  • Scripts
  • Recursos que no han podido ser cargados (verás un pequeño icono rojo a la derecha del recurso no disponible). El número junto al icono indica la cantidad de errores detectados

Hasta aquí este primer capítulo. En los siguientes capítulos trataré los restantes paneles que quedaron sin explicar en esta guía. Hasta el próximo artículo :)