Un aperçu des outils essentiels de Firefox pour les développeurs Web

Firefox est depuis longtemps le navigateur préféré pour le développement Web. Il existe un certain nombre d’add-ons utiles pour faire le travail. Dans cet article, nous allons examiner quelques add-ons qui, à mon avis, sont indispensables pour pouvoir être installés si vous envisagez de faire du développement Web. Aussi, nous allons découvrir certaines des fonctionnalités de ces add-ons qui peuvent aider.

Tout d’abord, nous devons installer le Firebug.

Pyromane

Firebug est un complément indispensable à l’installation pour le développement Web. En supposant que vous ne savez pas où obtenir Firebug, vous pouvez l’installer ici. Probablement, vous devez redémarrer votre Firefox avant qu'il ne soit activé.

Après cela, vous pouvez visualiser le Firebug de l’une des manières suivantes: suivez ce menu Outils> Développeurs Web> Firebug, faites un clic droit sur la page Web et choisissez “Inspecter l'élément avec Firebug”.

Alternativement, vous pouvez trouver une icône Firebug dans Firefox et cliquer dessus, cela affichera la fenêtre Firebug;

Firebug est assez identique à Outils de développement Chrome. il comporte un panneau pour voir la structure HTML et les styles, ainsi qu'un panneau de console pour voir les erreurs, les avertissements et les journaux. Mais, j'ai quelques autres conseils qui, espérons-le, pourront vous être utiles.

Réglage de la taille de la boîte

L'élément HTML est constitué d'un modèle de boîte CSS composé d'une marge, d'un remplissage et d'une dimension d'objet (largeur / hauteur). Il peut arriver que nous ayons besoin de modifier ces propriétés. Dans ce cas, vous pouvez sélectionner l’un des éléments que vous souhaitez modifier, puis aller à la Disposition panneau.

Dans ce panneau, vous trouverez une illustration d’un modèle de boîte CSS avec ses informations, y compris le largeur et la taille. Même si ces deux propriétés ne sont pas spécifiées en CSS, Cet outil est assez intelligent pour déterminer la valeur. Si vous avez besoin de les modifier, vous pouvez simplement cliquer sur la valeur et utiliser les touches fléchées haut ou bas pour augmenter ou diminuer la valeur..

Styles calculés

Dans de nombreuses situations, vous vous demandez probablement pourquoi certains styles ne sont pas appliqués. L’un des moyens les plus simples et les plus rapides, en particulier lorsque vous avez des milliers de lignes de styles, consiste à les inspecter à partir du Style calculé panneau. Cet exemple montre que la couleur du texte de la balise d'ancrage est remplacée par .bouton classe, tandis que le fond de la .bouton la classe est écrasée par .bouton.ajouter.

Inspection de la famille de polices (solution de facilité)

Vous trouvez probablement souvent quelque chose comme ça dans famille de polices propriété en CSS avec différentes familles de polices. Malheureusement, cela ne nous indiquera pas précisément quelle police le navigateur utilise. Pour faciliter l'identification, nous pouvons installer cette extension Firebug, à savoir: FireFontFamily.

Une fois l’installation terminée, chargez votre page Web. Nous pouvons maintenant voir clairement quelle famille de polices est appliquée. Dans notre cas c'est en fait Helvetica Neue (voir photo).

Analyser les performances

Il s’agit peut-être de platitude, mais la vitesse du site est désormais l’un des paramètres (algorithme) de Google pour la qualité du site Web; le site Web qui se charge plus rapidement est considéré comme bien développé et mieux classé en termes de contenu. Donc, la vitesse n'est pas quelque chose qui devrait être négligé.

Net Panel

Le premier endroit à visiter pour inspecter les performances de votre site Web est le Net panneau. Ce panneau enregistrera la requête HTTP de votre site Web lors de son chargement. Cette capture d'écran ci-dessous montre une page Web qui charge 42 demande et prend autour 4,36 secondes charger.

Vous pouvez ensuite trier la demande HTTP en fonction de leur type, par exemple HTML, CSS et Images..

Yslow!

En outre, vous pouvez également installer YSlow, une extension pour Firebug de Yahoo !. Une fois activé, vous trouverez un panneau supplémentaire appelé Yslow.!.

Semblable à Net panneau, Yslow! enregistrera les performances de la page Web lors de son chargement, mais il vous indiquera également pourquoi la page Web est lente et que pouvons-nous faire pour la résoudre? Dans cet exemple, nous exécutons un test sur une page Web et celle-ci est notée. 86 pour la performance globale, qui est considéré comme OK.

Vitesse de la page

Vous pouvez également installer Page Speed ​​à partir de Google. Semblable à Yslow!, il teste les performances de vitesse du site Web, bien que le résultat du test puisse être légèrement différent. Cet exemple montre que la même page Web a marqué 82 selon Page Speed.

Outils de développement Web

Outils de développement Web est évidemment pour les développeurs Web et il a un tas de fonctionnalités emballées dans cette barre d'outils. Mais celui ci-dessous est l'un de mes favoris.

Inspection d'image

Il peut arriver que nous devions obtenir des informations sur les images à partir de la page Web. Je vois souvent des gens le faire en trébuchant dans le navigateur ou en faisant un clic droit sur l’image et en sélectionnant Afficher les informations sur l'image, ainsi:

Mais cette méthode n’est pas très efficace lorsque nous devons extraire l’information de nombreuses images. Dans ce cas, nous pouvons utiliser le Images fonctionnalité de l'add-on. Cette fonctionnalité est facilement accessible depuis le menu Image de la barre d’outils.

Et, cet exemple montre comment nous affichons la dimension de l'image et la taille du fichier d'image simultanément:

Outils intégrés à Firefox

Dans les versions récentes, Firefox a énormément amélioré ses fonctionnalités intégrées pour les développeurs Web, notamment:

Élément d'inspection autochtone

Ce natif Inspecter l'élément de Firefox peut ressembler à “Inspecter l'élément dans Firebug”, mais il agit réellement de différentes manières.

Cette fois, je ne reviendrai pas plus loin sur cette fonctionnalité, car elle est essentiellement identique au panneau HTML et CSS de Firebug, bien qu’elle présente une différence de mise en page et de conception. Mais, il y a une caractéristique distinctive qui vaut la peine d'essayer, le Vue 3D.

En utilisant Vue 3D vous pouvez voir la structure de la page Web en profondeur. Pour activer cette vue, vous pouvez trouver le bouton en bas à droite de la “Élément d'inspection native de Firefox”. Voici comment Vue 3D ressemble à.

Je ne l'utilise pas aussi souvent que d'autres fonctionnalités, mais c'est une fonctionnalité assez innovante de Mozilla, je l'avoue, et certainement très utile dans certaines situations..

Web Design Voir

Depuis la popularité croissante de Responsive Web Design, Firefox a lancé un bookmarklet sensible dans le navigateur. Cet outil nous permettra de tester notre site Web réactif dans différentes fenêtres sans redimensionner la fenêtre du navigateur..

Cette vue est disponible à partir de ce menu: Outils> Développeur Web> Mode Web. Et, voici à quoi ressemble la vue.

Éditeur de style

Enfin, si vous travaillez fréquemment avec CSS, vous tomberez probablement amoureux de cette fonctionnalité. Depuis la version 11, Firefox avait ajouté Éditeur de style dans ses outils de développement natifs.

Cette fonctionnalité est aussi cool que le Web Design Voir, il vous permet d'éditer le CSS, de voir l'impact instantanément sur le navigateur et d'enregistrer les modifications qui affectent directement le fichier source CSS.

L'éditeur de styles est disponible dans le menu suivant: Outils> Développeur Web> Editeur de styles.

Pensée finale

Ces modules complémentaires de Firefox contiennent de nombreuses fonctionnalités. Celles-ci ne sont que quelques-unes des fonctionnalités que j'utilise fréquemment lors du développement Web. Néanmoins, vous pouvez avoir d'autres conseils utiles pour augmenter la productivité du développement Web dans Firefox..

Quelles fonctionnalités utilisez-vous fréquemment? Vous pouvez partager vos pensées dans la boîte de commentaire ci-dessous.