DevTools : 13 raccourcis clavier pour les développeurs sur Chrome

Les raccourcis clavier permettent de gagner du temps en effectuant certaines tâches à partir du clavier, sans avoir à cliquer plusieurs fois. Nous avons rassemblé 13 raccourcis clavier pour DevTools, l’ensemble d’outils de développement Web directement intégrés à Google Chrome.

1. Inspecter l’élément

Pour accéder à l’interface qui permet d’inspecter l’élément, il vous suffit d’utiliser les raccourcis suivants :

• Ctrl + Cmd + C sur macOS
• F12 ou Ctrl + Shift + C sur Windows et Linux

2. Ouvrir le panneau de la console

Pour ouvrir directement le panneau de la console, lancez un onglet Google Chrome et utilisez les raccourcis suivants :

• Ctrl + Cmd + J sur macOS
• Ctrl + Shift + J sur Windows et Linux

3. Ouvrir le menu de commande

Le menu de commande permet d’accéder rapidement à n’importe quelle fonctionnalité de DevTools. Pour l’ouvrir directement, les raccourcis clavier sont :

• Cmd + Shift + P sur macOS
• Ctrl + Shift + P sur Windows et Linux

4. Afficher les paramètres

Lorsque DevTools est ouvert, vous pouvez facilement accéder aux paramètres, en utilisant les raccourcis claviers suivants :

• Fn + F1 ou ? sur macOS
• F1 ou ? sur Windows et Linux

5. Changer de panneau

Pour passer d’un panneau DevTools à un autre, il existe 2 raccourcis clavier qui permettent de passer au panneau suivant, ou de revenir au panneau précédent :

• Cmd/Ctrl + ] pour passer au panneau suivant
• Cmd/Ctrl + [ pour revenir au panneau précédent

6. Basculer en mode mobile

Il est possible de simuler des aperçus pour différents formats d’écrans, comme par exemple mobile, desktop ou encore tablette. Pour accéder à ce mode via les raccourcis clavier, il faut utiliser :

• Cmd + Shift + M sur macOS
• Ctrl + Shift + M sur Windows et Linux

7. Basculer en mode HTML

Lors de l’inspection d’un élément, si vous souhaitez modifier ses attributs (comme la classe ou l’état par exemple), vous pouvez basculer en mode HTML directement depuis le clavier grâce aux raccourcis suivant :

• Fn + F2 sur macOS
• F2 sur Windows et Linux

8. Changer la position du DevTools

Par défaut positionné à droite dans la fenêtre Chrome, souvent utilisé dans une fenêtre dédiée, il est possible de déplacer DevTools sur la moitié inférieure de l’écran. Pour effectuer ce déplacement facilement, il existe un raccourci clavier dédié :

• Cmd + Shift + D sur macOS
• Ctrl + Shift + D sur Windows et Linux

9. Ouvrir et fermer le tiroir

Le tiroir est la petite fenêtre présente en bas, qui comporte la console et un onglet de nouveautés. Il peut se fermer et s’ouvrir rapidement en appuyant sur Echap dans l’interface DevTools.

10. Rechercher du texte

Pour rechercher une partie précise du texte dans les panneaux (excepté pour les panneaux audits, application et sécurité), vous pouvez utiliser :

• Cmd + F sur macOS
• Ctrl + F sur Windows et Linux

Dans le cadre d’une recherche de texte dans le tiroir (pour effectuer une recherche dans toutes les ressources chargées), il faudra utiliser les raccourcis suivants :

• Cmd + Option + F sur macOS
• Ctrl + Shift + F sur Windows et Linux

11. Ouvrir un fichier dans le panneau Sources

Vous avez la possibilité d’ouvrir un fichier depuis le panneau Sources, en utilisant l’un des deux raccourcis suivants :

• Cmd + O ou Cmd + P sur macOS
• Ctrl + O ou Ctrl + P sur Windows et Linux

12. Zoomer et dézoomer

Pour utiliser les fonctionnalités de zoom et de dézoom, il vous suffit d’appuyer sur :

• Cmd + + (zoom) ou Cmd + – (dézoom) sur macOS
• Ctrl + + (zoom) ou Ctrl + – (dézoom) sur Windows et Linux

Si vous souhaitez restaurer le niveau de zoom par défaut, utilisez :

• Cmd + 0 sur macOS
• Ctrl + 0 sur Windows et Linux

13. Exécuter un script

Il est possible d’utiliser des extraits de code JavaScript pour identifier les problèmes dans votre code. Pour les exécuter, appuyez sur Cmd/Ctrl + O pour ouvrir le menu de commande, tapez ! suivi du nom du script, et enfin appuyez sur Entrée.