Tout ce que vous devez savoir sur les outils de développement Firefox

Firefox Developer Edition est une version spéciale de Firefox conçue sur mesure pour les développeurs. Il présente toutes les dernières fonctionnalités de Firefox ainsi qu'un certain nombre d'outils de développement spécialisés. Ici, je vais vous fournir un guide de ses fonctionnalités afin que vous sachiez tout ce qu'il y a à savoir sur les outils de développement Firefox.

Interface utilisateur

Après avoir installé Firefox Developer Edition, vous remarquerez qu'il est légèrement différent de la barre d'outils standard de Firefox. Firefox a certainement adopté une approche plus centrée sur le développeur dans la conception de sa barre d'outils, la rendant plus étroite en apparence et décorée de beaucoup plus de boutons par défaut.

Le thème par défaut des outils de développement Firefox est sombre, ce qui est probablement le résultat des tests des utilisateurs. Cependant, si vous n'aimez pas le thème sombre, vous pouvez toujours désactiver le thème de l'édition développeur en allant dans Menu > Personnaliser .

Création d'outils

L'édition développeur de Firefox est livrée avec un certain nombre d'outils de création, conçus pour les créateurs de sites Web et d'applications Web. Ci-dessous, j'ai fourni un aperçu des outils et de leurs avantages afin que vous n'ayez pas à chercher ces informations.

Bloc-notes

Cet outil donne aux développeurs Web la possibilité d'expérimenter avec du code JavaScript. Dans l'environnement fourni par Scratchpad, vous pouvez écrire, exécuter et examiner les résultats du code qui interagit avec la page actuelle.

Pour ouvrir Scratchpad, appuyez simplement sur Shift F4 ou allez dans le menu Web Developer et cliquez sur Scratchpad. Cela ouvrira la fenêtre où vous pourrez écrire votre code. Une fois que vous avez terminé, cliquez sur Exécuter > Exécuter et le code s'exécutera dans l'onglet actuel.

Éditeur de styles

L'éditeur de style permet aux développeurs Web de visualiser et de modifier toutes les feuilles de style avec la page associée. Vous pourrez également créer de nouvelles feuilles de style à partir de zéro et les appliquer à une page, ainsi qu'importer des feuilles de style existantes et les appliquer à la page actuelle.

Pour ouvrir l'éditeur de style, allez dans le menu Développeur Web et cliquez sur Éditeur de style . La Firefox Developer Toolbox apparaîtra alors en bas du navigateur avec l'éditeur de style prêt à l'emploi.

Éditeur de shaders

L'utilisation de l'éditeur Shader dans Firefox est simple. Les développeurs peuvent afficher et éditer entièrement les shaders de fragments et le vertex tels qu'ils sont utilisés par WebGL. Et juste rapidement pour ceux qui ne le savent pas, WebGL utilise intelligemment JavaScript (via une API) pour rendre les graphiques 2D et 3D directement via le navigateur Firefox, sans nécessiter l'utilisation de plugins.

Afin d'utiliser l'éditeur de shader, il est nécessaire de l'activer d'abord. Pour ce faire, accédez aux paramètres de la boîte à outils, puis cochez la case à côté de « Shader Editor ». L'éditeur de shader s'affichera alors dans la barre d'outils de Firefox. Cliquez dessus et vous pourrez l'ouvrir.

Éditeur Web Audio

L'API Web Audio Editor permet aux développeurs de créer un contexte audio. Les développeurs devront créer des nœuds audio fournissant :

• Sources audio
• Nœuds qui effectuent des transformations
• Notes représentant la destination choisie pour le flux audio.

Le Web Audio Editor examinera les aspects audio d'une page et en fournira une représentation visuelle dans un graphique. Cela permet aux développeurs d'examiner les fonctionnalités et le fonctionnement et de vérifier que tous les nœuds se connectent correctement. Les développeurs peuvent à la fois éditer et examiner les propriétés du nœud AudioParam, ainsi que d'autres propriétés.

Comme le Shader Editor, le Web Audio Editor doit être activé manuellement et n'est pas un paramètre par défaut. L'activation est simple : revenez simplement aux paramètres de l'outil de développement, puis cochez la case à côté de « Web Audio ». Vous verrez alors qu'il y a un onglet supplémentaire dans la barre d'outils de Firefox Toolbox. Cliquez simplement sur cet onglet et une page sera chargée à partir de laquelle vous pourrez construire un contexte audio.

Outils de débogage

Les outils de débogage de Firefox sont conçus pour examiner, explorer et déboguer des sites Web et des applications Web. Ci-dessous, j'ai décrit les principales caractéristiques de certains de ces outils et leurs avantages.

Inspecteur de page

L'outil Inspecteur de page permet aux développeurs d'inspecter et de modifier le codage HTML et CSS d'une page Web. À l'aide de cet outil, les développeurs peuvent enquêter sur les pages via la version chargée localement ou via une cible distante.

L'ouverture de l'inspecteur de page est simple. Si vous avez sélectionné un élément, vous pouvez simplement cliquer avec le bouton droit sur l'élément, puis sélectionner « Inspecter l'élément ». Vous pouvez également accéder au menu du développeur Web, puis cliquer sur l'option Inspecteur. L'inspecteur de page apparaîtra alors en bas de votre navigateur.

Console Web

Cet outil enregistre toutes les informations associées à une page Web, telles que les demandes réseau, JavaScript, CSS, les erreurs et avertissements de sécurité, les avertissements d'erreur et les messages d'information. Il vous permet également d'interagir avec une page Web en utilisant JavaScript.

La console Web a été conçue pour remplacer l'ancienne console d'erreurs, qui faisait à l'origine partie des outils de développement de Firefox. Alors que la console d'erreurs fournissait une énorme liste d'erreurs provenant de plusieurs pages, la console Web n'affichera jamais que les informations associées à une page Web spécifique, la rendant ainsi plus utile.

Pour ouvrir la console Web, accédez au sous-menu Développeur Web dans le menu Firefox et cliquez sur « Console Web ». Vous pouvez également utiliser le raccourci Ctrl Shift K. La boîte à outils apparaîtra alors en bas du navigateur avec 'Console' activé.

Débogueur

L'outil Firefox Debugger donne aux développeurs Web la possibilité d'examiner et de modifier votre code JavaScript. Il peut également être utilisé pour identifier des bugs. À l'aide du débogueur, vous pouvez déboguer le code localement dans Firefox ou à distance sur un appareil Firefox OS ou Firefox pour Android.

Pour ouvrir le débogueur, allez dans le sous-menu Web Developer dans le menu principal de Firefox et cliquez sur 'Debugger'. Alternativement, vous pouvez appuyer sur Ctrl Shift S et la boîte à outils apparaîtra au bas de votre navigateur avec le débogueur activé et prêt à l'emploi.

Moniteur réseau

Le Moniteur réseau est conçu pour vous montrer toutes les différentes demandes de réseau faites par Firefox, combien de temps prend chaque demande et les détails de chaque demande. Accédez au menu Développeur Web > Réseau pour activer l'outil. Vous devrez actualiser la page pour voir les demandes.

Dans le Moniteur réseau, vous pourrez afficher une chronologie des demandes et filtrer le contenu par type. Il existe également un outil d'analyse des performances, que vous pouvez utiliser pour voir combien de temps le navigateur prend pour télécharger différentes parties de votre site Web. Pour exécuter cet outil, cliquez simplement sur l'icône du chronomètre dans la barre d'outils en bas du Moniteur réseau.

Inspecteur de stockage

Si vous souhaitez en savoir plus sur les différents types de stockage qu'une page Web peut utiliser, vous devez activer l'outil Storage Inspector. Dans l'état actuel des choses, l'inspecteur de stockage peut être utilisé pour inspecter les cookies, le stockage local, le stockage de session et IndexedDB.

L'inspecteur de stockage fournit une vue en lecture seule du stockage. Cependant, Firefox a déclaré qu'il travaillait au développement de l'outil afin que les développeurs puissent modifier le contenu de leur stockage à l'avenir.

Pour ouvrir l'inspecteur de stockage, accédez au sous-menu Développeur Web et cliquez sur Inspecteur de stockage. Vous pouvez également appuyer sur Shift + F9 pour utiliser le raccourci clavier.

Barre d'outils du développeur

La barre d'outils du développeur est conçue pour donner aux développeurs Web un accès en ligne de commande à un certain nombre d'outils de développement Firefox. En plus d'utiliser les commandes configurées par Firefox, que vous pouvez trouver ici, vous pouvez également ajouter vos propres commandes à l'aide de Scratchpad. Ceux-ci peuvent être convertis en modules complémentaires afin que d'autres personnes puissent également les utiliser.

Ouvrez la barre d'outils du développeur en appuyant sur Shift + F2. Vous pouvez également accéder au menu du développeur Web et cliquer sur la barre d'outils du développeur.

Autres outils de débogage - Vue 3D, Pipette, iFrames

Les autres outils de débogage inclus dans le package Firefox Developer Tools incluent :

• Vue 3D : cela vous donne une vue 3D de vos blocs de HTML et de contenu imbriqués
• Pipette pour les yeux : cela vous permet de sélectionner une couleur particulière sur la page et de la copier dans le presse-papiers)
• Sélection d'iFrames : cela vous permet de pointer vos outils de développement sur des iFrames spécifiques dans un document.

Outils mobiles

En plus des outils de création et de débogage de Firefox, il existe également un certain nombre d'outils mobiles que les développeurs peuvent utiliser pour les développements mobiles. Je vais les parcourir en entier ci-dessous.

Gestionnaire d'applications

Cet outil permet aux développeurs de tester, déployer et déboguer des applications HTML5 sur des appareils Firefox OS. Il agit également comme un simulateur afin que les tests puissent être effectués directement à partir du navigateur de bureau Firefox.

Le gestionnaire d'applications est fourni avec un panneau d'applications, où les développeurs peuvent gérer les applications locales et les applications hébergées en externe ; un panneau Appareil, qui fournit des informations sur un appareil connecté, telles que sa version du système d'exploitation et les applications installées ; et les boîtes à outils, qui sont un ensemble d'outils de développement Firefox pouvant être utilisés sur l'application en cours d'exécution.

WebIDE

Cet outil mobile permet aux développeurs de créer, modifier, exécuter et déboguer leurs applications Web via le simulateur Firefox OS ou via un appareil Firefox OS. Vous pouvez l'utiliser pour vous connecter aux outils de développement Firefox avec d'autres navigateurs tels que Firefox pour Android et Chrome pour Android.

Autres outils mobiles

Les autres outils mobiles incluent :

• Débogage à distance pour Firefox pour Android
• Simulateur Firefox OS : Ceci simule un appareil Firefox OS mais s'exécute sur le bureau
• Vue de conception réactive : cela vous permet de voir à quoi ressemble votre site Web ou votre application Web sur différents appareils avec différentes tailles d'écran.

Outils de performance

Les performances sont essentielles dans le développement Web, c'est pourquoi Firefox fournit aux développeurs Web un certain nombre d'outils qui peuvent être utilisés pour diagnostiquer et résoudre les problèmes de performances de ses sites Web et applications Web.

Outil de performances

L'outil Performance a remplacé le profileur d'échantillonnage JavaScript d'origine de Firefox. Il contient toujours une version mise à jour du profil d'échantillonnage ; Cependant, il dispose également d'une chronologie de la fréquence d'images. Plus de fonctionnalités sont attendues dans le futur.

L'outil Performance peut être utilisé pour créer, analyser et échantillonner des profils.

Profileur JavaScript

Le profileur JavaScript est conçu pour aider les développeurs à trouver des problèmes dans leur code JavaScript. Pour ce faire, il échantillonne la pile d'appels JavaScript actuelle et fournit des statistiques à ce sujet.

Outil de clignotant de peinture

Cet outil mettra en évidence la partie de votre page Web que le navigateur doit repeindre en réponse à une entrée. Il permet aux développeurs Web de déterminer si leur site Web fait repeindre le navigateur plus qu'il n'en a besoin. N'oubliez pas que les repeints peuvent avoir un impact négatif sur vos performances, c'est donc une bonne idée d'utiliser cet outil pour éliminer les repeints inutiles et améliorer les performances de votre site Web.

Profil de développeur distinct

Devoir basculer entre les versions de Firefox serait une vraie douleur. La bonne nouvelle est que Firefox Developer Edition utilise un profil entièrement distinct des autres versions de Firefox que vous avez installées.

Notes de version pour les développeurs

Les développeurs souhaitant lire les notes relatives aux versions actuelles et historiques de Firefox Developer Edition peuvent le faire simplement en visitant ce lien.

Emballer

Si vous êtes un développeur Web débutant ou expérimenté, vous bénéficierez grandement de l'utilisation des outils de développement détaillés et variés de Firefox. De la création de code au débogage HTML, les outils vous permettent d'effectuer un large éventail d'actions nécessaires au développement d'un site Web ou d'une application Web. Les outils mobiles sont également extrêmement utiles, en particulier pour ceux qui cherchent à créer des sites Web adaptés afin de bénéficier de la dernière ⁽²¹ Avril 2015) mise à jour de l' algorithme de Google.

Pour plus d'informations sur les outils de développement Firefox, rendez-vous sur le site Web des développeurs Mozilla et rejoignez la communauté des développeurs. L'édition développeur de Firefox est téléchargeable et utilisable gratuitement.