Los atajos de teclado ahorran tiempo al realizar ciertas tareas desde el teclado, sin tener que hacer clic varias veces. Hemos reunido 13 métodos abreviados de teclado para DevTools, el conjunto de herramientas de desarrollo web integradas directamente en Google Chrome.
1. Inspeccione el elemento
Para acceder a la interfaz que le permite inspeccionar el elemento, solo necesita usar los siguientes atajos:
Ctrl+Cmd+C en mac OS
F12 o Ctrl+Mayús+C en Windows y Linux
2. Abra el panel de la consola
Para abrir directamente el panel de la consola, inicie una pestaña de Google Chrome y use los siguientes accesos directos:
Ctrl+Cmd+J en mac OS
Ctrl+Mayús+J en Windows y Linux
3. Abra el menú de comandos
El menú de comandos proporciona acceso rápido a cualquier función de DevTools. Para abrirlo directamente, los atajos de teclado son:
Cmd+Mayús+P en mac OS
Ctrl+Mayús+P en Windows y Linux
4. Ver configuración
Cuando DevTools está abierto, puede acceder fácilmente a la configuración mediante los siguientes métodos abreviados de teclado:
Fn+F1 Dónde ? en mac OS
F1 Dónde ? en Windows y Linux
5. Paneles de interruptores
Para cambiar de un panel de DevTools a otro, hay 2 métodos abreviados de teclado que le permiten pasar al siguiente panel o volver al panel anterior:
Comando/Ctrl + ] para ir al siguiente panel
Cmd/Ctrl+[[para volver al panel anterior
6. Cambiar al modo móvil
Es posible simular vistas previas para diferentes formatos de pantalla, como móvil, escritorio o incluso tableta. Para acceder a este modo a través de métodos abreviados de teclado, utilice:
Cmd+Mayús+M en mac OS
Ctrl+Mayús+M en Windows y Linux
7. Cambiar al modo HTML
Al inspeccionar un elemento, si desea modificar sus atributos (como la clase o el estado, por ejemplo), puede cambiar al modo HTML directamente desde el teclado utilizando los siguientes atajos:
Fn+F2 en mac OS
F2 en Windows y Linux
8. Cambiar la posición de DevTools
De manera predeterminada, ubicado a la derecha en la ventana de Chrome, a menudo se usa en una ventana dedicada, es posible mover DevTools a la mitad inferior de la pantalla. Para realizar este movimiento fácilmente, hay un atajo de teclado dedicado:
Cmd+Mayús+D en mac OS
Ctrl+Mayús+D en Windows y Linux
9. Abre y cierra el cajón
El cajón es la pequeña ventana presente en la parte inferior, que contiene la consola y una nueva pestaña. Puede cerrarse y abrirse rápidamente presionando Esc en la interfaz de DevTools.
10. Buscar texto
Para buscar una parte específica del texto en los paneles (excepto los paneles de auditorías, aplicación y seguridad), puede utilizar:
Comando+F en mac OS
CTRL+F en Windows y Linux
Como parte de una búsqueda de texto en el cajón (para buscar en todos los recursos cargados), deberá usar los siguientes atajos:
Cmd + Opción + F en mac OS
Ctrl+Mayús+F en Windows y Linux
11. Abra un archivo en el panel Fuentes
Puede abrir un archivo desde el panel Orígenes, utilizando uno de los dos accesos directos:
Comando + O Dónde Comando + P en mac OS
CTRL+O Dónde CTRL+P en Windows y Linux
12. Acercar y alejar
Para usar las funciones de acercar y alejar, simplemente presione:
Comando + + (ampliar) o Comando + – (alejar) en macOS
CTRL + + (ampliar) o Ctrl+– (alejar) en Windows y Linux
Si desea restaurar el nivel de zoom predeterminado, utilice:
Comando + 0 en mac OS
CTRL+0 en Windows y Linux
13. Ejecute un script
Los fragmentos de código de JavaScript se pueden usar para identificar problemas en su código. Para ejecutarlos, presione Cmd/Ctrl+Opara abrir el menú de comandos, escriba ! seguido del nombre del script, y finalmente presione Sala.
