10 outils utiles de développement pour Firefox que vous devriez connaître
Firefox étant le "navigateur du développeur" dispose de nombreux outils formidables pour faciliter notre travail. Vous pouvez trouver plus d'informations sur sa collection d'outils sur la page Web Outils de développement de Firefox et également essayer son navigateur Developer Edition, qui comporte davantage de fonctionnalités et d'outils en cours de test..
Pour cet article, j'ai énuméré 10 outils pratiques vous pourriez aimer de sa collection d'outils de développement. J'ai également montré ce que ces outils peuvent faire avec les GIF et comment y accéder pour une référence rapide..
1. Voir les règles horizontales et verticales
Firefox a un outil de règle qui affiche les règles horizontales et verticales avec des unités de pixels sur la page. Cet outil est utile pour organiser vos éléments sur la page..
Pour accéder aux règles via le menu, allez à:> Développeur > Barre d'outils développeur (raccourci: Maj + F2). Une fois que la barre d'outils apparaît au bas de la page, tapez les dirigeants et appuyez sur Entrer.
Pour que cela apparaisse dans la fenêtre des outils de développement, allez dans "Options de la boîte à outils". Sous la section "Boutons disponibles de la boîte à outils", cochez la case "Basculer les règles pour la page"case à cocher.
2. Prendre des captures d'écran en utilisant des sélecteurs CSS
Bien que la barre d’outils de Firefox vous permette de prendre des captures d’écran de la page entière ou de parties visibles, à mon avis, la méthode du sélecteur CSS est plus utile pour la capture. captures d'écran d'éléments individuels ainsi que pour éléments visibles au survol de la souris seulement (comme les menus).
Pour prendre des captures d’écran dans le menu, allez à> Développeur > Barre d'outils développeur (raccourci Maj + F2). Une fois que la barre d'outils apparaît au bas de la page, tapez capture d'écran --selector any_unique_css_selector et appuyez sur entrer.
Pour que cela apparaisse dans la fenêtre des outils de développement: cliquez sur "Options de la boîte à outils" et sous la section "Boutons disponibles de la boîte à outils", cochez la case "Prenez une capture d'écran pleine page " case à cocher.
3. Choisissez les couleurs des pages Web
Firefox possède un outil de sélection de couleur intégré appelé "Pipette". Pour accéder à l'outil "Pipette" par le menu, allez à> Développeur > Pipette.
Pour que cela apparaisse dans la fenêtre des outils de développement: cliquez sur "Options de la boîte à outils" et sous la rubrique "Vérification de la section" Boutons de la boîte à outils disponibles ""Prenez une couleur de la page"case à cocher.
4. Voir la mise en page en 3D
L'affichage des pages Web en 3D facilite les problèmes de mise en page. Vous serez en mesure de voir les différents éléments superposés beaucoup plus clairement en vue 3D. Pour afficher la page Web en 3D, cliquez sur le bouton de l'outil "Vue 3D"..
Pour que cela apparaisse dans la fenêtre des outils de développement, cliquez sur "Options de la boîte à outils" et sous la section "Boutons disponibles de la boîte à outils", cochez la case "Vue 3D"case à cocher.
5. Voir le style du navigateur
Les styles de navigateur se composent de deux types: le style par défaut qu'un navigateur attribue à chaque élément et les styles spécifiques au navigateur (ceux avec le préfixe du navigateur). En examinant les styles de navigateur, vous pourrez: diagnostiquer les problèmes de remplacement dans votre feuille de style et venez également à connaître les styles spécifiques existants du navigateur .
Pour accéder aux "styles de navigateur" via le menu, allez à> Développeur > Inspecteur. Cliquez ensuite sur l'onglet "Calculé" dans la partie droite et cochez la case "Styles de navigateur"..
Vous pouvez aussi ouvrir le "Inspecteur"onglet par le raccourci Ctrl + Maj + C puis en accédant à" Styles de navigateur ".
6. Désactiver JavaScript pour la session en cours
Pour garantir la compatibilité des lecteurs d’écran et des meilleures pratiques, il est toujours conseillé de coder tout site Web de telle sorte que ses fonctionnalités ne soient pas gênées dans un environnement désactivé en javascript. Pour tester de tels environnements, vous pouvez désactiver le JavaScript pour la session dans laquelle vous travaillez.
Pour désactiver JavaScript dans la session en cours, cliquez sur "Options de la boîte à outils" et sous la section "Paramètres avancés", cochez la case "Désactiver JavaScript* "case à cocher.
7. Masquer le style CSS de la page
Tout comme JavaScript, en raison de problèmes d’accessibilité, il est préférable de concevoir des sites Web tels que les pages doivent toujours être lisibles même sans styles. Pour voir à quoi la page ressemble sans style, vous pouvez les désactiver dans les outils de développement..
Pour supprimer tout style CSS (intégré, interne ou externe) appliqué à une page Web, il suffit de cliquez sur le symbole de l'œil des feuilles de style répertoriées dans l'onglet "Style Editor". Cliquez à nouveau pour revenir à la vue d'origine.
Pour accéder à "Style Editor" via le menu, allez à ☰> Développeur > Éditeur de style (raccourci: Maj + F7.
8. Aperçu de la réponse du contenu HTML à une demande
Les outils de développement de Firefox ont une option pour prévisualiser les réponses de type de contenu HTML. Cela aide le développeur à prévisualiser les redirections 302 et à vérifier si des informations sensibles ont été rendues ou non dans la réponse..
Pour accéder à "Aperçu" via le menu, allez à> Développeur > Réseau (raccourci: Ctrl + Maj + Q. Ensuite, ouvrez la page Web de votre choix ou rechargez la page en cours, cliquez sur le bouton demande souhaitée (avec réponse HTML) dans la liste des demandes et cliquez sur le bouton "Aperçu"onglet dans la section de droite.
9. Aperçu de la page Web dans différentes tailles d'écran
Pour tester la réactivité d’une page Web, utilisez le "Responsive Design View", accessible depuis ☰> Développeur > Responsive Design View ou avec le raccourci: Ctrl + Maj + M.
Pour que le bouton de l'outil "Mode de conception réactif" apparaisse, cliquez sur "Options de la boîte à outils" et sous la section "Boutons de la boîte à outils disponibles", cochez la case "Mode de conception réactif"..
10. Exécuter JavaScript sur les pages
Pour une exécution rapide de JavaScript sur n’importe quelle page Web, utilisez simplement l’outil "Scratchpad" de Firefox. Pour accéder à "Scratchpad" via le menu, allez à; ☰> Développeur > Bloc-notes ou utilisez le raccourci clavier Shift + F4.
Pour que le bouton de l'outil "Scratchpad" apparaisse dans la fenêtre des outils de développement pour une utilisation rapide: cliquez sur "Options de la boîte à outils"et sous le"Boutons disponibles de la boîte à outils"section vérifier le" Scratchpad " case à cocher.
