Para qué sirven las Chrome DevTools

Chrome DevTools es un conjunto de herramientas de creación y depuración de sitios web integrado en Google Chrome. Por supuesto, también podemos usarlas en su versión de código abierto; Chromium.

Es posible acceder a las herramientas de Chrome para desarrolladores pulsando la combinación de teclas Ctrl+Mayúscula+I, también posando el puntero sobre un elemento y con el botón derecho pulsando en Inspeccionar.

Componentes

Cuando abrimos Chrome DevTools vemos que aparece un panel a la derecha de la página en la que estamos navegando. Por su parte, este panel está dividido en pestañas correspondientes a cada una de las herramientas. A su vez las herramientas están divididas en secciones.
Las secciones son:

• Elements: Muestra los diferentes componentes de la página.
• Console: Permite ejecutar diagnósticos durante el desarrollo o interactuar con el código Javascript como lo harías con la terminal de Linux.
• Sources: Facilita depurar el código Javascript y trabajar con archivos locales.
• Network: Ayuda a monitorizar y mejorar el rendimiento de la página.
• Timeline:  Permite la grabación y la exploración de los diferentes eventos que ocurren durante la visita a un sitio.
• Application: Investiga todos los recursos que se cargan; entre otros, bases de datos IndexedDB o Web SQL, almacenamiento local y de sesión, cookies, caché de la app, imágenes, fuentes y hojas de estilos.
• Security: Detecta problemas de seguridad en el código.

Veamos para qué podemos usar Chrome DevTools

Corregir lo que no funciona

A todo desarrollador le ha pasado. Escribir el código, verificar que no haya errores, y sin embargo a la hora de la verdad la página no funciona como debería.  La herramienta Console nos muestra cuál es el error que se está produciendo en el momento de la ejecución.

Disminuir tiempo de carga

Si una página tarda mucho tiempo en cargarse, el usuario se cansa y va a otro sitio. Afortunadamente ya pasó la época de las web en Flash y sus intros animadas. De todas formas la pestaña Networks de la Chrome DevTools hace más fácil descubrir que elementos son los que retrasan la carga. Podemos repetir la prueba para diferentes velocidades de conexión.

Modificar el código

En la pestaña Elements podemos ver a los elementos de una página, el código html relacionado y las propiedades css. También podemos cambiarlas.

Podemos editar el texto de una página usando el comando

document.designMode = 'on';

Probar diferentes tamaños de pantalla

Tabletas, smartphones, smart TV, computadoras de escritorio. La lista de dispositivos con los que navegamos por Internet es cada vez mayor. Con Chrome DevTools podemos probar si una página se ve bien en diferentes tamaños.

Benchmarking

En Management el término benchmarking significa aprender de las mejores prácticas de los que hacen lo mismo que nosotros. Con Chrome DevTolls, si nos gusta el diseño de un sitio web podemos ver el código html y las hojas de estilo css y copiarlas en nuestro sitio.

Consiguiendo Chrome DevTools

Chrome DevTools está disponible en los navegadores Google Chrome y Chromium. Chromium está en los repositorios de las principales distribuciones. También puede instalarse desde las tiendas de Snap. En cuanto a Google chrome puede conseguirse aquí. en formato DEB y RPM