En avril dernier, j’ai écrit au sujet des nouvelles fonctionnalités d’inspection offertes par la version en cours de développement de Firefox.
Dans cet article, la fonctionnalité permettant d’afficher en trois dimensions la structure HTML de votre site. À ce moment là, j’étais assez étonné de retrouver cette fonctionnalité dans le navigateur.
Depuis ce temps, l’équipe de développement a continué à améliorer et ajouter des fonctionnalités à l’inspection de documents du navigateur.
La fonctionnalité qui a attiré mon attention est l’ajout d’une interface agissant comme une ligne de commande permettant d’interagir avec le navigateur. Cette fonctionnalité est nommée, en anglais, GCLI (l’acronyme pour Graphical Command Line Interface). Je crois bien qu’il est inutile de procéder à une traduction française.
Le principal but de cet ajout est d’éviter, le plus possible, de manipuler la souris lors qu’il est temps de faire du développement web. Je crois beaucoup en ce concept.
À titre de mise en contexte, il a été déterminé, dans une recherche financée par Apple, que l’utilisation du clavier était significativement plus rapide la souris pour une même opération.
Le besoin pour cette fonctionnalité, à mon avis, est bien présent pour le développement web. Êtes-vous en mesure d’énumérer les étapes nécessaires pour l’inspection d’un élément dans une page web?
- Prendre votre souris à une main
- Positionner votre curseur au niveau de l’élément en question
- Clic droit sur celui-ci
- Sélectionner l’élément de menu « Inspecter cet élément«
Il s’agit d’une opération que nous répétons à multiple reprises à chaque jour. Le tout est long, fastidieux et répétitif.
Utilisation
Le GCLI est activé à l’aide du raccourcis clavier SHIFT-F2 ou par le menu contextuel Web developer > Developer Toolbar.
Il y a plusieurs commandes qui sont à votre disposition afin d’y accomplir le travail que vous avez besoin. En tout temps, vous pouvez y taper la commande help afin d’avoir la liste des commandes disponible pour exécution.
Par exemple, pour y consulter l’aide sur l’utilisation de la commande Resize, il suffit de taper help resize.
La syntaxe des commandes à utiliser est très bien balisée. En tout temps, il y a une aide visuelle qui permet de visualiser les paramètres à compléter pour une commande donnée.
Il est à noter, qu’en tout temps, la complétion de syntaxe est présente afin de vous aider à écrire vos commandes.
Exemples
Voici quelques commandes que j’ai trouvées intéressantes et que je crois pouvoir utiliser dans mon flux de travail quotidien.
Inspection d’un élément
Par exemple, la balise H1 de ce mon blogue se retrouve de la façon suivante : inspect #site-title
Redimensionnement de la taille visible du navigateur à une taille précise
resize to 320 480
Redimensionnement à la taille régulière
resize off
Gestion des cookies
cookie list
cookie set MonCookie 1
cookie remove MonCookie
Replacer le contenu d’un élément spécifique
pagemod replace « frenchcoding » « French Coding » true « a » « h1 » false true
Ou simplement : pagemod replace « frenchcoding » « French Coding »
Prendre une copie d’écran de la page courante
screenshot page.png 0 true
French Coding 