Los ajustes que cambian cómo depuras
Doce preferencias que valen su peso en horas, qué hace exactamente cada una, y cuáles conviene dejar apagadas por lo que le hacen a la fiabilidad de lo que ves.
El diálogo de preferencias de las DevTools tiene más de sesenta casillas y la mayoría no cambian nada relevante. Una docena sí, y varias de ellas modifican el comportamiento de la herramienta de forma tan profunda que quien las tiene activadas y quien no están usando programas distintos. Esta lección repasa esas doce, agrupadas por lo que hacen, y señala las tres que conviene dejar apagadas porque distorsionan lo que estás midiendo.
- Configurar las preferencias que afectan a la consola, la red y las fuentes con criterio.
- Explicar qué hace exactamente cada ajuste y a qué coste.
- Identificar las tres preferencias que falsean una medición o un diagnóstico.
- Sincronizar la configuración entre máquinas y saber qué se sincroniza y qué no.
Los ajustes por área
Los ajustes de la consola
Conservar el registro al navegar. Por defecto la consola se vacía en cada navegación, lo que es razonable y también es la causa de que se pierdan los errores más valiosos: los que ocurren justo antes de una redirección o de un envío de formulario. Con la conservación activada, esos mensajes sobreviven y aparecen separados por una línea que marca el cambio de documento. Actívala cuando persigas algo que ocurre alrededor de una navegación; desactívala el resto del tiempo, porque una consola con quince mil líneas retenidas es lenta y consume memoria.
Registrar las peticiones XHR y fetch. Escribe en la consola una línea por cada petición que sale, con su método y su URL. Es un sustituto pobre del panel de Network para inspeccionar, pero es un excelente detector de orden: te dice en qué punto de la secuencia de logs de tu aplicación se disparó cada llamada, algo que el panel de Network no te dice porque tiene su propia línea temporal.
Selección automática del contexto. Hace que el selector de contexto de ejecución siga al marco que hayas seleccionado en la pila de llamadas. Sin esto, es fácil estar detenido dentro de un iframe y evaluar expresiones contra el documento principal, obteniendo null en todo y desconcierto general.
Evaluar mientras escribes. Muestra el resultado de la expresión antes de pulsar entrar. Cómodo, y peligroso: evalúa de verdad. Si escribes a medias una expresión con efectos laterales, esos efectos ocurren. Escribir usuarios.pop y que la vista previa muestre la función es inofensivo; el problema son las propiedades con getters que hacen trabajo, que sí se ejecutan.
Agrupar mensajes similares. Colapsa mensajes idénticos consecutivos en uno con un contador. Reduce el ruido y esconde información: un mismo error que ocurre trescientas veces se ve como uno con un 300 al lado, y ese 300 es exactamente el dato importante. Merece la pena mirarlo.
Los ajustes de la red
Desactivar la caché. Fuerza que las peticiones de la página vayan a la red ignorando la caché HTTP, mientras las DevTools están abiertas. Es imprescindible durante el desarrollo y engañoso en cuanto quieres medir algo real, porque ningún usuario navega con la caché desactivada. Tiene además límites importantes que merecen su propia lección más adelante.
Filas grandes en el panel de red. Duplica la altura de cada fila y muestra dos datos por celda en vez de uno: en la columna de tamaño, el transferido y el descomprimido; en la de tiempo, el total y el TTFB. Ese segundo número es justo el que necesitas la mayoría de las veces, y sin filas grandes hay que ir columna a columna para conseguirlo.
Conservar el registro de red. El equivalente del de la consola, y con el mismo matiz: indispensable para depurar redirecciones, formularios que navegan y flujos de autenticación con varios saltos, y una fuente de consumo de memoria si se queda activado.
Los ajustes de fuentes y depuración
Habilitar los mapas de fuente de JavaScript y de CSS. Están activados por defecto y no deberías tocarlos salvo en un caso: cuando sospechas que el mapa está mintiendo. Desactivarlos muestra el código realmente ejecutado, que es la verdad, y comparar ambas vistas es la técnica para diagnosticar un mapa roto.
Añadir automáticamente a la lista de ignorados los scripts de terceros conocidos. Hace que el paso a paso y las pilas de llamadas salten el código de librerías cuando el propio paquete declara qué ficheros son suyos y no tuyos. Cambia radicalmente la experiencia de depurar una aplicación con framework, y es probablemente el ajuste con mejor relación entre lo que cuesta activarlo y lo que devuelve.
Buscar mientras escribes. Ejecuta la búsqueda en cada pulsación. En ficheros grandes o con búsqueda global sobre cientos de recursos, se nota.
Detección automática de la indentación. Respeta el estilo del fichero al editar en lugar de imponer el configurado. Trivial hasta que te toca hacer un override sobre un fichero ajeno.
El tema y la sincronización
El tema tiene tres valores: claro, oscuro y el del sistema. Hay una razón funcional para preferir el automático y no es la comodidad: si tu página implementa modo oscuro con prefers-color-scheme, tener las DevTools siguiendo al sistema te recuerda continuamente en qué modo está el sistema, y evita el clásico “he emulado el modo oscuro para probar y se me ha quedado activado tres días”.
La sincronización de ajustes vincula la configuración de las DevTools a tu cuenta de Chrome, de forma que las mismas preferencias aparecen en todas tus máquinas. Es cómodo y conviene saber qué entra y qué no: se sincronizan las preferencias, y no se sincronizan ni los snippets, ni los breakpoints, ni las carpetas de overrides, ni el mapeo del workspace. Todo eso es local a cada perfil de cada máquina.
Que los snippets no se sincronicen sorprende siempre, porque son justo lo que más querrías llevar contigo. La solución práctica es tratarlos como código: guardarlos en un repositorio y pegarlos cuando montes una máquina nueva. Es un poco manual y es lo que hay.
Las tres que conviene dejar apagadas por defecto
Hay preferencias que no son malas pero que distorsionan lo que ves, y tenerlas activadas permanentemente produce diagnósticos falsos.
Desactivar JavaScript. Existe, es útil para comprobar la degradación sin scripts, y si se queda activada produce el pánico más desconcertante posible: la página deja de funcionar entera y nada en el código explica por qué. La emulación es tan silenciosa que puedes tardar veinte minutos en acordarte.
Desactivar la caché, cuando estás midiendo. Ya se ha dicho y se repite porque es el error más común de todos: cualquier medición de carga hecha con la caché desactivada mide el peor caso absoluto, que no es el caso de ningún usuario recurrente.
El throttling residual. Un perfil de red lento o de CPU reducido que se queda puesto de una sesión anterior explica el noventa por ciento de los “hoy la aplicación va rarísima”. La barra de red muestra un aviso cuando hay throttling activo; acostúmbrate a mirarlo antes de sacar conclusiones sobre velocidad.
Al fondo del diálogo de preferencias hay un botón para restaurar todo a los valores de fábrica, y la mayoría de la gente lo ve como el botón del pánico. Es más que eso: es el equivalente para las DevTools de la ventana de incógnito para la página, y merece formar parte de tu repertorio de bisección. Las DevTools acumulan estado invisible con el tiempo —experimentos que activaste hace meses y olvidaste, emulaciones residuales, listas de ignorados con patrones que ya no aplican, columnas ocultas en el panel de red, filtros persistentes que hacen que no veas media docena de peticiones— y ese estado produce una categoría de problema particularmente sucia: la herramienta te miente y no hay nada en tu código que lo explique. El síntoma reconocible es cualquier frase de la forma “a mí no me sale eso” cuando dos personas miran la misma página. Antes de creerte que hay un bug de Chrome, restaura los valores por defecto y vuelve a mirar. Cuesta diez segundos, resuelve una fracción sorprendente de esos casos, y lo que pierdes son unas preferencias que vuelves a poner en un minuto. La lección general vale para todas las herramientas de desarrollo: la configuración acumulada es estado, y el estado no verificado es la causa raíz que nadie sospecha.