Une plongée profonde dans la console Dev de Chrome –

Chrome DevTools intègre de nombreux sous-outils pour le débogage des applications Web côté client, comme l'enregistrement des profils de performances et l'inspection des animations, que vous utilisiez probablement depuis vos premiers jours d'apprentissage, principalement via la console DevTools.

Regardons quelques-uns de ces outils, en se concentrant particulièrement sur la console et les métriques de performance.

Pour accéder aux DevTools de Chrome:

• faites un clic droit n'importe où sur une page, cliquez sur Inspectez depuis le menu contextuel
• utiliser les raccourcis clavier Ctrl + Maj + I sur les systèmes Windows et Linux ou Alt + Commande + I sur macOS
• utiliser les raccourcis clavier Ctrl + Shift + J sur les systèmes Windows et Linux ou Alt + Commande + J sur macOS

Si vous écrivez souvent du code JavaScript directement dans la console, assurez-vous d'utiliser la fonctionnalité Snippets de DevTools à la place, qui est similaire à un éditeur de code et fournit des mécanismes pour écrire des extraits de code JavaScript, les exécuter dans le contexte de la page en cours et les sauvegarder pour plus tard. C'est mieux que d'écrire du code JavaScript multiligne directement dans la console.

Vous pouvez accéder à l'outil Snippets à partir du panneau Sources. Une fois ouverte, la console est empilée en dessous (si ce n'est pas le cas, appuyez simplement sur Échap) pour pouvoir écrire, exécuter votre code et voir la sortie de la console en même temps.

utilisez la console pour interagir avec n'importe quelle page Web en utilisant JavaScript. Vous pouvez interroger et modifier le DOM et interroger / sortir différents types d'informations sur les performances.

La console peut être ouverte en tant que panneau dédié plein écran ou en tant que tiroir à côté de tout autre panneau DevTools en appuyant sur Escape alors que DevTools est ouvert et a le focus

Lorsque vous travaillez avec la console du navigateur, si vous voulez entrer des expressions multilignes, vous devez utiliser Shift + Enter parce que Enter exécutera ce qui est dans la ligne d'entrée à ce moment-là

L'historique de la console

Vous pouvez effacer l'historique de la console de différentes manières:

• en tapant clear () dans la console
• en appelant la méthode console.clear () dans la console ou le code JavaScript
• en cliquant sur le cercle rouge dans le coin supérieur gauche de la console
• en appuyant sur CTRL + L dans macOS, Windows et Linu x
• en faisant un clic droit dans la console puis en appuyant sur Effacer la console .

Vous pouvez conserver le journal (en cochant la case Conserver le journal) entre les rafraîchissements ou modifications jusqu'à ce que vous effaciez la console ou fermez l'onglet.

Vous pouvez enregistrer l'historique dans la console sous forme de fichier texte en cliquant avec le bouton droit de la souris sur ] Enregistrer sous … puis en choisissant l'emplacement d'un fichier journal.

Variables de la console

Les variables que vous créez dans la console sont conservées jusqu'à actualisation de la page. faites attention lorsque vous utilisez des mots-clés tels que let ou const lors de la déclaration des variables. Exécuter le même code ou la même fonction pour la deuxième fois jettera Uncaught SyntaxError en disant que l'identifiant a déjà été déclaré. Vous pouvez utiliser l'opérateur OR ( || ) pour vérifier si la variable est déjà définie ou vous pouvez utiliser var pour déclarer des variables, car il ne se plaint pas pour les variables précédemment déclarées

Stocker en tant que fonction de variable globale

Si vous consignez des objets dans la console à partir de votre code, vous pouvez vouloir référencer ces variables depuis la console afin de pouvoir vérifier leurs valeurs. Au lieu de chercher dans les lignes de console, laissez la console faire cela pour vous. Il existe des moyens intégrés pour référencer ces objets.

Vous pouvez utiliser $ _ qui fait référence au dernier objet renvoyé dans la console.

Une autre méthode consiste à utiliser Store comme variable globale (menu contextuel) option) avec n'importe quel objet connecté à la console ou renvoyé par une fonction pour la transformer en variable globale. Votre nouvelle variable globale sera appelée temp1 . Si vous stockez plus de variables comme globales, elles seront appelées temp2 temp3 et ainsi de suite

Se connecter avec la console. log ()

Lors de la création d'applications Web complexes côté client, il est préférable d'utiliser les outils de débogage fournis par le navigateur, ce qui peut aider les développeurs à comprendre ce qui se passe au niveau du code sans interférer avec l'interface utilisateur. (c'est-à-dire, en utilisant des boîtes d'alerte et de message pour déboguer les erreurs.)

Une fois la console DevTools ouverte, essayez de consigner une simple déclaration:

 console.log ("hello console");

La ​​méthode console.log () peut prendre plusieurs paramètres et spécificateurs de format.

Vous pouvez passer des chaînes et d'autres types de variables JavaScript, séparés par des virgules, qui les concaténeront en une seule chaîne avec des espaces à la place des virgules.

 console.log ("ceci est une chaîne concaténée composée de:", 1, "et", {type: "object"});

Vous pouvez également ajouter des spécifieurs de format:

• % s : spécifier des espaces réservés aux chaînes
• % d : spécifier des espaces réservés pour les nombres
• % i : spécifier des espaces réservés pour les entiers
• % f : spécifier des espaces réservés aux flottants
• % o : spécifier des espaces réservés pour Éléments DOM
• % O : spécifiez des espaces réservés aux objets JavaScript
• % c : spécifiez des styles CSS pour formater la sortie de la console

 var op1 = 1;
var op2 = 2;
var résultat = op1 * op2;
var opération = "multiplier";

console.log ('% c% s:% d x% d =% d', 'font-size: 24px; arrière-plan: rouge; couleur: blanc;', opération, op1, op2, résultat);

Affirmation avec console.assert ()

console.assert () évalue le premier paramètre, qui est une expression booléenne, et enregistre le deuxième paramètre si l'expression échoue (évalue à false ):

 var a = 102;
var b = 101;
console.assert (a <b, "a est plus grand que b");

Comptage des exécutions avec console.count ()

console.count (label) renvoie le nombre de fois qu'il a été invoqué sur la même ligne et avec la même étiquette.

Vous pouvez voir sur la capture d'écran que, lorsque la même instruction est passée à console.count () le compte est incrémenté de 1.

Cela peut être très utile si vous avez besoin de garder une trace du nombre de fois qu'une fonction a été appelée ou à l'intérieur de boucles.

Voyons un autre exemple:

Ces réglages simples peuvent vous faire gagner beaucoup de temps lors du débogage de votre application et en essayant de repérer la sortie de certaines fonctions, en particulier si votre console est pleine d'instructions de consignation.

Marquer la sortie de la console avec console.error (), console.info () et console.warn ()

Les console.error () console.warn () et console.info () méthodes sont similaires à console.log () . Ils peuvent être utilisés pour consigner des informations dans la console du navigateur, avec quelques différences:

• console.error () marque la sortie comme une erreur sur la console et imprime la pile d'erreurs .
• console.warn () marque la sortie comme un avertissement .
• console.info () marque la sortie comme info .

Ajouter des drapeaux à la sortie de la console est très utile, car la console permet de montrer uniquement les messages avec un drapeau spécifié.

Filtrage de la console log

Utiliser les méthodes précédentes vous permet de filtrer la sortie de la console par niveau de gravité.

Vous pouvez également filtrer la sortie par texte.

Regroupement de la sortie de la console avec console.group (), console.groupCollapsed () et console.groupEnd ()

Utilisation de co nsole.group (name) ou console.groupCollapsed (nom) avec console.groupEnd () vous pouvez regrouper plusieurs messages de journal dans un groupe.

console.groupCollapsed () est identique à console.group () sauf qu'il crée un groupe replié.

Changeons notre exemple simple pour grouper les messages en groupes:

On peut aussi imbriquer des groupes:

Nous avons créé deux groupes: le groupe externe nommé updateStock (19459015), puis le groupe interne s'est effondré nommé Détails . Vous pouvez cliquer sur Détails pour plus d'informations sur la journalisation.

Enregistrer des données juxtaposables de tableau et d'objet avec console.table (), console.dir () et console.dirxml ()

The La méthode console.table () est utile pour la consignation de données ou de tableaux tabulaires:

La méthode console.dir () est utile pour la journalisation un objet en tant que données JSON:

 console.log ($ ("body"));
console.dir ($ ("body"));
console.dirxml ($ ("body"));

Profils de processeur

console.profile ([label]) démarre et console.profileEnd () termine un profil de CPU JavaScript.

Créons un profil nommé Mise à jour du stock pour la méthode updateStock () :

 function updateStock (item, newQuantity) {
    console.profile ("Stock de mise à jour");
    // le corps de la méthode
    console.profileEnd ("updateStock Time");
}

Vous pouvez utiliser le panneau JavaScript Profiler pour trouver votre profil créé, ce qui vous permet de voir combien de temps la fonction prend pour s'exécuter dans chaque exécution.

Mesurer l'heure d'exécution avec console.time () et console.timeEnd ()

Vous pouvez utiliser la console console.time (label) et .timeEnd (label) pour mesurer le temps d'exécution de votre code. Mesurez l'heure d'exécution de la méthode updateStock () dans notre exemple simple:

 function updateStock (item, newQuantity) {
    console.time ("updateStock Time");
    // le corps de la méthode
    console.timeEnd ("updateStock Time");
}

Obtention de la trace de pile pour les fonctions JavaScript

En utilisant console.trace () vous pouvez obtenir la trace de pile de la fonction, où elle s'appelle,

La pile d'appel complète de la fonction est affichée sur la console avec les noms de fichiers et les numéros de ligne sur lesquels vous pouvez cliquer pour naviguer jusqu'à la ligne correspondante dans la source. [19659003] console.trace () peut aussi être utilisé avec l'outil DevTools Snippets

Suivi des événements depuis la console en utilisant monitorEvents ()

You peut surveiller les événements DOM à partir de la console avec la méthode monitorEvents qui prend un objet à surveiller en tant que premier paramètre et un tableau d'événements à écouter en tant que second paramètre. Par exemple, surveillons le site Web de Google pour les événements scroll mousedown mouseup et mouseover :

 monitorEvents (document.body , ["scroll"]);
monitorEvents ($$ ('img') [2]["mouseover","mousedown", "mouseup"]); // surveille l'image du logo

Interrogation du DOM depuis la console

La console DevTools dispose d'une méthode qui vous permet d'interroger le document HTML actuel à l'aide de sélecteurs CSS. La méthode peut être utilisée en tapant deux signes dollar $$ (sélecteur) et elle retourne un tableau pour tous les sélecteurs.

Voici quelques exemples de ce que vous pouvez faire avec $$ ( ) :

 $$ ('p') // affiche un tableau de tous les éléments 

$$ ('.cls') // affiche un tableau de tous les éléments avec la classe '.cls'
$$ ('# id') // affiche l'élément avec l'identifiant '#id'

Même si le résultat est seulement un, la méthode query retourne un tableau, donc vous devez utiliser quelque chose comme array [0] pour accéder au résultat.

Veuillez noter que vous pouvez aussi utiliser le JavaScript standard API pour interroger le document HTML actuel à partir de la console, tel que document.querySelector () ou document.getElementsByClass () etc.

Référence à un élément sélectionné

Si vous Si vous travaillez avec le panneau DevTools Elements et que vous avez sélectionné un élément DOM, vous pouvez facilement y faire référence dans le panneau de la console sans avoir à le rechercher.

Lorsque vous sélectionnez l'élément, vous pouvez voir que Chrome ajoute == $ 0 qui dit que vous pouvez utiliser $ 0 pour référencer cet élément depuis la console.

Désactivation / nettoyage Sortie console en production

L'utilisation des différentes API de console en développement est extrêmement utile, mais Vous ne voulez peut-être pas que toutes ces informations de journalisation soient présentes dans la production, vous pouvez donc utiliser des outils pour nettoyer le code de production ou désactiver l'API Console avec ce code simple:

 (function () {
    var methods = [];
    var noop = () => {};

    Object.keys (window.console) .forEach (clé => {

        methods.push (clé);

    });
    console.log (méthodes);
    var longueur = methods.length;

    var m;
    while (longueur--) {
        m = méthodes [length];
        window.console [m] = noop;
    }
} ());

Vous pouvez également utiliser les outils suivants pour nettoyer le code de production:

• Webpack-strip : un module Webpack créé par Yahoo! les développeurs qui dépouillent les fonctions personnalisées (telles que les fonctions de débogage ou de console) de votre code
• gulp-strip-debug : un module pour GulpJS pour supprimer les fonctions personnalisées de votre code.
• grunt-strip-debug : un module pour GruntJS qui supprime les fonctions personnalisées

Le panneau Console est spécialement conçu pour le débogage du code JavaScript. Passons maintenant aux outils conçus pour profiler et identifier les problèmes de performance ou les domaines d'optimisation possibles.

Le panneau Performance est conçu pour enregistrer à la fois les performances d'exécution et de temps d'exécution des applications Web pour trouver les goulots d'étranglement. Il peut être utilisé pour mesurer des choses telles que l'endroit où votre code passe le plus clair de son temps. Les informations peuvent ensuite être utilisées pour optimiser davantage les domaines problématiques ayant un impact sur les performances afin de réduire le blocage de l'interface utilisateur et d'optimiser la réactivité de l'interface utilisateur.

Il est à noter que le panneau Performance est nouveau dans Chrome. Il combine l'ancien scénario et le profileur de CPU JavaScript, qui existe toujours mais est caché sous Autres outils – une étape avant qu'il ne soit supprimé des futures versions de Chrome.

L'onglet Performances peut soit profiler

Vous pouvez enregistrer un profil pour les performances d'exécution en cliquant sur le bouton d'enregistrement (le point noir) ou appuyez sur CTRL + E :

Pour les performances de chargement, vous devez utiliser le second bouton ou appuyer sur CTRL + Maj + E qui recharge la page en cours et démarre un nouvel enregistrement. 19659003] Pour une démo au profil, vous pouvez utiliser l'exemple jank fourni par Google. Vous pouvez en lire plus sur le travail avec cette démo ici .

Cette démo est conçue pour des tests. Vous pouvez ralentir les animations en ajoutant plus de carrés ou les accélérer en supprimant les carrés. Vous pouvez également appuyer sur le bouton Optimiser pour tester le code optimisé de cette démo.

Lors du profilage des performances d'une application, assurez-vous d'utiliser Chrome en mode navigation privée afin de pouvoir empêcher d'autres onglets ouverts. en particulier les extensions installées sur votre installation Chrome – d'interférer avec le profilage de votre application.

Restriction réseau

L'onglet Performance vous permet d'étrangler le réseau lors du profilage de votre application pour simuler différentes conditions réseau

Vous pouvez choisir entre différentes conditions de réseau telles que Online, Offline, Fast 3G et Slow 3G.

Vous pouvez également ajouter votre condition personnalisée pour mieux cibler les conditions de votre base d'utilisateurs:

Simulation de l'unité centrale mobile

La régulation de l'unité centrale vous permet de simuler la faible puissance du processeur des périphériques mobiles.

Vous pouvez choisir pas d'étranglement 4x ralentissement ou 6x ralentissement .

Prise de captures d'écran pendant l'enregistrement

Vous pouvez prendre des captures d'écran de chaque image en cochant la case Screenshots . Les captures d'écran vous aideront à visualiser l'état de l'interface utilisateur de votre application pendant le profilage. Ils sont particulièrement utiles lorsque vous travaillez avec des animations.

Analyse du rapport de performances

Avant de pouvoir optimiser les performances de votre application, vous devez la profiler, pour deux raisons: premièrement, pour mesurer la performance; ensuite, déterminer les zones où des optimisations possibles peuvent avoir lieu. Une fois que vous avez généré un rapport de performance, vous pouvez lire les significations des différents diagrammes et comment utiliser les autres sous-outils

Zoomer ou sélectionner une plage de temps

DevTools vous permet de zoomer sur différents graphiques et zones du rapport de l'onglet Performance. Vous pouvez vous concentrer sur une partie du temps, ce qui vous aidera à comprendre clairement ce qui se passe au niveau de quelques millisecondes.

Vous pouvez simplement utiliser votre souris pour cliquer sur la zone qui inclut les diagrammes FPS, CPU et réseau. Lorsque les poignées apparaissent, vous pouvez en faire glisser une ou les deux pour personnaliser la portion sélectionnée

Lorsque vous sélectionnez une portion, tous les graphiques et sections seront mis à jour pour afficher uniquement les informations sur les images et les opérations effectuées à l'heure sélectionnée

« />

Images par seconde (FPS)

Wikipedia définit FPS comme:

La fréquence d'image (exprimée en images par seconde ou fps) est la fréquence (taux ) à laquelle des images consécutives appelées images sont affichées dans un affichage animé. Le terme s'applique également aux caméras vidéo et film, à l'infographie et aux systèmes de capture de mouvement. La fréquence d'images peut également être appelée la fréquence d'image, et être exprimée en hertz.

De la définition, vous pouvez voir que la fréquence d'images est un concept lié au tournage et à l'infographie. dans les outils de performance modernes comme Chrome DevTools pour mesurer la réactivité de la page aux interactions de l'utilisateur.

Pour construire des applications performantes, vous devez cibler 60fps . Voici une vidéo de développeurs Google expliquant pourquoi le taux 60fps est important:

Vous pouvez accéder à un utilitaire pratique dans DevTools (accessible depuis Plus d'outils -> onglet Rendu) affiche une visualisation en temps réel de votre page FPS au fil du temps

Le graphique FPS

Le graphique FPS affiche la fréquence d'images par seconde pendant la durée du processus de profilage.

Comme l'a souligné par Google la ligne rouge du graphique FPS indique que la fréquence d'images est si faible qu'elle nuit à l'utilisateur

Voici une autre capture d'écran du code optimisé sans barres rouges:

Le tableau FPS peut vous aider à détecter les problèmes avant vous pouvez plonger en utilisant les autres sous-outils.

Cadres

Wikipedia définit les cadres l Ike so:

Un cadre clé dans l'animation et le cinéma est un dessin qui définit les points de départ et de fin de toute transition en douceur. Les dessins sont appelés "cadres" parce que leur position dans le temps est mesurée dans des cadres sur une bande de film. Une séquence d'images clés définit le mouvement que le spectateur verra, tandis que la position des images clés sur le film, la vidéo ou l'animation définit le moment du mouvement. Parce que seulement deux ou trois images clés en l'espace d'une seconde ne créent pas l'illusion du mouvement, les images restantes sont remplies d'inbetweens.

La section Images, située juste en dessous de la zone des graphiques, contient des boîtes vertes représentant des images. Une fois que vous déplacez votre souris sur un cadre particulier, DevTools vous montre deux détails importants: le taux FPS, et le temps nécessaire à toutes les opérations impliquées pour rendre cette image.

Si vous cliquez sur le cadre, le résumé, Les onglets Bottom-Up, Call Tree et Event Log ne vous montreront que les détails de cette image particulière

La carte CPU

La carte CPU montre l'activité de la CPU pendant profilage. Il est situé sous le tableau FPS

Les couleurs correspondent à différentes activités dans l'onglet Résumé. Si vous constatez que la carte CPU est pleine de couleurs, cela signifie que le processeur a été mis hors tension pendant de longues périodes.

La section Réseau et réseau

La carte réseau affiche les requêtes réseau durant la période de profilage. Il est particulièrement utile pour le profilage du temps de chargement à côté de la section Réseau qui affiche les demandes de chargement

Lorsque vous déplacez votre souris sur une requête, elle affiche le temps de chargement. 19659003] Lorsque vous cliquez sur une requête particulière, tous les autres sous-outils sont mis à jour pour inclure les opérations qui se produisent uniquement pendant la requête.

Différentes couleurs représentent différents types de ressources – JavaScipt, CSS, images, etc. Les ressources qui ont pris plus de temps à charger ont des barres plus longues. La partie la plus claire de chaque barre représente le Time to First Byte ou TTFB . La partie la plus sombre représente le Temps de transfert .

Onglet Résumé

Nous avons profilé l'application pour une période de 5,75s (ou 5753ms ). Lorsqu'il n'y a pas de portion temporelle sélectionnée – dans la zone de synthèse, où FPS et d'autres diagrammes existent – la plage pointe sur toute la période de profilage. Il montre une répartition colorée des activités que le navigateur effectue. Nous pouvons tirer un tas de conclusions de cette ventilation: sur 5753 ms 3848.3ms (le plus de temps) est passé en rendu, et pour 95.7ms le fil était inactif.

Vous pouvez optimiser les performances de cette application en essayant de réduire le temps de rendu.

Lorsqu'un événement ou un appel de fonction est sélectionné dans la zone principale, l'onglet Résumé affiche uniquement des informations sur cet événement / appel.

L'onglet récapitulatif fournit des informations de minutage détaillées, c'est-à-dire où le navigateur a passé son temps. Avant de pouvoir prendre des mesures pour optimiser votre code, vous devez obtenir des informations sur l'endroit où vous devez agir. Pour cela, vous pouvez utiliser les autres outils (onglet Arbre d'appel, onglet Bas-vers le haut et vues tabulaires du journal des événements) sous l'onglet Performances.

• L'onglet Bottom-Up : Cet onglet affiche les activités agrégées, d'une perspective ascendante, qui ont pris le plus de temps pendant une plage de temps sélectionnée ou pendant tout le temps de profilage si aucune plage n'est sélectionné.

• L'onglet Arbre d'appel : affiche les activités avec leurs piles d'appels pendant l'heure de profilage (sélectionnée).

• L'onglet Journal des événements affiche les événements, dans l'ordre dans lequel ils sont exécutés, au moment du profilage ou pendant une période sélectionnée.

La section principale

Graphes / diagrammes de flamme

Brendan Gregg un noyau et un ingénieur de performance qui a créé plusieurs types de visualisation pour l'analyse de performance. graphes comme:

Les graphiques de flamme sont une visualisation de logiciels profilés, permettant d'identifier rapidement et avec précision les chemins de code les plus fréquents. Les graphes de flammes sont une visualisation des traces de pile échantillonnées, ce qui permet d'identifier rapidement les chemins de code chauds.

Vous pouvez également lire son article détaillé sur Graphes de flammes

Source de l'image

La section Principale de l'onglet Performances affiche un diagramme de flammes des activités sur le fil principal.

Le graphique de la flamme affiche le l'état de la pile JavaScript de votre code (avec des informations détaillées sur les fonctions et les événements qui ont été appelés) à l'échelle de la milliseconde, pendant la période de temps du processus de profilage de performance

] profondeur de la pile d'appel et l'axe des x indique l'heure d'enregistrement . Chaque case (ou barre zoomée) est une trame de pile pour un événement ou un appel de fonction. La largeur de la boîte représente combien de temps l'opération a pris

La commande de gauche à droite n'est pas importante (les piles sont triées par ordre alphabétique). Les barres plus larges indiquent des temps plus longs, vous devez donc vous concentrer sur celles pour optimiser les performances de votre code. Le triangle rouge en haut à droite de chaque boîte (représentant un appel de fonction ou un événement déclenché) indique que quelque chose ne va pas dans l'opération. Les couleurs dans les différents tableaux de performance correspondent aux couleurs de la section Main.

Tout cela remplace l'ancien [JavaScript9019] JavaScript CPU Profiler .

Source de l'image

L'onglet Bottom-Up remplace la vue lourde (Bottom Up) de l'ancien profileur CPU. ]

Source d'image

La vue arborescente (en haut) dans l'ancien profileur de CPU peut être remplacée par l'appel Onglet Arbre

Source Image

L'onglet Audits

L'outil Audits peut être utilisé pour vous identifier et vous guider dans la résolution de problèmes courants affecter la performance de votre application Web, l'accessibilité et l'expérience utilisateur. Il comporte de nombreux audits et meilleures pratiques et attribue à votre application une note calculée en fonction du nombre de vérifications que vous avez passées et des meilleures pratiques que vous avez suivies (p. Ex., Toutes les vérifications n'ont pas la même contribution dans le résultat final ). Le rapport d'audit final répertorie tous les audits dans deux catégories (réussies et échouées) et affiche des conseils / directives avec des liens vers des articles de blog Google Web Developers externes sur la manière de passer un audit spécifique.

Accès aux audits et audit

peut accéder aux audits en ouvrant DevTools, puis en activant son onglet en cliquant dessus

Ensuite, vous pouvez effectuer un audit en déclenchant le bouton bleu "Effectuer un audit …" au milieu, puis en sélectionnant la catégorie des audits à effectuer ( ou tous en cliquant sur Exécuter l'audit .

• Progressive Web App: exécuter des audits pour tester si la page répond aux standards des applications web progressives
• Performance: exécuter des audits de performance
• Meilleures pratiques: effectuer des audits pour tester si la page suit les meilleures pratiques pour le développement web moderne
• Accessibilité: effectuer des audits pour tester si la page peut être utilisée par les personnes handicapées et déficientes.

Lighthouse met en place DevTools obile device, exécute une série de tests sur la page, puis affiche les résultats dans le panneau Audits. Vous pouvez ensuite visualiser le rapport ou le télécharger

Source d'image

Veuillez noter que les vérifications sont effectuées par ] Lighthouse un outil open-source pour améliorer la qualité des applications web, que nous avons couvert plus en détail dans Progressive Web Apps: Crash Course .

Conclusion

comprendre la cause des problèmes de performances au niveau du code, vous pouvez appliquer différentes techniques JavaScript pour résoudre le goulot d'étranglement, comme requestAnimationFrame () ou l'exécution de l'opération dans son propre thread à l'aide de HTML5 Web Workers.

Dans cet article, nous avons couvert Chrome DevTools, en particulier le panneau Console et l'API ainsi que les outils liés aux performances. Vous pouvez trouver les différents extraits utilisés ci-dessus dans ce repo .

Ahmed est un entrepreneur Web, développeur, marketing numérique et 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 son écriture 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)