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 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 leur inspiration.

Visualiser les décalages de mise en page

Imaginons que vous lisiez un article d'actualité sur votre site Web préféré. Lorsque vous lisez la page, vous perdez constamment votre place, car le contenu saute de manière aléatoire. Ce problème est appelé "déplacement de 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 tous les autres contenus vers le bas pour les laisser passer. La solution consiste à utiliser des espaces réservés.

DevTools peut désormais vous aider à détecter les décalages 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 surbrillance en bleu.

Figure 2. 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. Les nouveaux audits incluent:

• Fournit un apple-touch-icon valide. Vérifie qu'une PWA peut être ajoutée à un écran d'accueil iOS.
• Réduisez le nombre de requêtes et la taille des fichiers. Indique le nombre total de requêtes réseau et de 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 de saisie initial maximal potentiel) Mesure le temps maximal potentiel entre la première interaction d'un utilisateur sur une 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 votre score de la catégorie "Performances".

Figure 3. Nouvelle interface utilisateur du panneau "Audits" (Audits).

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

• Budgets de performances Évitez que votre site ne régresse 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.
• Stack Packs Ajoutez des audits adaptés à des piles technologiques spécifiques. Le pack de pile WordPress a été publié en premier. Les packs de 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, DevTools passe automatiquement à son 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 l'éditeur du panneau "Sources" est actif 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. Éditeur de points d'arrêt

Cache de préchargement dans le panneau "Network"

La colonne Taille du panneau "Network" (Réseau) indique 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 pages ultérieurs. Selon Can I use…, il est compatible avec 83,33% des navigateurs mondiaux en juillet 2019.

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

Pour l'essayer, consultez la démo de préchargement.

Problème 935267 dans Chromium

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

La console affiche désormais les champs de classe privés 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 "Applications"

La section "Services en arrière-plan" du panneau "Applications" est désormais compatible avec les messages et les notifications push. 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 en arrière-plan et de synchronisation en arrière-plan de Chrome 76, une fois l'enregistrement lancé, les messages push et les notifications de 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 927726 dans Chromium

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.