15 commandes de ligne de commande graphique (GCLI) dans Firefox pour les développeurs front-end

Peu importe le nombre de boutons et de menus sophistiqués que nous avons, il y a toujours des programmeurs qui apprécient accès en ligne de commande dans leur environnement de travail, surtout quand il élimine la chasse au bon bouton ou au bon menu qui affiche le réglage nécessaire dans notre ligne de mire.

Firefox a eu un Interprète de ligne de commande graphique, ou en bref un GCLI depuis un certain temps, et étend son jeu de commandes au fil du temps. Les commandes GCLI fournissent aux développeurs une accès rapide aux outils de développement et de configuration. Il a aussi un fonctionnalité d'auto-complétion; si vous appuyez sur Tab tout en tapant une commande, les commandes suggérées par GCLI seront entrées.

La barre d'outils

De Firefox GCLI est également connu comme Barre d'outils développeur. Il y a trois façons pour l'ouvrir:

1. Appuyez sur le raccourci clavier Maj + F2.
2. Clique le “Ouvrir le menu” (hamburger) à droite de la barre d’adresse (à droite du bouton Accueil), puis cliquez sur le bouton Développeur> Barre d'outils Développeur sous-menu.
3. Dans la barre de menus supérieure, cochez la case Outils> Développeur Web> Barre d'outils du développeur option.

Une fois la barre d'outils de développeur ouverte, vous pouvez la voir. au bas de la fenêtre du navigateur. Si vous avez décidé de travailler avec le GCLI, Je conseillerais de le laisser ouvert tout le temps en travaillant.

Voyons maintenant quelques tâches utiles que vous pouvez effectuer dans Firefox. en utilisant son GCLI.

1. Supprimer des éléments de page

Commander: pagemod remove element

Lorsque vous avez besoin de jeter un autre regard sur la mise en page d'une page Web avec quelques éléments enlevés, il suffit de taper la commande pagemod remove element dans la ligne de commande de Firefox afin de supprimer ces éléments de la page.

La valeur de doit être un sélecteur CSS valide sur la page. Dites, dans une page que vous voulez supprimer tous les liens (spécifiquement) de la classe .btn, la commande est écrite comme: pagemod remove élément a.btn.

Généralement, la commande pagemod est utilisé pour modifier une page, en supprimant ou en remplaçant les éléments ou attributs choisis.

2. Éléments de mesure

Commander: mesure

Si tu veux connaître la mesure de tout module visuel sur une page Web, il existe un outil pour cela. le “mesure” Cet outil est accessible via le jeu d’outils de développement Web typique et le GCLI..

Tapez et entrez le mesure commande dans la ligne de commande, et le curseur se transformer en réticule. Les mesures seront affiché en pixels à côté du curseur en forme de croix, et sont du largeur, hauteur et longueur en diagonale de la zone sélectionnée. Pour désactiver l'outil, relancer le mesure commander.

3. Editez les fichiers rapidement

Commander: modifier

Début éditer les ressources de votre page avec le modifier commander. En tapant la commande, vous verrez le URI de toutes les ressources disponibles depuis cette page, que vous pouvez parcourir à l’aide des touches fléchées haut et bas. Une fois que vous avez sélectionné la ressource que vous souhaitez modifier, appuyez sur Tabulation pour compléter automatiquement la suggestion, puis appuyez sur Entrée. outil d'édition du navigateur s'ouvrira avec le fichier choisi.

4. Recherchez des propriétés CSS inconnues

Commander: mdn css

Celui-ci est une commande assez cool-c'est une sorte de Dictionnaire popup pour les propriétés CSS. Si vous rencontrez une propriété CSS inconnue et souhaitez vérifier son utilité, exécutez la commande mdn css dans le GCLI avec remplacé par le nom réel de cette propriété inconnue.

Une popup apparaitra avec le “définition” pour cette propriété CSS juste au-dessus de la barre d'outils. La définition est un extrait de la page officielle du réseau de développeurs Mozilla (MDN) de la propriété donnée. Le glossaire des propriétés CSS, des éléments HTML et des API Web de MDN est très cité.

Si le texte affiché dans la fenêtre contextuelle ne suffit pas et que vous veut en savoir plus, vous pouvez cliquer sur le lien Visitez la page MDN dans la fenêtre contextuelle, et la page MDN correspondante pour cette propriété sera ouverte. Pour le moment, cette commande est disponible pour les propriétés CSS uniquement..

5. Redimensionner la page

Commander: redimensionner à

L'outil de redimensionnement vous permet de voir à quoi ressemble votre page redimensionné à des dimensions spécifiques, ce qui peut être utile lorsque vous souhaitez prévisualiser l'apparence de votre page sur des appareils dont les dimensions sont différentes de celles sur lesquelles vous travaillez.

Firefox a aussi un raccourci clavier pour ouvrir cet outil: Ctrl + Maj + M (Cmd + Alt + M pour Mac). Mais si vous avez déjà connaître les dimensions exactes être utilisé pour le redimensionnement, le moyen le plus rapide est d'exécuter le redimensionner commande avec les dimensions dont vous avez besoin.

Les dimensions sont interprété en pixels. Une fois la commande exécutée, vous verrez la page redimensionnée..

6. Redémarrez le navigateur

Commander: redémarrer

Cette commande est évidente. Pour redémarrer Firefox, tapez simplement redémarrer dans la ligne de commande et appuyez sur Entrée, cela peut être pratique lorsque vous installez des add-ons ou des plug-ins nécessitant un redémarrage.

7. Ouvrez votre dossier de profil Firefox

Commander: dossier openprofile

Chaque utilisateur de Firefox obtient son propre dossier de profil local cette stocke les fichiers spécifiques à l'utilisateur, tels que les signets et le /chrome dossier. Lorsque vous personnalisez Firefox, vous devrez peut-être afficher et modifier le contenu de ce dossier..

Une autre façon d’ouvrir ce dossier consiste à cliquer sur le bouton Afficher le dossier sur le à propos de: support page. En exécutant la commande dossier openprofile dans la ligne de commande de Firefox, vous verrez votre dossier de profil ouvert à la fois.

8. Copier les valeurs de couleur

Commander: pipette

Outre le fait qu’elle ne supporte que le format hexadécimal, la pipette est un outil brillant pour copier la valeur de couleur de toute teinte visible sur une page Web. Entrez la commande pipette dans le GCLI pour basculer la fonctionnalité de l'outil.

9. Testez les bibliothèques externes

Commander: injecter

Si tu veux tester des librairies externes sur votre page Web, au lieu de plonger dans le code source pour effectuer les ajouts temporaires, utilisez simplement le injecter commande à insérer les bibliothèques. Par exemple, pour inclure jQuery, tapez simplement injecter jQuery.

Lors de l'exécution de la commande, la ressource sera importé à la page en insérant un > tag dans le section du document HTML.

10. Prendre des screenshots

Commander: capture d'écran

le outil de prise de capture d'écran intégré dans Firefox est assez puissant. Par exemple, vous pouvez cibler des éléments individuels à l’aide de sélecteurs CSS, utiliser un minuteur, appliquer une dpr. Vous pouvez même prendre une capture d'écran de juste la partie chrome du navigateur (zone entourant le contenu de l'utilisateur) en utilisant le capture d'écran --chrome commander.

Les captures d'écran sont enregistrées dans le Dossier de téléchargement du navigateur au format PNG.

11. Règles ouvertes

Commander: les dirigeants

Encore un autre outil intéressant de Firefox facilement accessible via GCLI. le les dirigeants commander affiche les règles horizontales et verticales autour de la page. Les mesures des règles sont en pixels. Exécutez la même commande pour désactiver la règle.

12. Ouvrez la console et le débogueur

Commander: console ouverte et dbg ouvert

Si le clavier raccourcit pour ouverture de la console Web ou de l'outil de débogage avez glissé de votre esprit, pas de soucis, tapez simplement la commande simple console ouverte ou dbg ouvert dans la ligne de commande de Firefox pour ouvrir l'outil correspondant.

13. Compter les éléments de page

Commander: qsa

Cette commande astucieuse de GCLI recense rapidement les éléments d’une page Web qui correspondre à un sélecteur CSS donné. Par exemple, pour obtenir le compte de tous éléments sur une page, utilisez le qsa a commander.

14. Activer ou désactiver les add-ons

Commander: liste des addons

Si vous avez besoin d’examiner et de gérer vos add-ons Firefox, je vous recommande de utiliser les commandes GCLI plutôt que le menu Add-ons parce que la version GCLI répertorie tous les add-ons et plugins, y compris les pré-installés, qui peut ne pas être répertorié dans le menu Add-ons.

Vous pouvez basculer l’état du module complémentaire dans l’interface GCLI à l’aide de la commande Ajouter suivi du sous-commandement concerné, soit activer ou désactiver.

Sur la démo ci-dessous, vous pouvez voir comment désactiver rapidement Pocket dans Firefox.

15. Gérer les paramètres

Commander: spectacle préféré

Il y a des tonnes de paramètres de personnalisation les utilisateurs peuvent accéder via Firefox à propos de: config page. Les mêmes paramètres peuvent également être visualisés et modifiés à l'aide de l'interface GCLI..

Utiliser GCLI pour accéder aux paramètres de personnalisation est l'option la plus rapide si vous savez déjà quelle configuration vous souhaitez afficher ou modifier. À définir une valeur pour un paramètre, Utilisez le jeu préf commande, et à réinitialiser un réglage, type pref reset .

Sur la démo ci-dessous, vous pouvez voir comment vérifier l'URI la injecter jQuery commande a injecté dans la page (voir la section n ° 9 de cet article):