Cette page a été traduite par l'API Cloud Translation.

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

Sofia Emelianova

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

Les outils de développement bénéficient d'un certain nombre d'améliorations pour vous aider à identifier et à résoudre plus rapidement les problèmes liés aux feuilles de style manquantes:

Afin de limiter les risques de confusion, l'arborescence Sources > Page n'affiche désormais que les feuilles de style correctement déployées et chargées.
L'option Sources > Editor (Sources > Éditeur) est désormais soulignée et affichée à côté des instructions @import, url() et href ayant échoué.

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 dont le chargement a échoué.

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

Le panneau Network renseigne systématiquement la colonne Initiator avec des liens vers la ligne exacte qui fait référence à une feuille de style dont le chargement a échoué.
Le panneau Problèmes liste tous les problèmes de chargement des feuilles de style, y compris les URL qui ne fonctionnent pas, les requêtes ayant échoué et les instructions @import mal placées.

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

Problèmes Chromium: 1440626, 1442198, 1453611.

Prise en charge des codes temporels linéaires dans Éléments > Styles > Éditeur de lissage de vitesse.

L'éditeur de lissage de vitesse 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 de lissage de vitesse est compatible avec les fonctions de temps linéaire.

Pour configurer des codes temporels linéaires, cliquez sur le bouton de l'outil de sélection 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 suivants: 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 > Storage (Application) est 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 les segments de données et vous assurer que les données les plus importantes 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.

Regardez ce violon pour tester la fonctionnalité. Ouvrez les outils de développement, accédez à Application > Storage > Base de données indexée, puis exécutez le code. Les outils de développement affichent 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 de 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 la version 10.3.0. Plus particulièrement, cette version inclut quatre nouveaux audits permettant de détecter divers problèmes d'accessibilité concernant les en-têtes de tableau et les sous-titres, les noms des boutons de saisie et les incohérences de langue. Exemple :

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

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 du site Web.

Problème Chromium: 772558.

Accessibilité: commandes au clavier et amélioration de la lecture d'écran

Les outils de développement sont désormais compatibles avec davantage de raccourcis et résolvent 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 la section Autres actions possibles pour le curseur.
Applications de lecteur d'écran :
- Évitez d'annoncer inutilement deux fois les libellés des cases à cocher.
- Les noms des en-têtes des colonnes pouvant être triées seront annoncés lorsque vous cliquerez sur le raccourci "Lire l'en-tête de colonne".

L'équipe DevTools remercie Yanling Wang et Elorm Coch d'avoir apporté ces améliorations.

Problèmes Chromium: 1446482, 1414952.

Points forts divers

Voici quelques correctifs et améliorations importants dans cette version:

Le panneau Network continue d'enregistrer l'activité réseau, même après que vous ayez interagi avec la chronologie (1422552).
Le panneau Couverture détecte désormais si une activation du prérendu ou une navigation dans le cache amélioré a été effectuée, et vous invite à l'actualiser. (1393057).
Vous pouvez désormais parcourir le volet Sources > Breakpoints (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 un élément (1446150).
Correction de l'importation et du filtrage des fichiers HAR dans le panneau Network (Réseau). (1450622)
Le graphique de type "flamme" dans le panneau Performance ajoute désormais de petits écarts entre les traces pour un meilleur rendu. (1452150)
Correction du mappage automatique des fichiers intégrés dans les cartes sources. (1446383)

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.