Chrome DevTools – Características cruciales

Las Chrome DevTools son mucho más que un inspector de HTML y un debugger. Este artículo apunta a mostrar las funcionalidades más importantes, y para muchos desconocidas, de las herramientas de desarrollo del popular navegador. Limitándonos a las 4 más usadas (Elements, Network, Sources y Console).

Conceptos básicos

Las Chrome DevTools o herramientas de desarrollo de Chrome se acceden a través de opciones > más herramientas > herramientas del desarrollador:

openDevTools

O presionando F12, Ctrl + Shift + I o Ctrl + Shift + J (acceso directo al tab console).

Debugging

La ejecución de JavaScript se puede detener con un breakpoint en la línea deseada. Pero ¿qué hacer cuando no conocemos el origen del problema y las consecuencias?

Dom y XHR Breakpoints

No es inusual encontrarnos con un tooltip que niega a cerrarse o un panel que cambia su altura en un par de pixeles. La causa de estos problemas suele yacer en código de la librería, minificado, pero que (por supuesto) es disparado por un evento o acción de usuario desconocida.

En la pestaña Elements, haciendo click derecho sobre el árbol HTML, podemos establecer un breakpoint de DOM que detendrá la ejecución de JavaScript según nuestras necesidades:

2017-01-24_171748

¿Sabías que tipeando $0 en el tab console podemos obtener el elemento DOM seleccionado en el tab elements ?

Otro escenario plantea otra necesidad: ¡Mis requests están disparándose a destiempo!

Mucho mejor que establercer un breakpoint en cada posible petición al servidor, podemos configurar un breakpoint XHR, y caminar hacia atrás desde el callstack.

Podemos cambiar el theme de las DevTools  presionando ctrl + shift + p y seleccionando “Switch to dark theme”

Haciendo click derecho sobre un breakpoint podemos convertirlo en un breakpoint condicional, agregando una sentencia javascript cuya evaluación determinará si  detiene o no la ejecución.

Hablando de callstack…

El callstack, en las Chrome DevTools (al igual que en cualquier debugger javascript) es interactivo: quizá su característica menos conocida sea la posibilidad de explorar a través de llamadas asíncronas. Esto se logra marcando el checkbox  “Async” ubicado en la parte superior derecha de la pestaña de sources.

Con esta funcionalidad habilitada, podremos interceptar la ejecución diferida de código y analizar el callstack asíncrono: útil para cualquiera que haya intentado debuggear un setTimeout.

Sólo tendremos la referencia al método que inició la ejecución asíncrona, no podremos inspeccionar el valor que tenían las variables y parámetros al momento de ejecutarse.

Network

La pestaña de network no sólo es un log, una de las características menos visitadas y más útiles es la de “repetir request”, haciendo click derecho sobre cualquier petición y seleccionando la opción en el menú contextual. Su funcionamiento es el esperado: repite la petición del recurso con los mismos parámetros y headers.

Posicionando el mouse sobre la columna Initiator en la pestaña Network podemos ver el callstack que derivó en la llamada en cuestión.

Edición de estilos

En la pestaña elements no sólo podemos editar el código en HTML, también tenemos herramientas poderosas para editar CSS y persistir esos cambios.

Persistencia

Lo primero que debemos hacer para permitir que Chrome persista nuestros cambios es seguir los pasos en este tutorial. Esto permitirá que cualquier cambio en nuestra hoja de estilos se guarde automáticamente.

Edición

El editor de estilos nos provee de dos (o tres) funcionalidades importantes, además de la obvia posibilidad de editar atributos en vivo:

Un conversor entre RGB , HEX  y HSL  además de un color picker. Accesible clickeando sobre el cuadrado que precede al nombre del color.

De forma similar podemos acceder a un editor básico de animaciones como el siguiente:

El listado de características y atajos que nos ofrecen las Chrome DevTools es imposible de enumerar en un solo artículo, pero, habiendo repasado aquéllas que hacen una diferencia notable en la velocidad de desarrollo y debugging, es un buen momento para finalizar este resumen.