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

Sofia Emelianova
Sofia Emelianova
GitHub

Amélioration du débogage des feuilles de style manquantes

DevTools bénéficie de plusieurs améliorations pour vous aider à identifier et à déboguer plus rapidement les problèmes liés aux feuilles de style manquantes:

  • L'arborescence Sources > Page n'affiche désormais que les feuilles de style déployées et chargées avec succès afin de réduire la confusion.
  • L'option Sources > Éditeur souligne désormais les instructions @import, url() et href ayant échoué et affiche des info-bulles d'erreur en ligne à côté d'elles.

Instructions soulignées avec des info-bulles dans le panneau "Sources".

  • En plus des liens vers les requêtes ayant échoué, la console fournit désormais des liens vers la ligne exacte qui fait référence à une feuille de style qui n'a pas pu être chargée.

La console fournit des liens vers les lignes exactes contenant des énoncés problématiques.

  • Le panneau Network (Réseau) renseigne de manière cohérente la colonne Initiator (Initiateur) avec des liens vers la ligne exacte qui fait référence à une feuille de style qui n'a pas pu être chargée.

  • Le panneau Problèmes liste tous les problèmes de chargement des feuilles de style, y compris les URL non valides, les requêtes ayant échoué et les instructions @import mal placées.

Panneau "Problèmes" avec des liens vers les sources et les demandes.

Problèmes Chromium: 1440626, 1442198, 1453611.

Compatibilité avec le timing linéaire dans Éléments > Styles > Éditeur d'atténuation

L'éditeur d'atténuation Éditeur d'easing. dans Éléments > Styles vous permet d'ajuster les valeurs transition-timing-function et animation-timing-function en un clic. Dans cette version, l'éditeur d'animation Éditeur d'easing. est compatible avec la fonction de temporisation linéaire.

Pour configurer des durées linéaires, cliquez sur le bouton de sélecteur linéaire. Pour ajouter un point de contrôle, cliquez n'importe où sur la ligne. Pour supprimer un point de contrôle, double-cliquez dessus. Vous pouvez également choisir l'un des préréglages: linear, elastic, bounce ou emphasized. Regardez la vidéo pour voir l'ajustement linéaire en action.

Problème Chromium: 1421241.

Compatibilité avec les buckets de stockage et vue des métadonnées

La section Application > Stockage est compatible avec les buckets de stockage. Les buckets de stockage sont indépendants les uns des autres. Vous pouvez donc spécifier une priorité d'éviction pour des tranches de données et vous assurer que les données les plus précieuses ne sont pas supprimées. Chaque bucket de stockage peut stocker des données associées à des API de stockage établies telles que IndexedDB et CacheStorage.

Consultez cette page de débogage pour tester cette fonctionnalité. Ouvrez DevTools, accédez à Application > Storage > Indexed DB (Application > Stockage > Indexed DB), puis exécutez le code. DevTools affiche désormais les buckets et leur contenu. Sélectionnez un bucket pour afficher ses métadonnées.

Affichage des métadonnées d'un bucket

La vue unifiée des métadonnées est désormais également disponible pour les sections de stockage local, par session et dans le cache.

Nouvelle vue unifiée des métadonnées.

Problèmes Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Le panneau Lighthouse exécute désormais Lighthouse 10.3.0. Plus particulièrement, cette version ajoute quatre nouveaux audits qui détectent divers problèmes d'accessibilité liés aux en-têtes de tableaux et aux titres, aux noms des boutons de saisie et aux incohérences linguistiques. Exemple :

Vérification des en-têtes de table réussie.

Consultez également la liste complète des modifications. Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans DevTools, consultez Lighthouse: optimiser la vitesse de votre site Web.

Problème Chromium: 772558.

Accessibilité: commandes au clavier et lecture d'écran améliorée

Les outils de développement sont désormais compatibles avec davantage de raccourcis et corrigent les problèmes liés aux lecteurs d'écran:

  • Vous pouvez désormais ouvrir le menu contextuel à l'aide d'un raccourci clavier, par exemple Maj+F10 sous Windows et de nombreuses distributions Linux. Pour connaître les raccourcis macOS, consultez Actions de pointeur alternatives.
  • Applications de lecteur d'écran :
    • Ne déclare pas inutilement les libellés de cases à cocher deux fois.
    • Annonces des noms des en-têtes de colonnes triables lorsque vous appuyez sur le raccourci "Lire l'en-tête de colonne".

L'équipe DevTools remercie Yanling Wang et Elorm Coch pour ces améliorations.

Problèmes Chromium: 1446482, 1414952.

Autres points forts

Voici quelques corrections et améliorations importantes apportées à cette version:

  • Le panneau Réseau continue d'enregistrer l'activité réseau même après que vous avez interagi avec la chronologie (1422552).
  • Le panneau Couverture reconnaît désormais si une activation du préchargement ou une navigation dans le cache avant/arrière a été effectuée et vous invite à actualiser la page (1393057).
  • Vous pouvez désormais naviguer dans le volet Sources > Points d'arrêt à l'aide du clavier: Flèche vers le haut et Flèche vers le bas pour vous déplacer, et Espace pour sélectionner (1446150).
  • Correction de l'importation et du filtrage des fichiers HAR dans le panneau Network (1450622).
  • Le graphique en forme de flamme du panneau Performances comporte désormais de petits espaces entre les traces pour les afficher plus clairement (1452150).
  • Correction du mappage automatique des fichiers intégrés aux cartes sources (1446383).

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.

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.