Secrets Devtools du navigateur: démarrage, réseau et performances

Au cours de la dernière décennie, les outils de développeur de navigateur (Devtools) sont passés d'une console JavaScript de base à un environnement de développement et de débogage entièrement intégré. Tout aspect d'une application Web peut désormais être modifié et examiné, mais peu de gens se plongeront dans ses fonctionnalités avancées. Cet article explorera une gamme de fonctionnalités que vous pouvez ou non encore envisagées. La plupart du temps, nous couvrirons les Devtools de Chrome, mais le cas échéant, les alternatives de Firefox seront également affichées.

Points clés

• Les outils de développeur de navigateur (Devtools) sont devenus un environnement de développement et de débogage pleinement intégré qui permet aux utilisateurs de modifier et d'inspecter tout aspect d'une application Web. Les raccourcis clavier, les options d'accueil, les paramètres et les fonctionnalités de démarrage automatique peuvent améliorer l'efficacité des développeurs.
• Devtools fournit de nombreuses fonctionnalités de développement Web utiles, y compris la vérification de l'accessibilité au contraste des couleurs, la capture d'écran, la recherche de CSS et JavaScript inutilisés, de désactiver la mise en cache du réseau, de limiter la vitesse du réseau, de filtrer les réponses du réseau, de bloquer les demandes de réseau, de recréer des demandes AJAX, d'activer la superposition des fichiers hors ligne, Vérifiez le stockage, et plus encore.
• Devtools de Chrome fournit des moniteurs de performances et des panneaux d'audit pour l'analyse en temps réel de l'utilisation du processeur, la taille du tas JavaScript, les nœuds DOM, les écouteurs d'événements, le recalcul de style, etc. Le panneau d'audit analyse également les performances, l'accessibilité, les meilleures pratiques et le référencement dans les vues mobiles et de bureau.

raccourcis clavier

L'utilisation du menu pour démarrer Devtools perdra un temps précieux! Veuillez essayer l'une des options suivantes:

• f12
• Ctrl Shift i
• CMD Option J
• ou cliquez avec le bouton droit sur n'importe quel élément de la page et sélectionnez Vérifier ou vérifier les éléments.

Chrome fournit une aide au raccourci clavier utile. Dans Devtools, appuyez sur F1 ou Sélectionnez Paramètres dans les trois menus de points dans le coin supérieur droit. Sélectionnez ensuite "Clé de raccourci" dans le menu:

Dolocation

Le panneau Devtools peut être ancré à gauche, à droite ou en bas de la fenêtre du navigateur. Si vous avez besoin de plus d'espace, vous pouvez le décocher à une fenêtre séparée. Des options d'accueil sont disponibles dans le menu des trois points principaux de Chrome:

Options de porte dans Firefox:

Paramètres

Les paramètres Devtool sont accessibles via le même menu ou en appuyant sur F1. Cela vous permet de définir les options d'affichage pour les outils, les thèmes, les tailles d'onglet, les unités de couleur, etc.

Démarrer automatiquement Devtools

Lorsque vous travaillez sur des applications Web, il peut être plus pratique de créer un raccourci de bureau dédié pour démarrer le navigateur, d'ouvrir l'URL et de démarrer Devtools en une seule étape. Pour Chrome, utilisez les options de ligne de commande Chrome suivantes pour créer une icône de bureau:

<code>chrome --auto-open-devtools-for-tabs https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

où https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5 est votre URL de développement. Opérations similaires pour Firefox:

<code>firefox -devtools -url https://www.php.cn/link/2674cea93e3214abce13e072a2dc2ca5</code>

(Le nom de fichier exécutable peut varier d'un système à l'autre.)

Le mode invisible est utilisé pendant le développement

Le mode invisible / privé ne conserve pas de données telles que les cookies et LocalStorage après la fermeture du navigateur. Ce mode est idéal pour tester les applications Web progressives (PWAS) et les systèmes de connexion. Vous pouvez démarrer manuellement le navigateur et entrer en mode incognito, ou vous pouvez le faire en ajoutant - Incognito à la ligne de commande de Chrome ou-private à la ligne de commande de Firefox.

Panneau de commande

Chrome Devtools fournit un panneau de commande de type éditeur. Appuyez sur Ctrl Shift P:

Il offre un accès rapide à la plupart des fonctionnalités et des fichiers source (appuyez sur BackSpace pour supprimer>).

Aller à la console

La console est très utile quel que soit le panneau Devtool que vous utilisez. Appuyez sur ESC pour afficher et masquer la fenêtre de la console dans le panneau inférieur.

Trouver la couleur de la page

Lorsque vous cliquez sur n'importe quel attribut de couleur CSS, la plupart des navigateurs affichent un sélecteur de couleurs. Chrome affiche également les couleurs utilisées dans la page en bas du panneau:

Ce panneau peut être cliqué pour afficher plus de couleurs.

Fonction d'assistance au contraste des couleurs

Le sélecteur de couleurs affiche également un 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 est évalué avec les normes d'accessibilité AA et AAA qui garantissent que la plupart des gens peuvent lire le texte:

Toute couleur sur la barre de couleur qui est en dessous de cette ligne sera recommandée par un contraste AA.

Capture de capture Capture

à partir du panneau de commande de Chrome (CTRL Shift P), tapez "Captures d'écran" et sélectionnez une option pour capturer la fenêtre 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 la zone.) Firefox fournit un système de capture d'écran accessible à partir de la plupart des menus. De plus, vous pouvez cliquer avec le bouton droit sur n'importe quel élément dans la vue DOM et sélectionner le nœud de capture d'écran.

Trouver des CS et javascript inutilisés

Le nouveau panneau de couverture de Chrome vous permet de trouver rapidement du code inutilisé. Sélectionnez "Couverture" dans le sous-menu Devtools More Tools, puis cliquez sur le bouton d'enregistrement et parcourez dans l'application. Puis cliquez sur n'importe quel fichier pour ouvrir son code source:

Le code inutilisé est mis en surbrillance dans la machine à sous en rouge dans la ligne. Notez que Chrome ne semble pas se souvenir du code utilisé / inutilisé lorsque vous accédez à une nouvelle page, mais je m'attends à ce que cela soit disponible dans une future version.

Désactiver le cache réseau

Sélectionnez Désactiver le cache dans le panneau réseau pour charger tous les fichiers du réseau. Cela offre une meilleure évaluation du chargement de la première page.

limiter la vitesse du réseau

De même, il est peu logique de tester un système connecté de 1 Gbit / s lorsque la plupart des utilisateurs y accèdent plus de 3G. Le panneau réseau fournit un menu déroulant en ligne dans Chrome et un menu déroulant Limit dans Firefox, vous permettant de simuler des vitesses de réseau spécifiques.

Chrome fournit également une fonctionnalité pour ajouter votre propre profil de restriction.

Réorganiser les réponses du réseau

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

Filtre les demandes incomplètes

Pour trouver des demandes HTTP incomplètes ou insensibles, visitez le panneau réseau et entrez est: exécution dans la zone de filtre.

Filtre par taille de réponse

Dans le panneau réseau, entrez plus grand que: S dans la boîte de filtre, où S est en octets (1000000), les kilo-great (1000K) ou les mégaoctets (1m). Les réponses supérieures à la taille sélectionnée seront affichées. Pour trouver une réponse plus petite, utilisez -lager-Than: S.

Filtre Contenu tiers

Dans le panneau réseau, entrez -domain: *. Votre Domaine dans la zone de filtre, où votre Domaine est votre URL principale, telle que SitePoint.com. Les réponses restantes montrent des demandes de tiers pour les CDN, les trackers, les boutons de médias sociaux, etc. Le nombre de demandes et tailles de charge utile est affiché dans la barre d'état sous le tableau.

Bloquer les demandes du réseau

Pendant les tests, les trackers, l'analyse, les widgets de médias sociaux ou toute autre demande peuvent être bloqués. Cliquez avec le bouton droit sur n'importe quelle demande HTTP dans le panneau réseau de Chrome et sélectionnez URL de la demande de bloc pour bloquer l'URL, ou sélectionnez le domaine de la demande de bloc pour bloquer toutes les demandes du domaine. Le panneau de blocage de demande s'ouvre où vous pouvez ajouter ou supprimer des URL ou des domaines supplémentaires:

Recréer la demande AJAX

L'opération AJAX XMLHTTPREQuest peut être vérifiée en cliquant avec le bouton droit sur une entrée sur la table réseau et en sélectionnant une option de copie telle que Curl, Fetch ou PowerShell. Cela crée une commande avec le même en-tête, agent utilisateur, cookies et sources de références qui peuvent être collées dans l'éditeur ou le terminal.

Activer l'écrasement des fichiers hors ligne

Chrome permet d'enregistrer n'importe quel fichier à votre système afin que le navigateur puisse obtenir le fichier de l'appareil plutôt que le réseau. Par exemple, si vous souhaitez charger ou modifier des actifs qui sont généralement accessibles à partir d'un CDN, cela peut permettre un développement hors ligne. Ouvrez le panneau de superposition dans Source, cliquez sur Sélectionner un dossier de superposition et sélectionnez un dossier approprié.

Maintenant, cliquez avec le bouton droit sur n'importe quelle ressource dans le panneau réseau et sélectionnez Enregistrer pour l'écrasement. Tout rechargement de page ultérieure accédera au fichier à partir du système local au lieu du Web. Les fichiers enregistrés peuvent également être modifiés.

Vérifiez le stockage

Le panneau Applications dans Chrome et le panneau de stockage dans Firefox vous permettent de vérifier, de modifier et de supprimer les valeurs enregistrées dans les cookies, le stockage de cache, le storage local, la sessionstorage, l'indexéddb et le web sql (si pris en charge). Le panneau de stockage clair de Chrome efface également toutes les valeurs du domaine, ce qui est utile lors du développement d'applications Web progressives.

Moniteur de performance

Le nouveau moniteur de performances de Chrome est accessible à partir du menu Devtools More Tools et fournit une analyse de l'utilisation du processeur, de la taille du tas JavaScript, des nœuds DOM, des écouteurs d'événements, du recalcul de style, etc. Contrairement au panneau de performances principal, les graphiques sont mis à jour en temps réel - pas besoin d'enregistrer d'abord le fichier de configuration.

Audit

Le panneau d'audit

Chrome a été initialement conçu pour évaluer les capacités des applications Web progressives, mais l'outil est devenu un outil commun pour analyser les performances, l'accessibilité, les meilleures pratiques et le référencement dans les vues mobiles et de bureau.

Il ne trouvera pas tous les problèmes, vous n'êtes peut-être pas d'accord avec certains points, mais c'est un moyen utile d'évaluer rapidement les problèmes potentiels. J'espère que vous avez découvert quelque chose de nouveau. D'autres secrets Devtool arrivent bientôt ...

(La partie FAQ du texte d'origine doit être incluse ici. En raison de la durée de l'article, il sera omis ici. La partie FAQ peut être régénérée selon les besoins)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!