Firefox Developer Edition 6 Outils les plus cool à essayer

Firefox Developer Edition est le seul navigateur conçu spécialement pour les développeurs. Les outils de développement de l'édition standard apparaissent en premier dans l'édition de développeur et il existe des outils dans l'édition de développeur qui ne sont pas et ne seront pas disponibles dans l'édition standard. Aujourd’hui, nous allons jeter un coup d’œil sur certains des outils qui, pour le moment, peut être trouvé que dans l'édition de développeur.

Si vous êtes quelqu'un qui n'a jamais utilisé les outils de développement, même ceux de l'édition standard, ou qui ne s'y connaît pas très bien, essayez d'abord ce cool "DevTools Challenger" de Mozilla. Ici, vous pouvez vous exercer avec certains des outils mentionnés ci-dessous dans le navigateur de l’édition pour développeurs de Firefox. Les exemples sont amusants et faciles à suivre, les instructions sont simples et si vous ne pouvez pas vous rattraper, suivez simplement le didacticiel vidéo à la place..

1. Outil Inspecteur d'animation

Les animations CSS sont de plus en plus courantes et les outils d'animation CSS fournis par Firefox Developer Edition facilitent le suivi et l'inspection de chaque étape de l'animation créée. Vous pouvez mettre en pause, lire et inverser n’importe quelle animation; vous pouvez également voir ce qui se passe image par image via récurage.

Pour accéder à l'outil, ouvrez le Inspecteur outil en cliquant avec le bouton droit de la souris sur l'élément d'animation et en sélectionnant "inspecter l'élément", puis à droite de la fenêtre de l'outil de développement, cliquez sur "Animations".

2. Éditeur de fonction de minutage d'animation

L’animation est modifiable dans l’outil de développement, il vous suffit de cliquer sur l’icône en regard de la fonction dans le menu déroulant. Règles section de la Inspecteur Un outil et une fenêtre contextuelle affichant les courbes de fonction s’ouvrent. Vous pouvez faire glisser et modifier cela pour ajuster le timing de votre animation. Une fois que vous avez modifié les courbes, la vitesse de votre animation change en conséquence..

Si vous n'êtes pas déjà familiarisé avec la fonction d'animation Bézier cubique, je vous recommande cet article pour en savoir plus..

3. Sélecteur de couleurs pour les propriétés CSS

Il existe déjà un sélecteur de couleurs disponible dans l'édition standard de Firefox (pour en savoir plus à ce sujet dans cet article), qui sélectionne une couleur de la page et la copie dans le Presse-papiers. Le sélecteur de couleur que je mentionne maintenant est cependant spécifique pour les valeurs de couleur CSS des propriétés.

À côté de chaque valeur de couleur CSS dans le Règles section de la Inspecteur outil, il y a une icône qui ouvrira une roue de couleur pop-up lorsque vous cliquez dessus. Vous pouvez sélectionner la couleur que vous voulez de la roue.

Si vous avez déjà une couleur que vous voulez et une qui se trouve sur la page, cliquez simplement sur l'outil Pipette au bas de la fenêtre pour ouvrir le sélecteur de couleurs, puis faites glisser le sélecteur vers la couleur souhaitée et cliquez dessus. . La valeur de couleur CSS sera remplacée par celle de la couleur sélectionnée.

4. Outil de mesure

Cet outil vous permet de voir la position XY du curseur et les mesures de hauteur, de largeur et de diagonale en pixels d'une partie sélectionnée. Pour utiliser l'outil, vous devez d'abord l'activer dans le développeur. Options de la boîte à outils, en cochant la case "Mesurer une partie de la page" sous "Boutons disponibles".

Une fois activé, une icône de règle apparaît en haut de la fenêtre de l'outil de développement, cliquez dessus et déplacez le curseur sur la page. Vous verrez les positions XY près du curseur. Pour mesurer la largeur, la hauteur et la diagonale, il suffit de cliquer et de faire glisser pour sélectionner la partie à mesurer..

5. Editeur de filtres CSS

Si vous aviez appliqué le filtre CSS à un élément de la page, une icône apparaît à côté de celui-ci dans la liste. Règles section de la Inspecteur outil, qui ouvre un éditeur de filtres CSS lorsque vous cliquez.

Pour supprimer un filtre, cliquez sur la marque × située à droite du nom du filtre. Pour ajouter un filtre, cliquez sur la boîte de filtre en bas, sélectionnez celle que vous souhaitez ajouter et cliquez sur le bouton + signe. Vous pouvez également réorganiser les filtres dans n’importe quel ordre en faisant glisser chaque élément..

6. Outil de mémoire

Vous pouvez trouver ce qui occupe la mémoire de votre page Web, à l'aide de cet outil. Cela vous aide à prendre des mesures pour réduire l'utilisation de la mémoire et améliorer la vitesse de votre page en conséquence..

Pour utiliser cet outil, vous devez d'abord l'activer à partir du Options de la boîte à outils en cochant la case "Mémoire" sous "Outils de développement par défaut de Firefox". Une fois coché, vous verrez la section "Mémoire" en haut de la fenêtre de l'outil de développement juste après "Performances". Sélectionnez ça.

Pour utiliser l'outil, cliquez sur "Prendre une photo" ou sur le bouton de l'appareil photo. Vous verrez une liste d'éléments, comme des objets et des scripts qui utilisent de la mémoire. .