Mise en service, réseau et performance –

Au cours de la dernière décennie, les outils de développement de navigateur (DevTools) ont évolué de consoles JavaScript de base à des environnements de développement et de débogage entièrement intégrés. Il est devenu possible de modifier et d’inspecter n’importe quel aspect de votre application Web, mais peu d’entre nous allons au-delà des notions de base.

Dans cette série d’articles, nous allons explorer une gamme de fonctionnalités que vous n’avez peut-être pas envisagées. Les outils de développement de Chrome sont décrits dans la plupart des cas, mais d’autres options sont proposées pour Firefox, le cas échéant.

Raccourcis clavier

L’utilisation d’un menu pour lancer DevTools vous fait gagner de précieuses secondes! Essayez plutôt l’une de ces options:

• F12
• ctrl + shift + i
• cmd + option + j
• ou cliquez sur un élément de la page avec le bouton droit de la souris et choisissez Inspect ou Inspect Element .

Chrome fournit une aide utile en matière de raccourcis clavier. À partir de DevTools, appuyez sur F1 ou sélectionnez Settings dans le menu à trois points en haut à droite. Choisissez ensuite Raccourcis dans le menu:

Station d'accueil

Le volet Outils de développement peut être ancré à gauche, à droite ou en bas de la fenêtre du navigateur. Si vous avez besoin de plus d'espace, détachez-le dans une fenêtre séparée. Les options d'ancrage se trouvent dans le menu principal à trois points de Chrome:

et Firefox:

Paramètres [19659004] Vous pouvez accéder aux paramètres de l'outil de développement à partir du même menu ou en appuyant sur F1 . Cela vous permet de définir des options telles que les outils affichés, le thème, la taille des onglets, les unités de couleur, etc.

Lorsque vous travaillez sur une application Web, il peut être pratique de créer un raccourci sur le bureau dédié pour lancer votre navigateur, ouvrez l'URL. et lancez DevTools en une seule étape. Pour Chrome, créez une icône de bureau avec les options de ligne de commande suivantes:

 chrome --auto-open-devtools-for-tabs http: // localhost: 8000 /

où http: // localhost: 8000 / est votre URL de développement

De même pour Firefox:

 firefox -devtools -url http: // localhost: 8000 /

(le nom du fichier exécutable peut différer d'un système à l'autre.)

Aller incognito pendant le développement

Le mode privé / incognito ne conserve pas les données telles que les cookies et le stockage local après la fermeture du navigateur. Ce mode est idéal pour tester les applications Web progressives (PWA) et les systèmes de connexion.

Vous pouvez démarrer les navigateurs en mode navigation privée ou en ajoutant - incognito à Chrome ou -private sur la ligne de commande de Firefox.

Palette de commandes

Chrome DevTools propose une palette de commandes semblable à celle d'un éditeur. Appuyez sur ctrl + shift + p :

Il fournit un accès rapide à la plupart des fonctions et des fichiers sources (appuyez sur la touche arrière pour supprimer le . ).

Sortie sur la console

La console est utile quel que soit le panneau DevTool que vous utilisez. Appuyez sur Esc pour afficher et masquer une fenêtre de console dans le volet inférieur

Rechercher les couleurs de la page

La plupart des navigateurs affichent un sélecteur de couleur lorsque vous cliquez sur une propriété de couleur CSS. Chrome affiche également les couleurs utilisées dans la page en bas du panneau:

Vous pouvez cliquer sur le panneau pour afficher d'autres couleurs.

Accessibilité du contraste des couleurs [19659004] Le sélecteur de couleurs affiche également le rapport de contraste qui indique la différence visuelle entre le texte de premier plan et la couleur d'arrière-plan. Cliquez sur le rapport pour voir comment il correspond aux normes d'accessibilité AA et AAA qui garantissent que le texte peut être lu par la plupart des gens:

N'importe quelle couleur en dessous de la ligne sur la couleur. passera les recommandations de contraste AA.

Captures d'écran de capture

Dans la palette de commandes de Chrome ( ctrl + Maj + p ), saisissez 'screenshot', puis choisissez une option pour capturer la fenêtre d'affichage actuelle, la page entière, ou l'élément actuellement actif. Le fichier sera enregistré dans le dossier de téléchargement. (Chrome 74+ permet également la capture de zone.)

Firefox fournit le système Prendre une capture d'écran disponible dans la plupart des menus. De plus, vous pouvez cliquer avec le bouton droit de la souris sur n’importe quel élément de la vue DOM et sélectionner le nœud de capture d’écran .

Rechercher les CSS et JavaScript inutilisés

Le nouveau panneau Couverture de Chrome vous permet de localiser rapidement le code inutilisé. Sélectionnez Couverture dans le sous-menu DevTools Plus d'outils puis cliquez sur le bouton d'enregistrement et parcourez votre application. Cliquez ensuite sur n’importe quel fichier pour en ouvrir la source:

Le code non utilisé est mis en évidence en rouge dans le chéneau avec le numéro de ligne.

Notez que Chrome ne semble pas se rappeler avoir utilisé / Code inutilisé lorsque vous accédez à une nouvelle page, mais je pense que cela sera fourni dans une version ultérieure.

Désactiver le cache réseau

Vérifier Désactiver le cache dans le réseau . panneau pour charger tous les fichiers du réseau. Ceci permet de mieux évaluer le chargement des pages pour la première fois.

Vitesse du réseau d’accélération

De la même façon, il n’est pas intéressant de tester votre système avec une connexion 1 Gbps lorsque la plupart des utilisateurs accèdent en 3G. Le panneau Réseau fournit un menu déroulant En ligne dans Chrome et un menu déroulant Throttling dans Firefox qui permet d'émuler des vitesses de réseau spécifiques.

Chrome permet également d'ajouter vos propres profils de régulation.

Réorganisation des réponses du réseau

Par défaut, le panneau Réseau affiche un tableau des demandes. et les réponses dans l'ordre de téléchargement. Cependant, vous pouvez cliquer sur n'importe quel en-tête de tableau pour le réorganiser par nom, statut, type, taille, temps de réponse, etc.

Filtrer les demandes incomplètes

Pour découvrir les demandes HTTP incomplètes ou ne répondant pas, accédez au réseau . Le panneau et entrez est: exécuter dans la zone Filtre .

Filtrer par taille de réponse

Dans le panneau Réseau entrez . ] plus grand que: S dans la case Filtre où S est une taille en octets ( 1000000 ), en kilo-octets ( 1000K ), ou mégaoctets ( 1M ). Les réponses supérieures à la taille choisie sont indiquées.

Pour trouver les réponses plus petites, utilisez - plus grand que: S .

Filtrer le contenu en provenance de tiers

dans le réseau . panneau, entrez -domain: *. Votredomaine dans la zone Filtre où votdomain est votre URL principale, par exemple sitepoint.com . Les réponses restantes indiquent les demandes de tiers adressées à des CDN, des suivis, des boutons de réseaux sociaux, etc. Le nombre de demandes et la taille de la charge utile sont indiqués dans la barre d'état située sous le tableau.

Bloquer les demandes réseau

Il est possible de bloquer trackers, analyses, widgets de médias sociaux ou autres requêtes au cours des tests.

Cliquez avec le bouton droit de la souris sur une requête HTTP dans le panneau Réseau de Chrome et choisissez Bloquer l'URL de la requête pour bloquer cette URL ou Bloquer le domaine de demande pour bloquer toute demande à ce domaine. Le panneau Blocage des demandes s'ouvre et vous pouvez ajouter ou supprimer d'autres adresses URL ou domaines:

Recréer des demandes Ajax

Les opérations Ajax XMLHttpRequest peuvent être examinées à droite -cliquez sur leur entrée dans la table Network puis sélectionnez une option de copie telle que cURL, fetch ou PowerShell. Cela crée une commande avec des en-têtes, un agent utilisateur, des cookies et des référents identiques qui peuvent être collés dans un éditeur ou un terminal.

Activer les substitutions de fichiers hors ligne

Chrome permet à tout fichier d'être enregistré sur votre système afin que le navigateur puisse le récupérer. à partir de l'appareil plutôt que du réseau. Cela pourrait permettre le développement hors ligne si, par exemple, vous vouliez charger ou modifier des éléments auxquels vous accédez normalement depuis un CDN.

Ouvrez le panneau Remplacements dans Sources cliquez sur +. Sélectionnez le dossier à remplacer puis le dossier approprié.

Maintenant, cliquez avec le bouton droit de la souris sur une ressource du panneau Réseau et sélectionnez . Enregistrer pour remplacement . Tout rechargement de page ultérieur accédera au fichier à partir de votre système local plutôt que sur le Web. Le fichier enregistré peut également être modifié.

Examiner le stockage

Le panneau Application sous Chrome et le panneau Stockage dans Firefox vous permettent d’examiner, de modifier et de supprimer des valeurs conservées dans cookies, stockage en mémoire cache, stockage local, stockage, sessionStorage, IndexedDB et Web SQL (le cas échéant).

Le panneau de Chrome Clear storage peut également effacer toutes les valeurs d'un domaine, ce qui peut s'avérer utile lors du développement d'une application Web progressive.

Analyseur de performances

Le nouvel analyseur de performances de Chrome est accessible à partir du menu DevTools Autres outils et fournit une analyse de l'utilisation de l'UC, de la taille de segment de mémoire JavaScript, des noeuds DOM et des écouteurs d'événement. , recalcul de style et plus. Contrairement au panneau principal Performance les graphiques sont mis à jour en temps réel – il n'est pas nécessaire d'enregistrer le profil au préalable.

Audits

Les performances de Chrome dans Chrome

. Le panneau Audits avait été initialement conçu pour évaluer les fonctionnalités de l'application Web progressive, mais il est devenu un outil polyvalent permettant d'analyser les performances, l'accessibilité, les meilleures pratiques et le référencement dans les vues mobile et de bureau.

Certains problèmes ne sont pas résolus et vous pouvez vous opposer sur certains points, mais c'est un moyen utile de faire une rapide évaluation des problèmes potentiels.

J'espère que vous avez découvert quelque chose de nouveau.

Craig est un consultant web britannique indépendant qui a créé sa première page pour IE2.0 en 1995. Depuis lors, il préconise les normes, l'accessibilité et les meilleures techniques HTML5. Il a créé des spécifications d'entreprise, des sites Web et des applications en ligne pour des entreprises et des organisations telles que le Parlement britannique, le Parlement européen, le Département de l'énergie et des changements climatiques, Microsoft, etc. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler .