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.

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é. Pendant que vous lisez la page, car le contenu change constamment. Ce problème s'appelle la mise en page changement de direction. Cela se produit généralement lorsque le chargement des images et des annonces est terminé. La page n'a réservé aucun espace. pour les images et les annonces. Le navigateur doit donc déplacer tout le contenu vers le bas de l'IA générative. La solution consiste à utiliser des espaces réservés.

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

1. Ouvrez le menu Command (Commande).
2. Commencez à saisir Rendering.
3. Exécutez la commande Show Rendering (Afficher le rendu).
4. 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é en bleu.

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 des tailles de fichier pour différentes catégories, telles que des documents, des scripts, des feuilles de style, des 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 les interaction sur 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". Le délai maximal potentiel de première entrée ne tient pas compte dans le score de la catégorie "Performances".

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 méritent d'être découvertes:

• Budgets de performances : Empêcher la régression de votre site au fil du temps en spécifiant une requête et la taille des 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. Pack de piles WordPress expédiés 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 utilisent désormais leur propre thème sombre automatiquement.

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

Appuyez sur les touches Ctrl+Alt+B ou Commande+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. Points d'arrêt conditionnels.

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

Cache de préchargement dans le panneau "Network"

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

Figure 5. La colonne Taille indique que les valeurs prefetch2.html et prefetch2.css proviennent (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.

Figure 6. Dans l'ancienne version de Chrome, à gauche, le champ #color n'apparaît pas lors de l'inspection du contrairement à la nouvelle version à droite.

Notifications et messages push dans le panneau "Application"

La section "Services d'arrière-plan" du panneau "Application" est désormais compatible avec les messages push et 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 démarrez les messages push et les notifications de cette page sont enregistrés pendant trois jours, même si la page et même quand Chrome est fermé.

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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement