Share
J'ai récemment décidé de revenir à Firefox, après avoir utilisé Chrome pendant plusieurs années. Lors de ma dernière utilisation sérieuse de Firefox, travailler avec les outils de développement concernait essentiellement l'extension Firebug. Firefox possédait des outils intégrés, mais à l'époque ils n'étaient pas aussi puissants que les outils de développement de Firebug ou de Chrome. A mon retour j'ai trouvé que les choses ont changé!
Les outils de développement de Firefox ont parcouru un long chemin, et ils sont continuellement mis à jour. Ils sont maintenant au même niveau que tous les autres outils de développement et offrent des fonctionnalités fantastiques, dont certaines que vous ne trouverez nulle part ailleurs à l'heure actuelle..
Si cela fait longtemps que vous n’avez pas utilisé Firefox pour le développement, vérifiez ces fonctionnalités dans Firefox Dev Tools que vous ne connaissez peut-être pas..
Remarque: quelques-unes des nouvelles fonctionnalités nécessitent Firefox Nightly, mais la plupart sont maintenant disponibles dans Firefox standard.
CSS Grid commence à changer radicalement la manière dont les dispositions de conception Web sont créées et pour le mieux. Pour autant que je sache, le seul inspecteur de CSS Grid se trouve actuellement dans les outils de développement de Firefox..
L’inspecteur de la grille peut notamment:
Si vous n'avez pas encore joué à CSS Grid, vous allez l'adorer, et le processus de travail avec ce dernier est rendu encore plus fluide avec les outils de l'inspecteur de grille de Firefox..
En savoir plus sur hacks.mozilla.org.
Les outils de développement de Firefox incluent désormais un inspecteur d'animation CSS détaillé qui détectera automatiquement les animations d'un élément sélectionné, ainsi que toutes les animations de ses éléments enfants. Pour chaque élément animé, il vous montre une ligne de temps avec un épurateur que vous pouvez contrôler et vous donne la possibilité de mettre en pause, d'accélérer ou de ralentir les animations..
Avec une animation sélectionnée, vous pouvez modifier ses propriétés dans le modes onglet et voir l'effet de vos modifications en temps réel, une fonctionnalité qui est très utile pour le processus de peaufiner des choses comme des fonctions d'accélération.
La manière dont les animations sont décrites dans les outils de développement vous aide également à déterminer la composition de chaque animation, ce que nous approfondirons dans un autre article très prochainement. Donc, si vous aimez l'animation CSS, restez à l'écoute!
En savoir plus sur developer.mozilla.org.
La barre d'outils de développeur est un moyen très pratique d'activer et de contrôler rapidement les fonctionnalités incluses dans les outils de développement de Firefox. C'est une interface de ligne de commande relativement simple à travers laquelle vous pouvez interagir avec à peu près tout ce que les outils de développement peuvent faire. Par exemple, vous pouvez l’utiliser pour effectuer une capture d’écran rapide, pour obtenir un aperçu réactif de votre site dans des dimensions spécifiques ou pour saisir une couleur de la page..
Frappé MAJ + F2 pour ouvrir la barre d’outils, entrez la commande Aidez-moi pour connaître toutes les commandes que vous avez à votre disposition.
En savoir plus sur developer.mozilla.org.
Le mode de conception réactif vous permet de simuler différents périphériques. leurs dimensions, leurs méthodes d’interaction et leur vitesse de connexion typique. Vous pouvez choisir parmi une liste de dimensions prédéfinies, ajouter vos propres définitions de taille à la liste ou redimensionner librement l'aperçu..
Pour l'activer, cliquez sur le bouton Mode de conception réactif icône dans les outils de développement. Ou, dans la barre d’outils du développeur, entrez redimensionner sur pour activer ce mode, redimensionner à pour tester une taille spécifique, redimensionner pour l'éteindre à nouveau, ou redimensionner bascule pour l'activer et le désactiver.
En savoir plus sur developer.mozilla.org.
Gardez un œil sur les dimensions de vos conceptions en utilisant des règles de page similaires à celles que vous trouverez dans une application de conception graphique..
Clique le Règles icône sur la barre supérieure des outils de développement à activer, ou dans la barre d’outils du développeur, entrez la commande les dirigeants.
En savoir plus sur developer.mozilla.org.
Saisissez facilement n'importe quelle couleur d'une page avec la pipette, ce qui agrandira tout ce que vous survolez avec votre souris pour faciliter la sélection des couleurs. Vous pouvez spécifier le format dans lequel vous voulez que votre code de couleur soit donné, ou le faire utiliser le format créé.
Activer à partir du menu Web Developer, ou dans la barre d’outils Developer, entrez la commande pipette.
En savoir plus sur: developer.mozilla.org.
Firefox a un outil de capture d'écran très pratique intégré à la construction; plus besoin d'extensions de capture d'écran.
En mode normal, vous pouvez utiliser l'outil de capture d'écran pour capturer une zone à définir, ou vous pouvez cliquer sur des éléments de page individuels pour les capturer. En mode Responsive Design, vous pouvez cliquer sur un petit bouton en haut à droite de l'aperçu pour capturer une capture d'écran de l'apparence de votre site sur un appareil particulier..
Activez l'outil de capture d'écran dans la barre d'outils principale de Firefox 57 (tous les soirs), dans le coin supérieur droit des outils de développement ou depuis la barre d'outils de développeur à l'aide de la commande. capture d'écran.
En savoir plus sur developer.mozilla.org.
Prenez une mesure rapide sur n’importe quelle partie de la page en activant l’outil de mesure et en faisant glisser un rectangle. Vous obtiendrez la hauteur, la largeur et la diagonale entre les coins.
Les outils de développement de Firefox comportent trois thèmes: un thème clair (blanc), un thème sombre (bleu) et un clin d'œil agréable aux outils de développement d'origine de Firefox, un thème Firebug..
Que votre configuration de bureau soit de couleur claire ou sombre, vous aurez un thème assorti.
Firefox s'améliore de jour en jour, en particulier avec les modifications majeures de la version 57 à venir. De plus, les fonctionnalités désormais disponibles dans les outils de développement de Firefox rendent Firefox très attrayant, non seulement pour la navigation, mais aussi pour le développement..
Si vous n'avez pas encore vérifié Firefox Dev Tools, allez-y!
Accentsconagua