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

Kayce Basques

Copier les styles d'un élément

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

Figure 1. Copiez les styles d'éléments.

Merci à Adam Argyle et VisBug pour l'inspiration.

Visualiser les décalages de mise en page

Imaginons que vous lisiez un article d'actualités sur votre site Web préféré. Lorsque vous lisez la page, vous perdez constamment le fil, car le contenu saute. Ce problème est appelé "décalage de la mise en page". Cela se produit généralement lorsque les images et les annonces ont fini de se charger. La page n'a réservé aucun espace pour les images et les annonces. Le navigateur doit donc déplacer tout le reste du contenu vers le bas pour leur faire de la place. La solution consiste à utiliser des espaces réservés.

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

1. Ouvrez le menu Command (Commande).
2. Commencez à saisir Rendering.
3. Exécutez la commande Afficher le rendu.
4. Cochez la case Zones déplacées dans la mise en page. Lorsque vous interagissez avec une page, les décalages de mise en page sont mis en évidence en bleu.

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

Problème Chromium 961846

Lighthouse 5.1 dans le panneau "Audits"

Le panneau "Audits" exécute désormais Lighthouse 5.1. Voici les nouveaux audits :

• La valeur de l'attribut apple-touch-icon est valide. Vérifie qu'une PWA peut être ajoutée à un écran d'accueil iOS.
• Réduisez au maximum le nombre de requêtes et la taille des fichiers. Indique le nombre total de requêtes réseau et la taille des fichiers pour différentes catégories, telles que les documents, les scripts, les feuilles de style, les images, etc.
• Maximum Potential First Input Delay Mesure le temps potentiel maximal entre la première interaction d'un utilisateur avec la 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 retard maximal (Maximum Potential First Input Delay) n'est pas pris en compte dans le score de la catégorie "Performances".

Figure 3 : Nouvelle interface utilisateur du panneau "Audits".

Les versions Node et CLI de Lighthouse 5.1 proposent trois nouvelles fonctionnalités majeures à découvrir :

• Budgets de performances Empêchez votre site de régresser au fil du temps en spécifiant le nombre de requêtes 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. Le Stack Pack WordPress a été livré en premier. Les piles 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 OS, 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 Ctrl+Alt+B ou Cmd+Option+B (Mac) lorsque vous êtes 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.

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. La prérécupération est une fonctionnalité relativement nouvelle de la plate-forme Web qui permet d'accélérer les chargements de pages ultérieurs. Le site Can I use… indique qu'il est compatible avec 83,33 % des navigateurs dans le monde en juillet 2019.

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

Consultez la démonstration de la prélecture pour l'essayer.

Problème Chromium 935267

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

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

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 en arrière-plan" du panneau "Application" est désormais compatible avec les messages push et les notifications. Les messages push se produisent lorsqu'un serveur envoie des informations à un service worker. Les notifications se produisent lorsqu'un service worker ou un script de page affiche 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 avez commencé l'enregistrement, les messages push et les notifications sur cette page sont enregistrés pendant trois jours, même lorsque la page est fermée et même lorsque Chrome est fermé.

Figure 7. Les nouveaux volets "Messages push" et "Notifications" dans le panneau "Application".

Problème Chromium 927726

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.