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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Les outils de développement ont été améliorés 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 pour éviter toute confusion.
  • Sources > Éditeur souligne désormais les instructions @import, url() et href qui ont échoué, et affiche des info-bulles d'erreur intégrées à côté.

Énoncés soulignés avec 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 instructions problématiques.

  • Le panneau Réseau remplit systématiquement la colonne 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 incorrectes, 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.

Prise en charge du timing linéaire dans Éléments > Styles > Éditeur d'interpolation

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

Pour configurer les codes temporels linéaires, cliquez sur le bouton du 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 désormais compatible avec les buckets de stockage. Les buckets de stockage sont indépendants les uns des autres. Vous pouvez donc spécifier la 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 qu'IndexedDB et CacheStorage.

Consultez ce fiddle pour tester la fonctionnalité. Ouvrez les outils de développement, accédez à Application > Stockage > IndexedDB, puis exécutez le code. Les outils de développement vous montrent désormais les buckets et leur contenu. Sélectionnez un bucket pour afficher ses métadonnées.

Afficher les 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, de session et du 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 précisément, cette version ajoute quatre nouveaux audits qui détectent différents problèmes d'accessibilité liés aux en-têtes et aux légendes des tableaux, aux noms des boutons d'entrée et aux incohérences de langue. Exemple :

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

Consultez également la liste complète des modifications. Pour découvrir les bases de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse : optimiser la vitesse d'un 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 dans de nombreuses distributions Linux. Pour les raccourcis macOS, consultez Actions alternatives du pointeur.
  • Applications de lecteur d'écran :
    • Les libellés de cases à cocher ne seront pas annoncés deux fois inutilement.
    • Annonce les noms des en-têtes de colonne pour les 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 importants

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 timeline (1422552).
  • Le panneau Couverture reconnaît désormais s'il y a eu une activation du prérendu ou une navigation dans le cache amélioré, et vous invite à actualiser la page (1393057).
  • Vous pouvez désormais parcourir 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 Réseau (1450622).
  • Le graphique en flammes du panneau Performances affiche désormais de petits espaces entre les traces pour les rendre plus lisibles (1452150).
  • Correction du mappage automatique pour les fichiers intégrés dans les cartes sources (1446383).

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 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 sujets abordés dans la série Nouveautés des outils pour les développeurs.