10 outils de développement Firefox utiles que vous devriez connaître Conseils 2021

Vérifiez 10 outils de développement Firefox utiles que vous devriez connaître

Firefox, qui est le « navigateur du développeur », dispose de nombreux outils formidables pour nous aider à rendre notre travail plus facile. Vous pouvez en savoir plus sur leur collection d’outils sur la page Web Firefox Developer Tools, et vous pouvez également essayer leur navigateur Developer Edition, qui possède plus de fonctionnalités et d’outils en cours de test.

Pour ce post, j’ai listé 10 outils utiles que vous aimez 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. Afficher les règles horizontales et verticales

Firefox a un outil de règles qui affiche les règles horizontales et verticales avec les unités de pixel dans la page. L’outil est utile pour organiser vos éléments sur la page.

Pour accéder aux règles via le menu :

1. Aller à : ☰> Développeur > Barre d’outils du développeur (raccourci : Maj + F2).
2. Une fois que la barre d’outils apparaît en bas de la page, saisissez les règles.
3. pisse Payer en.

Pour que cela apparaisse dans la fenêtre des outils de développement :

1. Allez dans « Options de la boîte à outils ».
2. Dans la section “Boutons de la boîte à outils disponibles”, cochez la case “Basculer les règles pour la page« Case à cocher.

2. Prenez des captures d’écran avec 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 des parties visibles, à mon avis la méthode du sélecteur CSS est plus utile pour capturer captures d’écran d’éléments individuels ainsi que pour éléments visibles au survol uniquement (sous forme de menus).

Pour prendre des captures d’écran via le menu :

1. Aller à ☰> Développeur > Barre d’outils du développeur (raccourci Maj + F2).
2. Une fois que la barre d’outils apparaît en bas de la page, tapez screenshot –selector any_unique_css_selector.
3. presse Enterokay.

Pour que cela apparaisse dans la fenêtre des outils de développement :

1. Cliquez sur « Options de la boîte à outils » et sur la section « Boutons de la boîte à outils disponibles ».
2. Vérifier “Prenez une capture d’écran pleine page “ boîte.

3. Choisissez les couleurs des pages Web

Firefox dispose d’un outil de sélection de couleurs intégré appelé « Eyedropper ».

Pour accéder à l’outil « Pipette » via le menu, allez dans ☰> Développeur > Compte-gouttes.

Pour le faire apparaître dans la fenêtre des outils de développement : cliquez sur « Options de la boîte à outils » et dans la section « Boutons de la boîte à outils disponibles » cochez «Prenez une couleur de la page« Case à cocher.

4. Visualisez la mise en page en 3D

L’affichage de pages Web en 3D aide à résoudre les problèmes de conception. Vous pourrez voir les différents éléments superposés beaucoup plus clairement dans la vue 3D. Pour afficher la page Web en 3D, cliquez sur le bouton de l’outil « Vue 3D ».

Pour le faire apparaître dans la fenêtre des outils de développement, cliquez sur « Options de la boîte à outils » et dans la section « Boutons de la boîte à outils disponibles », cochez la case «vue 3D« Case à cocher.

5. Afficher le style du navigateur

Les styles de navigateur se composent de deux types : le style par défaut qui attribue un navigateur à chaque élément et les styles spécifiques au navigateur (ceux avec le préfixe de navigateur). Si vous jetez un œil aux styles de navigateur, vous pouvez diagnostiquer tout problème de remplacement dans votre feuille de style et aussi connaître les styles spécifiques du navigateur existant.

Pour accéder aux « styles de navigateur » via le menu :

1. Aller à ☰> Développeur > Inspecteur.
2. Cliquez sur l’onglet “Calculé” dans la section de droite.
3. Cochez la case « Styles de navigateur ».

Vous pouvez également ouvrir le “Inspecteur« Via le raccourci Ctrl + Shift + C puis accédez à « Styles de navigateur ».

6. Désactiver JavaScript pour la session en cours

Pour les meilleures pratiques et la compatibilité des lecteurs d’écran, il est toujours recommandé de coder tout site Web de manière à ce que sa fonctionnalité ne soit pas entravée dans un environnement non JavaScript. Pour tester ces environnements, vous pouvez désactiver JavaScript pour la session sur laquelle vous travaillez.

Pour désactiver JavaScript pour la session en cours, cliquez sur « Options de la boîte à outils » et dans la section « Paramètres avancés » cochez la case «Désactiver JavaScript* « Case à cocher.

7. Masquer le style CSS de la page

Comme JavaScript, en raison de problèmes d’accessibilité, il est préférable de concevoir des sites Web de telle sorte que les pages doivent être lisibles même sans styles. Pour voir à quoi ressemble la page sans aucun style, vous pouvez les désactiver dans les outils de développement.

Pour supprimer tout style CSS (en ligne, interne ou externe) appliqué sur une page Web, il suffit de cliquez sur le symbole de l’œil dans les feuilles de style répertoriées dans l’onglet « Éditeur de styles ». Cliquez à nouveau dessus pour revenir à la vue d’origine.

Pour accéder à « l’éditeur de style » via le menu, allez dans ☰> Développeur > Éditeur de styles (raccourci : Maj + F7.

8. Prévisualisez la réponse de 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é présentées ou non dans la réponse.

Pour accéder à « Aperçu » via le menu :

1. Aller à ☰> Développeur > Réseau (raccourci : Ctrl + Maj + Q.
2. Ouvrez la page Web de votre choix ou rechargez la page en cours, cliquez sur le bouton requête souhaitée (avec réponse HTML) de la liste des demandes.
3. Clique sur le “Avance« Dans la bonne section.

9. Aperçu de la page Web dans différentes tailles d’écran

Pour tester la réactivité d’une page Web, utilisez la « Vue de conception réactive », accessible via ☰> Développeur > Vue de mise en page réactive ou avec le raccourci : Ctrl + Shift + M.

Pour afficher le bouton de l’outil “Mode de conception adaptative”, 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”. adaptable”.

10. Exécutez JavaScript sur les pages

Pour des exécutions JavaScript rapides sur n’importe quelle page Web, utilisez simplement l’outil « Notepad » de Firefox. Pour accéder au « Bloc-notes » via le menu, allez à ; > Développeur > bloc-notes ou utilisez le raccourci clavier Shift + F4.

Pour faire apparaître le bouton de l’outil “Bloc-notes” dans la fenêtre des outils de développement pour une utilisation rapide : cliquez sur “Options de la boîte à outils“Et plus bas”Boutons de la boîte à outils disponibles“Voir la rubrique” Bloc-notes ” boîte.

Derniers mots : 10 outils de développement Firefox utiles que vous devez connaître

j’espère que vous comprendrez cet article 10 outils de développement Firefox utiles que vous devriez connaître, si votre réponse est non, vous pouvez demander n’importe quoi via la section du forum de contact liée à cet article. Et si votre réponse est oui, partagez cet article avec votre famille et vos amis.