Un nombre croissant de développeurs Web se tournent vers Firefox ces derniers mois, poussé par Firefox Quantum après Mozilla amélioration des performances pour être sur un pied d'égalité avec Google Chrome.
Bien que Firefox propose des outils adaptés aux développeurs par défaut avec des fonctionnalités innovantes comme son inspecteur CSS CSS, il est toujours possible d'ajouter des fonctionnalités plus intéressantes au navigateur à travers l'écosystème des extensions.
Dans cet esprit, voici quelques extensions que vous devriez essayer si vous utilisez Firefox en tant que développeur web.
1. Rapport Compat
Vous aide Rapport Compat Détermine les éventuels problèmes de compatibilité du navigateur Web lors du développement de sites Web ou d'applications Web. Cela ne fonctionne que pour CSS en ce moment.
Une fois l'extension installée, un nouveau panneau "Compatibilité" sera ajouté aux outils de développement. À partir de là, vous pourrez voir comment chaque site spécifique fonctionne dans chacun des principaux navigateurs
Les versions des navigateurs qui n'ont pas de problèmes de compatibilité sont en vert, avec quelques versions jaunes, et celles avec plusieurs versions en rouge. Vous pouvez rechercher des versions spécifiques de votre navigateur pour voir les règles CSS exactes qui causent des problèmes.
2. JSON Lite
Si vous travaillez fréquemment avec des API JSON, il peut être fastidieux d'afficher les données JSON dans votre navigateur. En effet, le navigateur ne le formate pas correctement par défaut, ce qui le rend difficile à lire.
Travaux JSON Lite Résolvez ce problème en formatant les réponses JSON et JSONP avec la syntaxe appropriée et la fonction d'affichage des erreurs utiles lors de l'examen de grandes données JSON.
Si vous n'avez pas besoin de toutes les fonctionnalités fournies par JSON Lite, vous ne pouvez activer JSON Viewer intégré dans Firefox qu'en tapant "about: config" dans la barre d'adresse, puis en recherchant devtools.jsonview.enabled. Définissez-le sur "true" en double-cliquant sur l'option, puis téléchargez n'importe quel fichier JSON dans votre navigateur pour voir le résultat.
3. Réagir Devtools
React est l'une des bibliothèques les plus populaires aujourd'hui dans l'écosystème du développement web. Si vous développez Applications Web utilisant React , Vous verrez beaucoup de valeur en utilisant son complément de navigateur pour déboguer votre code.
Une fois installé, vous serez en mesure de vérifier le code React sur n'importe quel site Web qui l'utilise. L'icône de l'extension apparaîtra dans la barre d'outils du navigateur, et vous obtiendrez également l'onglet 'Interaction' avec les autres cartes DevTools. Le panneau React vous permet d'examiner l'arborescence React, y compris la hiérarchie des composants, des supports, de l'état, etc.
Vous pouvez également installer Vue.js devtools و Redux DevTools Si des bibliothèques sont développées.
4. Fontanello
il fournit Fontanello Un moyen très rapide de localiser les polices sur n'importe quel site Web. Avec ce module, vous n'avez plus besoin d'ouvrir devtools juste pour voir quelle police le site utilise. Fontanello affiche les styles d'impression de texte de base dans le menu contextuel, cliquez avec le bouton droit de la souris dans Firefox.
5. Wappalyzer
Vous êtes-vous déjà interrogé sur les techniques utilisées pour créer vos sites Web préférés? Cela peut vous sauver Wappalyzer Cette information est un simple clic. Il peut détecter différents systèmes de gestion de contenu, plateformes de commerce électronique, serveurs Web, frameworks JavaScript, programmes de bases de données, outils d'analyse et bien d'autres.
La couverture
Si vous cherchez à augmenter le flux de votre travail de développement, vous ne pouvez pas manquer l'une des extensions listées ci-dessus. N'oubliez pas de partager vos vidéos préférées dans la section des commentaires ci-dessous.
