Vous trouverez ci-dessous des fonctionnalités et des conseils pour utiliser les outils de développement Firefox. Certains d'entre eux sont similaires aux capacités des outils de Chrome, pour certains il n'y a pas d'analogues dans d'autres navigateurs.

Attention, sous la coupe beaucoup de gifs lourds!

Inspecteur

Recherche de sélecteur CSS

Il est très pratique à utiliser pour:

• éléments avec `z-index` sur lesquels on ne peut pas cliquer
• visuellement les mêmes éléments pour lesquels vous connaissez le sélecteur

Filtre de style

Vous pouvez filtrer les règles CSS par n'importe quel sélecteur ou propriété.

Pour les sélecteurs, le filtre met en surbrillance les sélecteurs dans la liste des règles. Pour les propriétés, l'outil développera toutes les propriétés qui contiennent votre filtre, les mettra en surbrillance avec la couleur et masquera également les règles où il n'y a aucune propriété du filtre.

Sélecteur de couleur et pipette

Cliquez sur n'importe quel point de couleur dans l'inspecteur pour ouvrir un outil pratique.

Changer les représentations des couleurs

Maj + clic sur un point de couleur vous permet de changer la représentation des couleurs (nom / hex / hsl / rgb).

Maj + clic sur un point près du coin vous permet de changer les unités de l'angle.

Modification des courbes de Bézier des fonctions temporelles

Cliquez sur un point avec une ligne courbe à côté de la propriété de la fonction de temps pour ouvrir un éditeur pratique. Il y aura à la fois des fonctions prédéfinies et la possibilité de configurer manuellement votre version.

La console

Application CSS

console.log(“#%c%s%c%s”, “color: #bada55”, “dev”, “color: #c55”, “tricks”) 

Toutes les propriétés ne sont pas prises en charge, mais beaucoup .

Recherche historique

Appuyez sur CTRL + R sur Mac (et F9 sur Windows et Linux). Utilisez ensuite CTRL + R / CTRL + S ( F9 / SHIFT + F9 ) pour faire défiler vers l'avant / vers l'arrière. Contrairement aux flèches, les raccourcis clavier ci-dessus fonctionneront entre les sessions.

Capture d'écran d'une page ou de son élément

 :screenshot — fullpage :screenshot — selector .css-selector 

Il est beaucoup plus pratique de simplement spécifier le sélecteur que d'essayer de sélectionner avec précision la zone souhaitée avec la souris.

Changement de contexte JavaScript

 cd(iframe) 

Vous pouvez basculer vers le contexte iframe à l'aide du sélecteur à l'aide de cd () .

Tags de minuterie

 console.time(“#devtricks”) console.timeEnd(“#devtricks”) 

Démarrez la minuterie - console.time («label») ,

arrêtez-le - console.timeEnd («label») .

Débogueur JavaScript

Points d'arrêt conditionnels

Pour créer un point, cliquez avec le bouton droit sur le numéro de ligne. Le point ne sera actif que si la condition est remplie.

Recherche par nom de fonction ou numéro de ligne

La recherche par nom de fichier est CMD + P sur Mac (et CTRL + P sur Windows et Linux).

Tapez " @" dans la même entrée pour rechercher par déclaration de fonction dans le fichier.

Tapez ": " dans la même entrée pour accéder rapidement à la ligne par son numéro.

Belle sortie de code minifié

Cliquez sur l'icône {} pour voir un beau code au lieu d'un minifié.

Points d'arrêt d'URL

Le point deviendra actif lorsque vous tenterez d'accéder à l'URL et d'afficher le code responsable de son accès.

Désactiver les points d'arrêt

Les points désactivés resteront disponibles pour inclusion et utilisation future.

Réseau

Modification et transfert de requêtes HTTP

Modifiez les demandes soumises et soumettez-les à nouveau.

Filtre de requête

Le filtre de domaine est CMD + F sur Mac (ou CTRL + F sur Windows et Linux).

Si vous devez trouver toutes les requêtes sans domaine , ajoutez un tiret ( - ) devant le filtre.

Limite de vitesse

Vérifiez comment le site se chargera lorsque Internet sera lent.

Profilage chaud / froid

Cliquez sur l'icône du minuteur pour voir les performances des requêtes effectuées par le site. La page sera chargée deux fois - sans cache (émulation du premier chargement) et avec cache (émulation d'un appel répété).

Sauvegarde / chargement HAR

Nous enregistrons les demandes parfaites au format archive . Pratique à partager avec d'autres développeurs.

Conception réactive

Appareil personnalisé

Découvrez comment le site recherchera des appareils avec une résolution personnalisée.

Limite de vitesse

Nous regardons le téléchargement de la version mobile sur la vitesse Internet mobile.

Émulation de tachi

Une petite icône avec une «main» en est responsable. Émulé, y compris de longues tapas.

Changer d'agent utilisateur

N'oubliez pas d'activer l'option "Recharger la page lors du changement d'UA" dans les paramètres - gagnez du temps.

Alignement de la fenêtre gauche

Pratique si vous souhaitez placer des panneaux à droite (par exemple, pour le débogage).

Inspecteur d'entrepôt

Modification des cookies

Double-cliquez sur la cellule dont vous souhaitez modifier la valeur.

Suppression des cookies

La façon la plus simple de supprimer les cookies consiste à les sélectionner et à cliquer sur Retour arrière.

Faites attention aux options du menu contextuel. L'option «Supprimer tout pour un domaine» est très pratique, mais gardez à l' esprit que le domaine doit être précis (c'est-à-dire que la suppression des cookies pour .medium.com ne les supprimera pas pour medium.com )

Cookies de modification en temps réel

Les cookies qui viennent d'être modifiés clignotent en orange.

Instantanés statiques pour IndexedDB

Vous ne pourrez pas voir les changements dans les enregistrements IndexedDB en temps réel. Utilisez donc le bouton d'actualisation pour obtenir l'instantané de base de données le plus à jour.

Modification des colonnes de tableau affichées

Un clic droit sur l'en-tête du tableau aidera à masquer les colonnes inintéressantes.

C’est tout. J'espère que les conseils ont été utiles!