Google Chrome met à la disposition des développeurs des outils de développement web appelé DevTools. Ils sont directement intégrés au navigateur. Savez-vous que vous pouvez travailler plus vite en utilisant des raccourcis clavier ? Voici ces 13 raccourcis clavier que vous pouvez utiliser sur DevTools.
I- Inspection de l’élément
Si vous souhaitez ouvrir l’interface pour inspecter l’élément sur Mac OS voici le raccourci clavier qu’il faut utiliser : Ctrl+Cmd+C sur Mac OS et F12 ou Ctrl+Shift+C sur Windows et Linux.
II- Ouverture du panneau de la console
Pour l’ouverture directe du panneau de la console il suffit de lancer un onglet Google Chrome avant de recourir au raccourci suivant : Ctrl+Cmd+J sur Mac OS et Ctrl+Shift+J sur Windows et Linux.
III- Ouverture du menu de commande
Le menu de commande vous permet d’accéder aux différentes fonctionnalités de DevTools. Ouvrez-le directement en tapant Cmd+Shift+P sur Mac OS et Ctrl+Shift+P sur Windows et Linux.
IV- Affichage des paramètres
Une fois que DevTools est ouvert, le raccourci clavier vous permet d’accéder aux paramètres : Fn+F1 ou ? sur Mac OS et F1 ou ? sur Windows et Linux.
V- Changement de panneau
Si vous voulez passer d’un panneau à un autre sur DevTools vous pouvez utiliser l’un des raccourcis clavier suivants :
Cmd/Ctrl+] pour passer au panneau qui suit
Cmd/Ctrl+[ pour retourner au panneau précédemment consulté.
VI- Comment basculer en mode mobile ?
Vous pouvez effectuer des simulations d’aperçus pour plusieurs formats d’écrans tels que desktop, tablette ou mobile. Accéder à cette option à travers ce raccourci clavier : Cmd+Shift+M sur Mac OS et Ctrl+Shift+M sur Windows et Linux.
VII- Comment enclencher le mode HTML ?
Lorsque vous inspectez un élément, vous pouvez basculer en mode HTML pour modifier les attributs de cet élément. Basculez en mode HTML en tapant sur Fn+F2 sur Mac OS et F2 sur Windows et Linux
VIII- Comment modifier la position du DevTools ?
Sur la fenêtre Chrome, DevTools est situé par défaut à droite de l’écran. Vous pouvez le déplacer sur la moitié inférieure de l’écran grâce au raccourci clavier suivant : Cmd+Shift+D sur Mac OS et Ctrl+Shift+D sur Windows et Linux.
IX- Ouverture et fermeture du tiroir
La petite fenêtre qui se trouve en bas de l’écran est appelée tiroir et elle comprend la console, ainsi qu’un onglet de nouveautés. Il suffit d’appuyer sur « Echap » dans l’interface DevTools pour l’ouvrir ou le fermer rapidement.
X- Comment effectuer une recherche de texte ?
Si vous voulez trouver une partie précise de texte dans les panneaux vous pouvez taper Cmd+F sur Mac OS et Ctrl+F sur Windows et Linux. Ce raccourci ne fonctionne pas pour les panneaux audits, application et sécurité.
Pour faire une recherche de texte dans toutes les ressources chargées, tapez Cmd+Option+F sur Mac OS et Ctrl+Shift+F sur Windows et Linux.
XI- Ouverture d’un fichier dans le panneau Sources
Ouvrez un fichier depuis le panneau Sources en tapant Cmd+O ou Cmd+P sur Mac OS et Ctrl+O ou Ctrl+P sur Windows et Linux.
XII- Comment zoomer et dézoomer ?
Pour accéder aux fonctionnalités zoom et dézoom, utilisez les raccourcis suivants : Cmd++ pour zoomer ou Cmd+- pour dézoom sur Mac OS et Ctrl++ pour zoomer ou Ctrl+- pour dézoomer sur Windows et Linux.
Si vous voulez réinitialiser le zoom pour retrouver le niveau par défaut, tapez Cmd+0 sur Mac OS et Ctrl+0 sur Windows et Linux.
XIII- Comment exécuter un script ?
Vous pouvez utiliser les extraits de code JavaScript afin de déceler les problèmes dans votre code. Pour les exécuter tapez sur Cmd/Ctrl+O, puis pour ouvrir le menu de commande appuyez sur « ! », puis saisissez le nom du script avant de taper sur « Entrée ».
Vous êtes à la recherche d’un développeur web pour le développement de votre site internet ? Contactez-moi