Abrir por la puerta correcta y los atajos que ahorran horas
Las cuatro formas de abrir las DevTools abren cosas distintas, y el puñado de atajos que convierte la navegación entre paneles en algo que ya no piensas.
Abrir las DevTools parece una acción única y son cuatro acciones distintas: hay un atajo que abre el último panel que usaste, otro que abre la consola directamente, otro que abre el inspector con el modo de selección ya activo, y una entrada de menú contextual que además selecciona el elemento sobre el que pulsaste. Elegir mal cuesta dos o tres movimientos cada vez, y esos movimientos se pagan cincuenta veces al día. Esta lección es corta y es la que más segundos acumulados devuelve de toda la guía.
- Elegir el atajo de apertura según lo que vas a hacer, no por costumbre.
- Navegar entre paneles, dentro del cajón inferior y por el historial sin tocar el ratón.
- Recuperar el foco del teclado cuando se queda atrapado en el panel o en la página.
- Usar el modo de inspección con teclado incluido el caso de los elementos que desaparecen.
Las cuatro puertas
El panel completo, en el último sitio donde estuviste. Cmd+Opt+I en macOS, Ctrl+Shift+I o F12 en Windows y Linux. Es la puerta genérica, la correcta cuando vas a hacer algo que no sabes todavía qué es.
La consola directamente. Cmd+Opt+J en macOS, Ctrl+Shift+J en Windows y Linux. Abre las DevTools con el foco en el campo de entrada de la consola, listo para escribir. Es la puerta correcta cuando ya sabes qué expresión quieres evaluar, y ahorra el clic de ir a la pestaña más el clic de poner el cursor.
El inspector con el modo de selección activo. Cmd+Shift+C en macOS, Ctrl+Shift+C en Windows y Linux. Abre y deja el cursor en modo puntero de inspección, de forma que el siguiente clic sobre la página selecciona ese nodo en el árbol. Es la puerta correcta cuando vas a preguntar por un elemento concreto que estás viendo.
El menú contextual. Botón derecho sobre un elemento y la opción de inspeccionar. Equivale a la anterior pero con el elemento ya elegido, y tiene una ventaja sutil: el clic derecho no dispara los mismos manejadores que el clic izquierdo, así que sirve para elementos que reaccionan al clic normal.
El mismo atajo cierra las DevTools si están abiertas y tienen el foco, lo cual es cómodo y es también el origen de la confusión más habitual con estos atajos: si el foco está en la página, abre; si está en el panel, cierra.
Moverse sin ratón
Una vez dentro, cinco atajos cubren el noventa por ciento del movimiento.
Cambiar de panel. Cmd+[ y Cmd+] en macOS, Ctrl+[ y Ctrl+] en Windows y Linux, recorren las pestañas hacia atrás y hacia delante. Suena trivial hasta que llevas un rato saltando entre Elements y Network cada quince segundos.
El cajón inferior. Esc lo abre y lo cierra sin cambiar el panel principal. Esta es la tecla más infravalorada del conjunto: permite tener la consola visible a la vez que el panel de Elements o el de Network, que es la configuración de trabajo real de casi todo el mundo y que mucha gente no usa porque no sabe que existe. Con Esc tienes la consola sin abandonar lo que estabas mirando.
El historial de navegación dentro del panel. En Sources y en Elements, las DevTools mantienen un historial de posiciones al que se vuelve con los atajos de retroceso del sistema, y el árbol de Elements guarda el recorrido de nodos seleccionados. Si acabas de saltar a un nodo y quieres volver, el breadcrumb de la parte inferior del panel es más fiable.
Buscar dentro del panel activo. Cmd+F o Ctrl+F busca en el contenido del panel actual, con semántica distinta en cada uno: en Elements acepta texto, selectores CSS y XPath; en Sources busca en el fichero abierto; en Network filtra por URL.
Buscar en todos los ficheros cargados. Cmd+Opt+F o Ctrl+Shift+F abre la búsqueda global, que rastrea todos los recursos que el navegador ha descargado —incluidos los que no están en tu repositorio— y es la forma más rápida de encontrar quién define una cadena de texto que ves en pantalla.
La búsqueda global acepta expresiones regulares y distingue mayúsculas si se lo pides. Buscar una clase CSS peculiar o un mensaje de error literal en todos los ficheros descargados encuentra en cinco segundos el módulo responsable, sin necesidad de saber cómo se llama el fichero ni de que exista un source map.
El foco, que es donde todo el mundo se atasca
El problema más frecuente con los atajos no es no conocerlos: es que no funcionan porque el foco está donde no debería. Las DevTools y la página son dos contextos de teclado distintos, y algunos atajos solo actúan en uno.
Si escribes en la consola y el texto va a la página, el foco está en la página. Un clic en el campo de la consola lo devuelve. Si pulsas Cmd+P esperando abrir un fichero y se abre el diálogo de imprimir del sistema, el foco está en la página. Y si un atajo de las DevTools no responde estando el panel a la vista, casi siempre es porque el último clic fue sobre el documento.
Hay un caso que confunde de verdad: cuando la ejecución está detenida en un breakpoint, la página no responde a nada, y eso incluye los clics que darías para recuperar el foco. La salida es continuar la ejecución —F8 o Cmd+\\— o pulsar directamente en el panel.
Inspeccionar lo que se escapa
El modo de inspección tiene un enemigo clásico: el elemento que solo existe mientras el ratón está encima. Menús desplegables, tooltips, popovers. En cuanto mueves el cursor hacia las DevTools para mirarlo, desaparece.
Hay tres salidas, en orden de comodidad.
La primera es forzar el estado de pseudo-clase desde el panel de estilos, que mantiene el :hover aunque el ratón esté en otro sitio. Funciona cuando el elemento aparece por CSS puro.
La segunda es congelar la ejecución con retardo: escribe en la consola una expresión que ejecute debugger unos segundos después, provoca el estado con el ratón, y espera a que salte. Es la solución universal porque funcione lo que funcione, JavaScript o CSS, el DOM queda congelado en ese instante.
setTimeout(() => { debugger; }, 4000);La tercera es buscar el nodo directamente en el árbol, si sabes cómo se llama la clase del menú. Menos elegante, igual de válido.
Las DevTools traen un editor de atajos completo en sus ajustes, y además un ajuste que casi nadie descubre: el preset de combinaciones de Visual Studio Code. Si tu editor es VS Code, activarlo unifica el paso a paso del depurador con el del editor —F5 para continuar, F11 para entrar, en vez del esquema propio— y elimina un cambio de contexto mental que pagas decenas de veces al día sin darte cuenta. Pero la razón profunda para entrar en ese diálogo no es cambiar nada: es leerlo. La lista de acciones con atajo asignado es, de hecho, el mejor inventario que existe de lo que las DevTools saben hacer, mucho mejor que cualquier documentación, porque está generado a partir del propio código y está siempre al día. Diez minutos leyendo esa lista descubren funciones que llevaban años delante de tus ojos: reiniciar un marco de la pila, saltar al siguiente cambio en un fichero, cambiar el modo del inspector de accesibilidad. Es el mismo argumento que el menú de comandos de la lección siguiente, y por el mismo motivo: en una herramienta que se reorganiza cada versión, los índices generados por la propia herramienta son la única documentación que no envejece.
Un mínimo viable para memorizar
Si solo vas a interiorizar cinco combinaciones, que sean estas: la de abrir con inspección para preguntar por un elemento, Esc para tener la consola sin perder el panel, el menú de comandos de la lección siguiente, la búsqueda global para encontrar el origen de una cadena, y F8 para continuar cuando el depurador te haya dejado la página congelada.
Con esas cinco ya no vuelves a tocar el ratón salvo para señalar. Todo lo demás lo hace el menú de comandos, que es precisamente el argumento de por qué no hace falta memorizar más.