Docking, el cajón y la disposición del espacio
Cómo colocar las DevTools según lo que estés depurando, por qué el modo desacoplado no es una preferencia estética, y qué le hace cada disposición al layout de tu página.
La colocación del panel parece cuestión de gusto y no lo es del todo: acoplarlo a un lado reduce el ancho del viewport de la página, lo que dispara media queries y container queries y puede hacer que estés depurando un layout distinto del que reportó el usuario. Desacoplarlo devuelve el ancho real pero rompe la relación visual entre panel y página. Cada disposición sirve para un tipo de trabajo, y elegir bien evita una clase entera de falsos positivos.
- Elegir la disposición del panel según el tipo de depuración que vas a hacer.
- Explicar cómo afecta cada modo de acoplamiento al viewport y a las consultas de la página.
- Configurar el cajón inferior con las pestañas que de verdad usas y saber moverlas.
- Reconocer cuándo un bug de layout es en realidad un artefacto del panel acoplado.
Los cuatro modos y qué le hace cada uno al viewport
Hay cuatro disposiciones: acoplado abajo, acoplado a la derecha, acoplado a la izquierda y desacoplado en su propia ventana. Se cambian desde el menú de comandos escribiendo dock, que es la vía que no envejece, y también con el atajo Cmd+Shift+D o Ctrl+Shift+D, que rota entre la última posición usada y la anterior.
La diferencia que importa no es dónde se ven los píxeles, es esto: en cualquier modo acoplado, el viewport de la página se encoge. La ventana del navegador no cambia de tamaño, pero el área donde se renderiza el documento sí, y para el CSS eso es indistinguible de una ventana más pequeña. Acoplar a la derecha en una pantalla de 1440 puntos con un panel de 600 deja a la página en 840, que es territorio de tablet en la mayoría de sistemas de breakpoints.
Las consecuencias son concretas y he visto perder tardes con las tres.
Una media query que no debería aplicarse se aplica, y estás depurando el layout de tablet creyendo que es el de escritorio.
Una container query cambia de rama, porque el contenedor también se encogió.
Un cálculo de JavaScript basado en window.innerWidth o en un ResizeObserver devuelve otro número, y la lógica que decide cuántas columnas pintar toma otra decisión.
Si el bug que persigues es de layout, compruébalo siempre con el panel desacoplado o abajo antes de creerte nada. Acoplar abajo también reduce la altura, lo que afecta a 100vh, a los observadores de intersección con margen de raíz y a la lógica de scroll infinito, así que ni siquiera esa posición es neutra. La única disposición que deja el viewport intacto es la desacoplada.
Cuándo usar cada uno
Acoplado abajo es la disposición para trabajo de red y de rendimiento. El waterfall y el flame chart son gráficos anchos donde el eje horizontal es el tiempo: cuanto más ancho, más resolución temporal. Un waterfall de 400 puntos de ancho es ilegible.
Acoplado a la derecha o a la izquierda es la disposición para trabajo de Elements. El árbol del DOM y el panel de estilos son listas verticales, así que la altura es lo que da información y el ancho sobra. Además, tener la página al lado y el árbol en vertical mantiene la correspondencia visual mientras recorres nodos. Es la disposición donde más gente vive, y con razón, siempre que se recuerde el aviso del viewport.
Desacoplado en su propia ventana es la disposición para tres casos: depurar layout responsive sin artefactos, trabajar con dos monitores, y depurar código que reacciona al tamaño de la ventana. Tiene un cuarto uso menos obvio: es la única forma de abrir DevTools sobre las propias DevTools, porque en la ventana desacoplada el atajo de apertura vuelve a estar disponible.
El cajón inferior es donde vive la mitad de la herramienta
El cajón —la zona que aparece y desaparece con Esc— empieza mostrando la consola, y esa es la razón de que mucha gente crea que el cajón es la consola. No lo es: es un segundo contenedor de pestañas, y ahí viven algunas de las herramientas más útiles del conjunto.
Por defecto suelen estar disponibles la consola, los problemas detectados y la búsqueda. Añadiendo pestañas desde el menú de comandos o desde el botón de más del propio cajón se accede a la lista completa, que incluye entre otras el bloqueo de peticiones, las condiciones de red, la cobertura de código, las animaciones, los sensores, el resumen de cambios y los ajustes de renderizado.
El valor del cajón es la simultaneidad. Depurar bien casi siempre requiere ver dos cosas a la vez, y el par que necesitas cambia según el problema.
| Panel principal | Pestaña del cajón | Para qué |
|---|---|---|
| Elements | Cambios | Ver el diff de todo lo que has editado en los estilos |
| Elements | Renderizado | Simular preferencias mientras miras el árbol |
| Network | Bloqueo de peticiones | Cortar un recurso y ver el efecto en la misma pantalla |
| Network | Condiciones de red | Cambiar el perfil sin abandonar el waterfall |
| Sources | Consola | Evaluar expresiones en el marco donde estás detenido |
| Sources | Cobertura | Ver qué partes del fichero abierto se han ejecutado |
| Elements | Animaciones | Capturar y ralentizar la transición del nodo seleccionado |
Las pestañas del cajón se pueden reordenar arrastrando, y algunas se pueden mover entre el cajón y la barra principal, de forma que la disposición se puede adaptar al tipo de trabajo que hagas más. Merece la pena dedicarle cinco minutos una vez.
Hay una configuración de trabajo que muy poca gente usa y que resuelve un problema real: dos instancias de DevTools sobre la misma página no se pueden tener, pero sí se puede tener una instancia desacoplada en un monitor y una vista de la página en otro, con el panel a pantalla completa. Con el panel desacoplado y maximizado, el cajón inferior deja de ser una franja apretada y pasa a ocupar media pantalla, lo que cambia cualitativamente el trabajo con el flame chart, con el waterfall y con la comparación de snapshots de memoria: esos tres paneles son ilegibles en 300 puntos de alto y perfectamente legibles en 800. Y hay un segundo truco relacionado que resuelve el caso opuesto: cuando necesitas que la página tenga un tamaño exacto y reproducible —para comparar una captura, para reproducir el bug de un usuario con una resolución concreta, para verificar un breakpoint— el modo de emulación de dispositivo con dimensiones fijadas a mano es preferible a redimensionar la ventana a ojo, porque el número es reproducible y porque el panel acoplado ya no afecta al ancho declarado. La combinación de ambas cosas, panel desacoplado y viewport emulado a un tamaño explícito, es la única configuración en la que puedes afirmar con seguridad qué ancho está viendo el CSS. Todo lo demás es aproximado, y en depuración lo aproximado es lo que te hace perder la tarde.
Layout vertical y horizontal dentro del panel
Además del acoplamiento, varios paneles tienen su propia disposición interna configurable. El panel de Elements puede poner el árbol y los estilos uno al lado del otro o uno encima del otro, y Sources puede colocar el navegador de ficheros, el editor y el depurador en distintas combinaciones.
La regla es la misma que antes: lo que necesitas ancho va horizontal, lo que necesitas alto va vertical. El panel de estilos con reglas largas y muchas declaraciones se lee mejor con altura; el árbol del DOM profundamente anidado necesita ancho para que la indentación no coma todo el espacio. Cuando trabajas mucho con un panel concreto, ajustar su disposición interna una vez rinde durante meses.