Utilisation de Firefox Developer Edition pour le développement Web

Ce que vous allez créer

Firefox Developer Edition a été publié par Mozilla lors de la célébration du dixième anniversaire de Firefox l'année dernière. Récemment, des versions 64 bits de Firefox Developer Edition ont également été mises à disposition pour Windows, Linux et Mac OS X. Firefox Developer Edition offre un accès facile à un large éventail d’outils de développement permettant de faciliter le débogage et d’aider plus rapidement et de manière plus professionnelle. développement. Vous pouvez télécharger la dernière version de Firefox Developer Edition ici. Laissez-nous jeter un oeil à quelques-unes des grandes fonctionnalités de Firefox Developer Edition.

WebIDE

Avec WebIDE, vous pouvez créer, éditer, tester ou déboguer des applications Web en les exécutant sur le simulateur Firefox OS. Si vous créez une nouvelle application Web, une plate-forme standard ou une plaque de chaudière plus complète est également créée avec une structure de répertoires appropriée. WebIDE vous permet également de connecter Firefox Devtools à de nombreux autres navigateurs Web tels que Safari (iOS), Firefox (Android) et Chrome (Android)..

Responsive Design View

Vous pouvez appeler Responsive Design View dans Firefox en appuyant sur Ctrl + Maj + M. Vous pouvez vérifier la réactivité de votre application Web à l'aide de cet utilitaire. Il offre un certain nombre d'options, telles que définir la taille du périphérique que vous souhaitez émuler, faire pivoter l'écran (passage du mode portrait au mode paysage), simuler des événements tactiles et prendre une capture d'écran de la page Web en mode réactif..

Outil Pipette

L'outil Pipette est un outil vraiment génial qui vous aide à connaître la valeur hexadécimale de n'importe quelle couleur dans une page Web (tout comme l'outil Pipette dans Photoshop). Cela aide à trouver la couleur de tout élément ou image qui doit parcourir son code via Element Inspector. En cliquant sur la couleur, sa valeur est ajoutée à votre presse-papiers!

Inspecteur de navigateur

Nous avons tous travaillé avec l'inspecteur d'élément. Maintenant, qu'est-ce que l'inspecteur du navigateur? Eh bien, l'inspecteur de navigateur est utilisé pour déboguer le navigateur Firefox lui-même. Si vous souhaitez modifier la couleur de la barre d'URL ou, par exemple, la courbe des onglets avec des résultats non persistants, vous pouvez le faire via l'inspecteur du navigateur. Bien que Scratchpad puisse obtenir le même résultat, Browser Inspector est tout à fait utile si vous n'êtes pas un développeur Firefox ou si vous souhaitez simplement tester vos modifications.!

Vue 3D

Je pense que ceci est la fonctionnalité la plus impressionnante des outils de développement de Firefox. Vous pouvez consulter le rendu 3D de tout site Web, où chaque bloc d'altitude représente un élément, dans l'ordre de leur imbrication dans le code du site. Cela vous aide à savoir quels éléments sont imbriqués dans quel élément. Vous pouvez accéder à la vue 3D en appuyant sur Ctrl + Maj + C, puis en sélectionnant l'icône en forme de boîte à droite du nouveau panneau ouvert..

Bloc-notes

Vous pouvez ouvrir le Scratchpad en appuyant sur Maj + F4. Scratchpad peut être utilisé pour exécuter des grappes de code javascript et pour éditer, exécuter et examiner les résultats. La différence entre la console de navigateur et cette console de navigateur est qu'elle est conçue pour interpréter une seule ligne de code à la fois, mais avec Scratchpad, vous pouvez travailler avec de gros morceaux de code qui l'exécutent de différentes manières, en fonction de l'utilisation que vous souhaitez en faire. sortie.

Conclusion

Firefox Developer Edition fournit un large éventail d’outils pour la création, le débogage, la surveillance des performances, le débogage du navigateur et l’extension de DevTools. Expliquer tous les outils dépasse le cadre de cet article. Cependant, vous pouvez consulter la liste complète des outils ici. Nous espérons que l’introduction aux outils mentionnés ci-dessus vous aidera dans vos tâches quotidiennes de développement Web..