Firefox 16 – À la découverte de la nouvelle ligne de commande

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?

  1. Prendre votre souris à une main
  2. Positionner votre curseur au niveau de l’élément en question
  3. Clic droit sur celui-ci
  4. 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

Advertisements

Laisser un commentaire

Entrer les renseignements ci-dessous ou cliquer sur une icône pour ouvrir une session :

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l’aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment ce contenu :