Cette page a été traduite par l'API Cloud Translation.

Nouveautés des outils de développement (Chrome 77)

Kayce Basques

Copier les styles de l'élément

Effectuez un clic droit sur un nœud dans l'arborescence DOM pour copier le code CSS de ce nœud DOM dans le presse-papiers.

Copier les styles.

Figure 1. Copier les styles des éléments.

Merci à Adam Argyle et à VisBug pour cette inspiration.

Visualiser les décalages de mise en page

Supposons que vous lisiez un article d'actualité sur votre site Web préféré. Lorsque vous lisez la page, vous ne cessez de reprendre le fil parce que le contenu saute. Ce problème s'appelle le décalage de mise en page. Cela se produit généralement lorsque le chargement des images et des annonces est terminé. La page n'a pas réservé d'espace pour les images et les annonces. Le navigateur doit donc déplacer tout le reste du contenu vers le bas pour libérer de l'espace. La solution consiste à utiliser des placeholders.

Les outils de développement peuvent désormais vous aider à détecter le décalage de mise en page:

Ouvrez le menu Command (Commande).
Commencez à saisir Rendering.
Exécutez la commande Show Rendering (Afficher le rendu).
Cochez la case Layout Shift Regions (Régions décalées dans la mise en page). Lorsque vous interagissez avec une page, les décalages de mise en page sont surlignés en bleu.

Un décalage de mise en page.

Figure 2. Un décalage de mise en page.

Problème Chromium n° 961846

Lighthouse 5.1 dans le panneau "Audits"

Le panneau "Audits" exécute désormais Lighthouse 5.1. Les nouveaux audits incluent:

Fournit un apple-touch-icon valide. Vérifie qu'une PWA peut être ajoutée à un écran d'accueil iOS.
Limitez le nombre de requêtes et la taille des fichiers. Indique le nombre total de requêtes réseau et les tailles de fichiers pour différentes catégories, telles que les documents, les scripts, les feuilles de style, les images, etc.
Maximum Potential First Input Delay (Délai maximal possible pour la première entrée d'entrée) Mesure le délai maximal potentiel entre l'interaction d'un utilisateur pour la première page et la réponse du navigateur à cette interaction. Notez que cette métrique remplace la métrique "Latence d'entrée estimée". La valeur "Maximum Potential First Input Delay" n'est pas prise en compte dans le score de la catégorie "Performance".

Nouvelle interface utilisateur du panneau "Audits"

Figure 3. Nouvelle interface utilisateur du panneau "Audits"

Les versions 5.1 du nœud et de la CLI de Lighthouse 5.1 proposent trois nouvelles fonctionnalités majeures qui valent le détour:

Budgets de performances : Empêchez votre site de régresser au fil du temps en spécifiant le nombre de requêtes et les tailles de fichiers que les pages ne doivent pas dépasser.
Plug-ins : Étendez Lighthouse avec vos propres audits personnalisés.
Packs de piles. Ajoutez des audits adaptés à des piles technologiques spécifiques. Le WordPress Stack Pack a été expédié en premier. Les Stack Packs React et AMP sont en cours de développement.

Synchronisation du thème de l'OS

Si vous utilisez le thème sombre de votre système d'exploitation, les outils de développement passent désormais automatiquement à leur propre thème sombre.

Raccourci clavier pour ouvrir l'éditeur de points d'arrêt

Appuyez sur les touches Ctrl+Alt+B ou Cmd+Option+B (Mac) lorsque le curseur est placé dans l'éditeur du panneau "Sources" pour ouvrir l'éditeur de points d'arrêt. Utilisez l'éditeur de points d'arrêt pour créer des points de journalisation et des points d'arrêt conditionnels.

Éditeur de points d'arrêt

Figure 4. L'éditeur de points d'arrêt

Cache de préchargement dans le panneau "Network"

La colonne Taille du panneau "Réseau" affiche désormais (prefetch cache) lorsqu'une ressource a été chargée à partir du cache de préchargement. Le préchargement est une nouvelle fonctionnalité de plate-forme Web qui permet d'accélérer les chargements de page ultérieurs. Can I use... indique qu'il est compatible avec 83,33% des navigateurs dans le monde depuis juillet 2019.

Colonne "Taille" indiquant que les ressources proviennent du cache de préchargement

Figure 5. La colonne Taille indique que prefetch2.html et prefetch2.css proviennent de (prefetch cache).

Consultez la démonstration du préchargement pour essayer.

Problème Chromium n° 935267

Propriétés privées lors de l'affichage d'objets

La console affiche désormais les champs de classe privée dans les aperçus d'objets.

Lors de l'inspection d'un objet, la console affiche désormais des champs privés tels que "#color".

Figure 6. L'ancienne version de Chrome (à gauche) n'affiche pas le champ #color lors de l'inspection de l'objet, contrairement à la nouvelle version à droite.

Notifications et messages push dans le panneau "Application"

La section "Services d'arrière-plan" du panneau "Application" prend désormais en charge les messages push et les notifications. Les messages push se produisent lorsqu'un serveur envoie des informations à un service worker. Des notifications se produisent lorsqu'un service worker ou un script de page affichent des informations à l'utilisateur.

Comme pour les fonctionnalités de récupération et de synchronisation en arrière-plan de Chrome 76, une fois que vous commencez à enregistrer, les messages push et notifications de cette page sont enregistrés pendant trois jours, même quand la page est fermée et même quand Chrome est fermé.

Nouveaux volets Notifications et Messages push

Figure 7. Nouveaux volets "Messages push" et "Notifications" du panneau "Application".

Problème Chromium n° 927726

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.