Un outils de développement Firefox Deep Dive –

Dans cet article, nous aborderons Firefox Web Developer Tools ("DevTools") – un ensemble d'outils conçus pour aider les développeurs à inspecter, déboguer, profiler et optimiser les performances des sites Web et des applications Web. Nous examinerons en particulier les outils liés aux performances, mais nous verrons également comment démarrer en utilisant DevTools en général, et en apprendre plus sur certains paramètres utiles.

Vous pouvez accéder à DevTools de différentes manières:

• cliquez sur le menu hamburger à droite de la barre d'outils de navigation, cliquez sur Web Developer puis choisissez le sous-outil que vous voulez utiliser
• utilisez des combinaisons de touches, telles que Shift + F5 (Windows et macOS) pour l'outil Performance et Ctrl + Maj + E (Windows) ou Cmd + Option + E (macOS) pour l'outil Réseau
• Cliquez avec le bouton droit n'importe où dans la page a choisir Inspecter l'élément .

Firefox DevTools ont de nombreuses options qui aident les développeurs à personnaliser leur expérience, comme l'option Activer les horodatages dans la console Web, ou à Désactiver le cache HTTP qui est utilisé pour simuler les performances de premier chargement sur toutes les pages ayant un DevT.

Vous pouvez accéder au panneau DevTools Settings de différentes façons:

Commencez par ouvrir DevTools, ensuite:

• ou cliquez sur le bouton Settings dans la barre d'outils
• pressez ] F1 pour afficher le panneau Paramètres au-dessus de tout outil actuel
• appuyez sur Ctrl + Maj + O (Windows et Linux), Cmd + Maj + O (macOS

Ici vous pouvez choisir vos outils par défaut, les boutons que vous voulez afficher dans la boîte à outils, les thèmes (dark-light-Firebug) et d'autres paramètres avancés

Lors de l'analyse des performances d'une application Web, vous devez différencier les performances au moment de l'exécution des performances d'exécution.

Les performances de chargement répondent à des questions telles que "quelles ressources prennent trop de temps à charger?" En ce qui concerne les performances d'exécution, nous devons nous concentrer sur JavaScript et CSS (animations CSS en particulier) de sorte que nous re en mesure de voir où le code passe la plupart de son temps et ce qui cause des goulots d'étranglement.

Regardons le Moniteur réseau et l'Outil Performance

Le Moniteur réseau

Le Moniteur réseau vous montre une vue tabulaire de toutes les requêtes réseau que Firefox a fait (par exemple, quand il charge une page, ou envoie des XMLHttpRequest s, récupère des requêtes d'API etc.).

Il peut aussi afficher les en-têtes HTTP, les réponses HTTP et les cookies laissez-vous chercher à travers eux. Vous pouvez également l'utiliser pour effectuer, afficher et enregistrer une analyse des performances du chargement de la page en cours.

En bref, cet outil peut être utilisé pour déterminer le temps nécessaire au navigateur pour télécharger différents éléments d'une page Web. ] Vous pouvez également utiliser cet outil pour surveiller et isoler les demandes qui ralentissent ou bloquent le chargement rapide de la page Web. Le panneau Réseau vous montre quand des événements principaux sont déclenchés ( DOMContentLoaded et load )

Demander un montage

Chaque requête de la liste de réseau comporte une colonne chronologique qui affiche les informations de synchronisation liés à la requête, comme le temps total nécessaire pour charger la ressource.

DevTools marque les événements majeurs du cycle de vie dans le rapport, comme DOMContentLoaded et la page load . Le bleu fait référence au moment où l'événement DOMContentLoaded est renvoyé; la ligne violette fait référence au moment où l'événement chargement de la page est déclenché

DOMContentLoaded vs Charger des événements

The DOMContentLoaded l'événement se déclenche dès que le document HTML est complètement chargé et analysé, sans compter les feuilles de style, images et cadres CSS

L'événement load se déclenche lorsque le document HTML et toutes les feuilles de style, images et cadres associés

Tableau des détails de la demande

Une fois que vous avez cliqué sur une demande dans la liste des demandes, vous pouvez voir un panneau de détails à droite contenant de nombreux onglets, en-têtes, paramètres, réponses, temporisations et sécurité.

Pour les performances, nous examinerons particulièrement les informations de synchronisation

Timings réseau

Dans ce volet, il existe de nombreuses métriques de synchronisation liées à chaque requête:

[19659007] Bloqué est le temps passé dans une file d'attente en attente d'une connexion réseau

L'envoi est le délai d'envoi de la requête au serveur.

La réception est le temps nécessaire pour recevoir la réponse du serveur ou (si elle est mise en cache) pour la lire depuis le cache.

Attente est la durée totale attendue par le client avant le premier octet a été reçu. Dans d'autres outils d'analyse des performances comme WebPageTest.org ou DevTools de Chrome, cela s'appelle TTFB ou Time to First Byte.

Il y a aussi résolution DNS qui est le temps nécessaire pour résoudre le nom d'hôte du serveur, et Connexion qui est le temps nécessaire pour ouvrir une connexion TCP

Comment analyser les performances de chargement

Le Moniteur réseau intègre un outil d'analyse des performances Pour analyser les performances de chargement, vous pouvez:

• cliquer sur l'icône Analyser dans la barre d'état inférieure
• recharger votre page ou faire une demande réseau pendant que votre moniteur réseau est ouvert (en fait, cela ne montre que des informations tabulaires sur les requêtes qui ne font pas une analyse des performances au moment du chargement).

[19659007] Le rapport final montre un camembert et un corresp ding table pour les ressources reçues par types: JavaScript, CSS, images et polices etc. et un résumé avec les détails suivants:

• nombre de réponses mises en cache
• total demandes
• taille
• taille transférée

La ​​page Web est testée avec un cache vide et un cache amorcé.

Première charge load

Les DevTools de Firefox vous permettent d'analyser les performances de votre application web dans deux situations différentes:

• Sans mise en cache, qui émule la première visite lorsque les assets ne sont pas encore mis en cache.
• Avec la mise en cache, qui émule les visites pour la seconde fois. Le navigateur a déjà mis en cache les actifs de l'application, éliminant ainsi de nombreux allers-retours au serveur.

Vous pouvez également utiliser le paramètre Disable Cache pour émuler le chargement initial d'une page Web lorsque les DevTools sont ouverts sur n'importe quel onglet.

Performance et réactivité JavaScript

JavaScript est unique -threaded, ce qui signifie que le navigateur exécute le code de manière synchrone, mais grâce à HTML5 Web Workers (une API standard pour le multithread JavaScript), vous pouvez également exécuter du code dans d'autres threads.

Ce thread unique est chargé d'exécuter tout le travail navigateur fait comme le rendu de mise en page, le calcul des styles et la collecte des déchets.

Aussi méthodes telles setTimeout les événements tels que cliquez sur et charger et la récupération des ressources, toutes être exécuté par le fil unique. (Il est vrai que ces tâches sont exécutées de manière asynchrone, mais l'a-synchronicité en JavaScript est différente: elle est émulée en utilisant une approche événementielle, avec une boucle d'événements et une file d'attente.)

modèle, mais les fonctions de longue durée peuvent entraîner de mauvaises performances et une mauvaise réactivité de l'interface utilisateur

L'outil Performance

L'outil Performance vous permet de découvrir les goulots d'étranglement et les problèmes de performances de vos pages Web. la réactivité (en réponse aux interactions de l'utilisateur) et les performances de votre code JavaScript.

Avec l'outil Performance, vous pouvez démarrer une analyse des performances de votre page Web ouverte sur une période de temps que vous pouvez contrôler avec les boutons de démarrage et d'arrêt. L'outil affiche ensuite un résumé, ainsi que des vues tabulaires et graphiques des opérations effectuées par le navigateur pour rendre votre page.

Vous pouvez rechercher et détecter des morceaux de code longs qui bloquent le fil unique à l'aide de l'outil Performance.

Comment utiliser l'outil Performance

Les étapes pour utiliser l'outil de performance sont assez simples:

• ouvrez votre page Web, ouvrez le panneau Performance, puis commencez à enregistrer la performance
• attendez quelques secondes, aussi assurez-vous d'interagir avec votre page pendant le profilage, puis arrêtez l'enregistrement
• recherchez des fonctions ou des événements de longue durée et faites un zoom avant sur les portions de temps où FPS est faible. Vous pouvez utiliser d'autres sous-outils pour obtenir des informations détaillées sur les actions à entreprendre.

Assurez-vous de suivre certains scénarios d'interaction utilisateur et d'interagir avec les différentes parties de l'interface utilisateur de votre application pendant le profilage. processus, particu les parties que vous voulez optimiser. Évitez également les actions inutiles: par exemple, n'interagissez pas avec les parties que vous n'essayez pas d'analyser, car elles ajouteront simplement plus de bruit aux résultats de votre rapport.

Sélection de la plage horaire

Prise en charge de DevTools par Firefox sélectionner ou rétrécir la plage de temps sur l'heure du profil. Vous pouvez cliquer sur la chronologie ou la section du tableau FPS, puis faites glisser votre souris pour sélectionner un intervalle de temps. Une fois que vous arrêtez de glisser, DevTools met à jour les autres vues et graphiques pour afficher uniquement les informations sur les événements qui se sont produits pendant cette période.

Le tableau FPS

Le tableau des fréquences d'images affiche les images par seconde pendant la durée de l'enregistrement. Lorsque l'enregistrement est en cours, ce graphique fonctionne comme un compteur FPS avec des valeurs en direct

Le graphique FPS affiche les valeurs max et min de FPS et la valeur FPS moyenne au cours du profilage. Toutes ces valeurs peuvent rapidement vous indiquer si vous avez des goulots d'étranglement au niveau des performances.

Si vous exécutez des animations, le FPS doit être de 60 fps . Regardez cette vidéo pour comprendre pourquoi cette valeur est importante:

Vous pouvez utiliser ce graphique pour repérer rapidement les écarts visuels (collapsus) et les incohérences qui dénotent de graves baisses de la fréquence d'images

Vous pouvez voir sur cette capture d'écran un tableau FPS avec effondrements:

Le tableau en cascade

Wikipedia explique une chute d'eau tableau comme:

une forme de visualisation de données qui aide à comprendre l'effet cumulatif des valeurs positives ou négatives introduites séquentiellement. La carte en cascade est également connue sous le nom de carte en briques volantes ou carte de Mario en raison de la suspension apparente de colonnes (briques) dans les airs

Source d'image ]

Dans le cas de l'outil Performance, le diagramme Waterfall affiche une ventilation des activités et des événements propres au navigateur que le navigateur exécutait, tels que:

• rendu de disposition ou disposition d'éléments (appelé aussi
• stylisation
• demandes de cadres d'animation
• repeints ou dessin de pixels
• collecte des ordures etc.

Les opérations de mise en page ou les calculs de refonte et de style coûtent cher. Voir cet article Google pour plus de détails.

Voici une capture d'écran du graphique en cascade d'un exemple d'application:

Vue en arborescence

L'arborescence affiche les fonctions JavaScript sur lesquelles le navigateur a passé la plupart de ses temps, avec des mesures importantes telles que le temps total de l'activité, le temps libre et leurs pourcentages par rapport au temps total de profilage.

Temps libre le temps pris uniquement par l'opération sans tenir compte des fonctions qu'elle appelle.

Le temps total fait référence au temps pris par l'opération et aux fonctions qu'elle appelle.

L'arbre d'appel vous indique, statistiquement, dans quelles fonctions (agrégées) votre navigateur passe la plupart du temps sur un enregistrement

Le tableau de flamme JS

Le diagramme de flamme affiche un graphique Flamme des piles d'appels JavaScript pendant la période de profilage. Les diagrammes de flamme sont un type de visualisation de performance créé par Brendan Gregg .

Un graphique de flamme permet d'identifier rapidement et avec précision la plupart des chemins de code chauds

Les barres empilées signifient que l'opération supérieure existe directement dans la CPU

Vous pouvez en savoir plus sur les diagrammes de flamme ici .

Vous pouvez utiliser les diagrammes Flame de fréquence d'images et JavaScript, les vues Waterfall et Call Tree pour savoir où vous avoir des problèmes de performance, et de distinguer les fonctions particulières qui ont besoin d'optimisation.

Le tableau de la flamme vous montre l'état de la pile d'appel des fonctions particulières à des moments particuliers de l'enregistrement.

Pour obtenir des lectures significatives, vous devez zoomer jusqu'à ce que vous sélectionniez quelques millisecondes

Codes de couleur

Les différents graphiques et sections sont codés en couleur en utilisant les mêmes couleurs pour les mêmes types d'opérations et de ressources – JavaScript, CSS, rendu, peinture, etc. [1 9659007] Vous pouvez utiliser les couleurs pour distinguer les opérations dans différentes vues, repérer rapidement le type d'opération causant des problèmes et suivre les types d'opérations lorsque vous passez d'une perspective à une autre.

Vous pouvez filtrer les activités uniques que vous souhaitez voir dans vos graphiques et vues via ce menu, où vous pouvez également voir les différentes couleurs associées aux différentes opérations.

Par exemple, si vous travaillez avec Les animations CSS, sur lesquelles vous devez vous concentrer, sont des activités telles que Recalculer le style, Appliquer les modifications de style, Mise en page et Peinture. Vous pouvez filtrer les autres activités pour moins de bruit.

Pour JavaScript, vous devez vous concentrer sur Function Call, Parse HTML et Parse XML.

Conclusion

Dans cet article, nous avons vu comment démarrer avec DevTools de Firefox et comment utiliser différents sous-outils liés aux performances. Les DevTools de Firefox sont incroyablement complets, et grâce à la récente mise à niveau des performances de Firefox, il est d'autant plus facile d'identifier avec précision les zones réellement problématiques des processus de rendu d'un site Web. Nous vous encourageons à explorer par vous-même, maintenant que vous êtes familier avec la terminologie et que vous savez ce qu'il faut rechercher.

Ahmed est un entrepreneur web, un développeur, un spécialiste du marketing numérique et un blogueur. Il écrit sur le développement de logiciels et de sites Web, des trucs pour gagner de l'argent, le référencement et plus encore. Vous pouvez trouver plus de ses écrits sur son site Techiediaries .

Le meilleur outil 2023 pour ta croissance Instagram !

Source link

Partager :

• Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
• Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)