10 outils de développement Firefox utiles que vous devez savoir


Du Dimanche 9h à 21h30 au Vendredi 12h30

Intervention:26€/30Min - 46€/1H

Tel: 01 88 335 414 Chat EXPERT   Mon compte
10 outils de développement Firefox utiles que vous devez savoir

10 outils de développement Firefox utiles que vous devez savoir

 

Firefox étant le « navigateur du développeur » a de nombreux excellents outils pour faciliter notre travail. Vous pouvez en trouver plus dans sa boîte à outils sur la page des outils de développement de Firefox et vous pouvez également essayer leur navigateur de développeur Edition qui a plus de fonctionnalités et d’outils en cours de test.

Pour cet article, j’ai listé 10 outils utiles vous pouvez vouloir de sa boîte à outils de développeur. J’ai également démontré ce que ces outils peuvent faire avec les GIF et comment les utiliser pour une référence rapide.

Lisez aussi: 40 modules complémentaires Firefox pour une meilleure production

1. Regardez les règles horizontales et verticales

Firefox Gadget - Règle

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

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

  1. Accédez à: ?> promoteur > Outil développeur (Raccourci: changement + F2).
  2. Une fois que la barre d’outils apparaît en bas de la page, appuyez sur rulers.
  3. Pessa entrer.

Pour que cela apparaisse dans la barre d’outils du développeur:

  1. Accédez aux « Options de la boîte à outils ».
  2. Dans la section « Boutons de boîte à outils disponibles », cochez « Changer les règles de cette page« case à cocher.

2. Prenez des vues photo à l’aide des sélecteurs CSS

Gadget Firefox - capture d'écran

Bien que la barre d’outils Firefox vous permette de prendre des photos à partir de la page entière ou de parties visibles, à mon avis, la méthode de sélection CSS est plus utile pour capturer vues d’éléments individuels ainsi que pour éléments visibles dans le curseur de la souris uniquement (comme les menus).

Pour prendre des photos via le menu:

  1. Accédez à ?> promoteur > Outil développeur (raccourcichangement + F2).
  2. Une fois que la barre d’outils apparaît en bas de la page, appuyez sur screenshot --selector any_unique_css_selector.
  3. presse entrer.

Pour que cela apparaisse dans la barre d’outils du développeur:

  1. Cliquez sur « Options de la boîte à outils » et sous la section « Boutons de boîte à outils possibles ».
  2. Vérifiez-le « Obtenez une vue pleine page «  case à cocher.

3. Choisissez les couleurs des sites Web

Outil Firefox - outil de coloriage

Firefox a un sélecteur de couleurs intégré appelé « Eyedropper ».

Pour accéder à l’outil « Pipette » à partir du menu, allez sur ?> promoteur > Pipette.

Pour que cela apparaisse dans la barre d’outils du développeur: cliquez sur « Options de la boîte à outils » et sous la section « Boutons de la boîte à outils disponibles », cochez « Capture une couleur de la page« case à cocher.

4. Regardez la mise en page en 3D

Outil Firefox - vue 3D

L’affichage des mises en page en 3D aide à résoudre les problèmes de mise en page. Vous pourrez voir les différents éléments de calque beaucoup plus clairement en 3D. Pour visualiser la page en 3D, cliquez sur le bouton de la barre d’outils « Vue 3D ».

Pour que cela apparaisse dans la barre d’outils du développeur, cliquez sur la section « Options de la boîte à outils » et sous la section « Vérification des boutons de la boîte à outils disponibles »Vue 3D« case à cocher.

5. Regardez le style du navigateur

Outil Firefox - style 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 de navigateur spécifiques (ceux avec le préfixe de navigateur). En examinant les styles de navigateur, vous pourrez diagnostiquer les problèmes qui ont priorité sur votre feuille de style et aussi pour connaître tout style de navigateur existant spécifique.

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

  1. Accédez à ?> promoteur > inspecteur.
  2. Cliquez sur l’onglet « Calculé » dans la section appropriée.
  3. Cochez la case « Styles de navigateur ».

Vous pouvez également ouvrir « inspecteur« à travers le raccourci ctrl +changement + C puis accéder aux « styles de navigateur ».

6. Désactivez JavaScript pour la session en cours

Outil outil Firefox - désactiver JS

Pour les meilleures pratiques et la compatibilité du lecteur d’écran, il est toujours conseillé de coder n’importe quelle page Web de manière à ce que sa fonctionnalité ne soit pas gênée dans un environnement désactivé par JavaScript. Pour essayer de tels 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 sous la section de vérification « Paramètres avancés »Désactiver JavaScript* « case à cocher.

7. Masquez le style CSS de la page

Outil Firefox - style désactivé

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

Pour supprimer tout style CSS (interne, interne ou externe) appliqué à une page Web, il vous 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 à « l’éditeur de style » à partir du menu, accédez à go> promoteur > L’éditeur de style (Raccourci: changement + F7.

8. Pré-répondre au contenu HTML d’une demande

Outil Firefox - Réponse préliminaire

Les outils de développement de Firefox ont une option pour cela prévisualiser les réponses de type de contenu HTML. Cela aide le développeur à prévisualiser toutes les 302 redirections et à vérifier si des informations sensibles sont fournies dans la réponse.

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

  1. Accédez à ?> promoteur > réseau (Raccourci: ctrl +changement + Q.
  2. Ouvrez la page Web de votre choix ou réinitialisez la page actuelle, cliquez sur demande souhaitée (avec réponse HTML) de la liste des exigences.
  3. Cliquez sur « inspection« dans la bonne section.

9. Aperçu du site Web dans différentes tailles d’écran

Outil Firefox réactif

Pour tester la réactivité d’un site Web, utilisez la « Responsive Design View », accessible depuis ?> promoteur > Vue de conception réactive ou en raccourcis: ctrl +changement + M.

Pour faire de la barre d’outils le bouton « Design Response Mode », cliquez sur « Toolbox Options » et dans la section « Toolbox Button Available », cochez la case « Design Response Mode ».

10. Exécutez JavaScript sur la page

Outil Firefox réactif

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 à; ?> promoteur > Scratchpad ou utilisez le raccourci clavier changement + F4.

Pour faire apparaître la barre d’outils Scratchpad dans la barre d’outils développeur pour une utilisation rapide: cliquez sur « Options de la boîte à outils« et moins »Boutons de boîte à outils disponibles« consultez la section » Bloc-notes  » case à cocher.



Laisser un commentaire