Atajos de Teclado del Inspector de Elementos
Los atajos de teclado son fundamentales para trabajar de manera eficiente con el Inspector de Elementos. Dominar estos atajos te permitirá ahorrar tiempo y mejorar significativamente tu flujo de trabajo. A continuación, encontrarás una guía completa de los atajos más útiles, organizados por funcionalidad y navegador.
Atajos universales
Estos atajos funcionan de manera similar en la mayoría de los navegadores modernos:
Acceso al Inspector
| Acción | Windows/Linux | macOS |
|---|
| Abrir DevTools | F12 o Ctrl+Shift+I | Cmd+Option+I |
| Abrir Inspector de Elementos | Ctrl+Shift+C | Cmd+Option+C |
| Alternar DevTools dock | Ctrl+Shift+D | Cmd+Shift+D |
| Cerrar DevTools | Esc (cuando el foco está en DevTools) | Esc (cuando el foco está en DevTools) |
Navegación por el DOM
| Acción | Windows/Linux | macOS |
|---|
| Seleccionar elemento para inspeccionarlo | Ctrl+Shift+C | Cmd+Shift+C |
| Expandir/colapsar nodo | Flecha derecha/izquierda | Flecha derecha/izquierda |
| Expandir nodo y todos sus hijos | Ctrl+Alt+Flecha derecha | Option+Flecha derecha |
| Contraer nodo y todos sus hijos | Ctrl+Alt+Flecha izquierda | Option+Flecha izquierda |
| Navegar entre elementos | Flecha arriba/abajo | Flecha arriba/abajo |
| Editar elemento como HTML | F2 o doble clic | Enter o doble clic |
| Deshacer cambio | Ctrl+Z | Cmd+Z |
| Rehacer cambio | Ctrl+Y o Ctrl+Shift+Z | Cmd+Shift+Z |
Búsqueda y filtrado
| Acción | Windows/Linux | macOS |
|---|
| Buscar en el DOM actual | Ctrl+F | Cmd+F |
| Búsqueda global (en todos los archivos) | Ctrl+Shift+F | Cmd+Option+F |
| Encontrar siguiente coincidencia | F3 o Enter | Cmd+G o Enter |
| Encontrar coincidencia anterior | Shift+F3 o Shift+Enter | Cmd+Shift+G o Shift+Enter |
| Filtrar en panel de estilos | Escribir en el campo de filtro | Escribir en el campo de filtro |
Manipulación del DOM
| Acción | Windows/Linux | macOS |
|---|
| Copiar elemento | Ctrl+C | Cmd+C |
| Cortar elemento | Ctrl+X | Cmd+X |
| Pegar elemento | Ctrl+V | Cmd+V |
| Duplicar elemento | Alt+Shift+Flecha abajo | Option+Shift+Flecha abajo |
| Eliminar elemento | Delete | Delete |
| Ocultar elemento | H | H |
| Forzar estado (hover, active, focus, etc.) | Haz clic derecho en el elemento y selecciona "Force state" | Haz clic derecho en el elemento y selecciona "Force state" |
Navegación entre paneles
| Acción | Windows/Linux | macOS |
|---|
| Mostrar panel Console | Esc (cuando el foco está en la ventana principal) | Esc (cuando el foco está en la ventana principal) |
| Cambiar a panel Elements/Inspector | Ctrl+1 | Cmd+1 |
| Cambiar a panel Console | Ctrl+2 | Cmd+2 |
| Cambiar a panel Network | Ctrl+3 | Cmd+3 |
| Cambiar a Sources/Debugger | Ctrl+4 | Cmd+4 |
| Cambiar a Performance | Ctrl+5 | Cmd+5 |
| Cambiar a Memory | Ctrl+6 | Cmd+6 |
| Cambiar a Application | Ctrl+7 | Cmd+7 |
| Cambiar a Security | Ctrl+8 | Cmd+8 |
| Cambiar a Lighthouse | Ctrl+9 | Cmd+9 |
Atajos específicos por navegador
Google Chrome / Microsoft Edge
| Acción | Windows/Linux | macOS |
|---|
| Tomar screenshot de nodo | Ctrl+Shift+P, escribe "screenshot" | Cmd+Shift+P, escribe "screenshot" |
| Mostrar/ocultar la consola | Ctrl+` | Cmd+` |
| Cambiar entre modo dispositivo | Ctrl+Shift+M | Cmd+Shift+M |
| Acercar en DevTools | Ctrl++ | Cmd++ |
| Alejar en DevTools | Ctrl+- | Cmd+- |
| Restaurar zoom | Ctrl+0 | Cmd+0 |
| Ejecutar comando | Ctrl+Shift+P | Cmd+Shift+P |
| Mostrar/ocultar panel de drawer | Esc | Esc |
| Ir a línea | Ctrl+G | Cmd+L |
| Abrir panel de animaciones | Ctrl+Shift+P, escribe "animations" | Cmd+Shift+P, escribe "animations" |
Firefox
| Acción | Windows/Linux | macOS |
|---|
| Seleccionar con selector de selección por CSS | Ctrl+Shift+P, escribe "Pick an element..." | Cmd+Shift+P, escribe "Pick an element..." |
| Mostrar información de accesibilidad | Ctrl+Shift+P, escribe "accessibility" | Cmd+Shift+P, escribe "accessibility" |
| Recarga ignorando caché | Ctrl+F5 o Ctrl+Shift+R | Cmd+Shift+R |
| Tomar screenshot completo | Ctrl+Shift+P, escribe "screenshot" | Cmd+Shift+P, escribe "screenshot" |
| Mostrar reglas de CSS aplicadas | Ctrl+Shift+P, escribe "show applied CSS" | Cmd+Shift+P, escribe "show applied CSS" |
Safari
| Acción | Windows/Linux | macOS |
|---|
| Enfoque en siguiente panel | N/A | Option+Tab |
| Enfoque en panel anterior | N/A | Option+Shift+Tab |
| Mostrar/ocultar todos los paneles | N/A | Option+Cmd+T |
| Abrir en editor elegido | N/A | Option+Cmd+E |
| Mostrar recursos Web | N/A | Option+Cmd+R |
| Mostrar depurador | N/A | Option+Cmd+D |
Atajos para la edición de estilos
| Acción | Windows/Linux | macOS |
|---|
| Incrementar valor numérico | Flecha arriba | Flecha arriba |
| Incrementar valor numérico (unidades grandes) | Shift+Flecha arriba | Shift+Flecha arriba |
| Incrementar valor numérico (unidades pequeñas) | Alt+Flecha arriba | Option+Flecha arriba |
| Decrementar valor numérico | Flecha abajo | Flecha abajo |
| Decrementar valor numérico (unidades grandes) | Shift+Flecha abajo | Shift+Flecha abajo |
| Decrementar valor numérico (unidades pequeñas) | Alt+Flecha abajo | Option+Flecha abajo |
| Mostrar color picker | Haz clic en el cuadrado de color | Haz clic en el cuadrado de color |
| Ciclar entre formatos de color | Shift+Clic en el cuadrado de color | Shift+Clic en el cuadrado de color |
| Añadir nueva regla CSS | Ctrl+Alt+N | Cmd+Option+N |
| Editar atributo | Enter o doble clic | Enter o doble clic |
| Ir a definición de regla | Ctrl+Clic en el selector | Cmd+Clic en el selector |
Atajos para la consola
| Acción | Windows/Linux | macOS |
|---|
| Evaluar expresión seleccionada | Ctrl+Shift+E | Cmd+Shift+E |
| Ejecutar | Enter | Enter |
| Insertar nueva línea | Shift+Enter | Shift+Enter |
| Borrar consola | Ctrl+L | Cmd+K |
| Autocompletar sugerencia | Tab | Tab |
| Historial anterior | Flecha arriba | Flecha arriba |
| Historial siguiente | Flecha abajo | Flecha abajo |
| Enfoque en consola | Ctrl+` | Cmd+` |
Atajos para el modo dispositivo
| Acción | Windows/Linux | macOS |
|---|
| Activar/desactivar modo dispositivo | Ctrl+Shift+M | Cmd+Shift+M |
| Rotar vista | Icono de rotación | Icono de rotación |
| Cambiar dispositivo | Menú desplegable | Menú desplegable |
| Ajustar zoom | Menú desplegable | Menú desplegable |
| Cambiar modo táctil/mouse | Icono de cursor/dedo | Icono de cursor/dedo |
Trucos útiles con atajos
Selección múltiple de elementos
En Chrome, Firefox y Edge, puedes seleccionar múltiples elementos para aplicar cambios en grupo:
- Selecciona un elemento
- Mantén presionado Ctrl (Cmd en macOS)
- Haz clic en otros elementos para añadirlos a la selección
- Realiza los cambios que se aplicarán a todos los elementos seleccionados
Ejecución de comandos rápidos
El menú de comandos rápidos es extremadamente útil:
- Presiona Ctrl+Shift+P (Cmd+Shift+P en macOS)
- Escribe lo que necesitas (ej. "screenshot", "layout", "disable", etc.)
- Selecciona el comando deseado de la lista
Haz clic derecho sobre un elemento en el Inspector y usa:
- Copy > Copy outerHTML: Para copiar el elemento y su contenido
- Copy > Copy selector: Para obtener un selector CSS único
- Copy > Copy JS path: Para obtener la ruta JavaScript del elemento
- Copy > Copy styles: Para copiar los estilos aplicados
Personalización de atajos
En algunos navegadores puedes personalizar los atajos de teclado:
Chrome
- Abre DevTools
- Haz clic en el ícono ⋮ (tres puntos verticales)
- Selecciona "Settings"
- Ve a la sección "Shortcuts"
- Personaliza los atajos según tus preferencias
Firefox
- Abre DevTools
- Haz clic en el ícono ⋮ (tres puntos verticales)
- Selecciona "Settings"
- Ve a la pestaña "Shortcuts"
- Modifica los atajos existentes
Tabla de referencia descargable
Para ayudarte a memorizar estos atajos, hemos creado una tabla de referencia que puedes descargar e imprimir:
Dominar estos atajos de teclado puede aumentar significativamente tu productividad al trabajar con el Inspector de Elementos. Comienza por memorizar los más utilizados y gradualmente incorpora más a tu flujo de trabajo diario.