El menú de comandos: la única interfaz que no envejece
Por qué buscar por nombre de función es más robusto que recordar rutas de menú, y los cinco prefijos que convierten un diálogo de búsqueda en el índice completo de la herramienta.
Las DevTools reorganizan su interfaz constantemente: pestañas que se mueven al cajón inferior, ajustes que cambian de sección, funciones que pasan de un menú de tres puntos a otro. Cualquier documentación que diga “haz clic en el icono de la esquina superior derecha y luego en la tercera opción” caduca en meses. Hay una sola forma de dar instrucciones sobre estas herramientas que sigue siendo válida años después: nombrar la función y dejar que el usuario la busque. Ese es exactamente el trabajo del menú de comandos.
- Invocar cualquier función de las DevTools por su nombre sin conocer su ubicación.
- Distinguir los cinco prefijos del diálogo y saber qué espacio de búsqueda abre cada uno.
- Usar el menú de comandos como índice explorable para descubrir funciones desconocidas.
- Explicar por qué una instrucción basada en el nombre de la función es más duradera que una basada en la ruta de menú.
El diálogo y sus cinco modos
Se abre con Cmd+Shift+P en macOS y Ctrl+Shift+P en Windows y Linux. Lo que aparece es un campo de texto único cuyo comportamiento depende del primer carácter que escribas. Son cinco espacios de búsqueda distintos detrás de una sola caja.
Con > al principio: comandos. Toda acción que las DevTools sepan ejecutar. Abrir un panel, activar un ajuste, alternar la emulación, empezar una grabación, ejecutar un snippet, cambiar el tema. Es el modo por defecto cuando abres con la combinación anterior, porque el > ya viene puesto.
Sin prefijo: ficheros. El mismo diálogo, borrando el >, se convierte en un buscador difuso de todos los recursos cargados por la página. Tiene su propio atajo directo, Cmd+P o Ctrl+P, que es el que se usa en la práctica. La búsqueda es difusa: escribir usrprf encuentra user-profile-card.js.
Con : al principio: ir a la línea. Solo tiene sentido con un fichero abierto en Sources. Escribir :428 salta a la línea 428, y :428:12 salta a la línea 428, columna 12.
Con @ al principio: ir a un símbolo. Lista las funciones y clases declaradas en el fichero abierto, y salta a la que elijas. Es la forma más rápida de navegar un fichero grande, y funciona sobre el fichero reconstruido por el source map, no sobre el empaquetado.
Con ! al principio: ejecutar un snippet. Lanza cualquiera de los fragmentos guardados sin tener que ir al panel. Convierte los snippets en algo parecido a comandos propios, que es justamente lo que los hace útiles a diario.
El prefijo ? muestra la ayuda con la lista de prefijos disponibles, y es la forma de comprobar si alguna versión ha añadido uno nuevo. La combinación que abre el diálogo con > ya escrito y la que lo abre vacío son distintas precisamente porque los dos modos más usados son el de comandos y el de ficheros.
Lo que el menú de comandos sabe hacer y los menús no
Hay funciones que solo se alcanzan cómodamente desde aquí, y algunas son de las más útiles del conjunto.
Capturar una captura de pantalla del área visible, de la página completa o de un nodo concreto. Buscar la palabra screenshot ofrece las variantes. La de nodo concreto recorta exactamente la caja del elemento seleccionado en Elements, lo cual es oro para reportar un bug visual sin herramientas externas.
Mostrar u ocultar paneles del cajón inferior. Buscando show aparecen todas las pestañas secundarias por su nombre, incluidas las que no están visibles: bloqueo de peticiones, condiciones de red, cobertura, animaciones, sensores, cambios, problemas, búsqueda, consola rápida.
Alternar ajustes por nombre. Cualquier casilla de las preferencias se puede activar y desactivar escribiendo su nombre. Esto importa porque las preferencias están repartidas en secciones y encontrarlas navegando es lento.
Cambiar el tema. Buscar theme ofrece claro, oscuro y automático, sin abrir los ajustes.
Empezar y parar grabaciones. Las de Performance y las de Memory tienen comando propio, incluida la variante que recarga la página y graba la carga completa, que es la que casi siempre quieres y la que casi nadie encuentra a la primera.
Ver el resumen de cambios. El comando que abre la pestaña de cambios muestra un diff de todas las modificaciones que has hecho a las hojas de estilo desde el panel de Elements. Es la respuesta directa al problema de “he tocado quince cosas y no sé cuáles”.
Explorar en vez de recordar
El uso más rentable del menú de comandos no es ejecutar lo que ya sabes: es descubrir lo que existe. El diálogo hace búsqueda por subcadena sobre los nombres de todas las acciones registradas, así que escribir una palabra genérica devuelve un catálogo.
Prueba a escribir coverage, emulate, throttl, override, record, contrast, layer, snapshot, blackbox o sensor y lee lo que sale. Cada una de esas palabras devuelve entre tres y quince comandos, y la mayoría corresponden a funciones que existen desde hace años y que muchísima gente no ha usado nunca porque estaban a cuatro clics de profundidad en un menú que nadie abre.
Este es exactamente el mismo argumento que hace útil un editor con paleta de comandos, y por la misma razón: en una herramienta con varios cientos de funciones, la interfaz visual solo puede exponer cómodamente unas decenas. El resto existe pero es invisible salvo que haya un índice buscable.
Cuando alguien te explica algo de las DevTools diciendo “abre el menú de los tres puntos, ve a More tools y elige Rendering”, te está dando una instrucción con fecha de caducidad, y probablemente ya caducada. Los tres puntos se han movido, la sección se ha renombrado, y en tu versión puede que Rendering ya esté como pestaña fija del cajón. La instrucción equivalente “abre el menú de comandos y escribe rendering” funciona en todas las versiones que existen y casi con seguridad en las que vengan, porque el nombre de una función cambia mucho menos que su ubicación: la ubicación es diseño de interfaz y se rediseña; el nombre es identidad y romperlo rompería la búsqueda de todo el mundo. Esto tiene una consecuencia práctica que va más allá del atajo. Si escribes documentación interna, guías de onboarding o mensajes en un canal de soporte, redacta siempre por nombre de comando: te ahorra reescribir la guía cada seis meses y le enseña al lector la herramienta que lo hará autónomo, en vez de una coordenada que solo sirve para ese caso. La misma lógica explica por qué esta guía entera evita describir rutas de menú: no es pereza, es que una ruta de menú es información que envejece y un nombre de función es información que compone.
Lo que no cubre
Conviene saber dónde se acaba. El menú de comandos ejecuta acciones y navega; no introduce parámetros. No puedes decirle “aplica throttling con 340 milisegundos de latencia”: puedes activar un perfil ya definido, y el perfil personalizado se crea en el diálogo correspondiente. Tampoco sustituye a los atajos del paso a paso durante la depuración, donde la latencia de abrir un diálogo por cada paso sería absurda.
Y hay una tercera limitación, más interesante: el menú lista las acciones registradas por los paneles que ya se han cargado. Las DevTools cargan sus paneles de forma perezosa, así que un panel que no has abierto nunca en esta sesión puede no tener todos sus comandos disponibles todavía. Si buscas algo que sabes que existe y no aparece, abrir una vez el panel correspondiente y volver a buscar suele resolverlo.
Abre el menú de comandos y escribe, una por una, estas cinco palabras: changes, coverage, sensors, animations, issues. Abre las cinco pestañas resultantes en una página real y dedica un minuto a cada una. Al menos dos de las cinco te van a resolver un problema que tenías y que no sabías que tenía herramienta.