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

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

Kayce Basques

Bonjour ! Voici les nouveautés des Outils pour les développeurs Chrome dans Chrome 75.

Version vidéo de cette page

Valeurs prédéfinies pertinentes pour la saisie semi-automatique des fonctions CSS

Certaines propriétés CSS, comme filter, utilisent des fonctions pour les valeurs. Exemple : filter: blur(1px) ajoute un flou d'1 pixel à un nœud. Lors de la saisie semi-automatique des propriétés telles que filter, les outils de développement sont désormais renseignés la propriété avec une valeur significative, afin que vous puissiez prévisualiser le type de modification que celle-ci aura sur le nœud.

Ancien comportement de la saisie semi-automatique.

Figure 1 : Ancien comportement de la saisie semi-automatique. Les outils de développement utilisent la saisie semi-automatique pour filter: blur. est visible dans la fenêtre d'affichage.

Nouveau comportement de la saisie semi-automatique.

Figure 2 : Nouveau comportement de la saisie semi-automatique. Les outils de développement utilisent la saisie semi-automatique pour filter: blur(1px). la modification est visible dans la fenêtre d'affichage.

Problème Chromium concerné: #931145

Effacer les données des sites à partir du menu de commandes

Appuyez sur Ctrl+Maj+P ou Cmd+Maj+P (Mac) pour ouvrir le menu de commandes, puis exécutez la Effacer les données du site pour effacer toutes les données associées à la page, y compris: Service workers, localStorage, sessionStorage, IndexedDB, Web SQL, Cookies, Cache, et le cache de l'application.

Commande "Effacer les données du site"

Figure 3. Commande Effacer les données du site

Vous pouvez effacer les données des sites sous Application > Vider l'espace de stockage pendant un moment. Les nouvelles fonctionnalité de Chrome 75 est de pouvoir exécuter la commande à partir du menu de commandes.

Si vous ne souhaitez pas supprimer toutes les données de sites, vous pouvez contrôler celles qui sont supprimées. Application > Vider l'espace de stockage.

Application "Vider l'espace de stockage" sélectionnée.

Figure 4. Application > Vider l'espace de stockage.

Problème Chromium concerné: #942503

Afficher toutes les bases de données IndexedDB

Auparavant, Application > IndexedDB ne vous permettait d'inspecter les bases de données IndexedDB qu'à partir du origine principale. Par exemple, si votre page comportait un <iframe> et que <iframe> utilisait vous ne seriez pas en mesure d'afficher sa ou ses bases de données. À partir de Chrome 75, les outils de développement affichent IndexedDB pour toutes les origines.

Ancien comportement. La page intègre une démo qui utilise IndexedDB, mais aucune base de données n'est visible.

Figure 5. Ancien comportement. La page intègre une démo qui utilise IndexedDB, mais aucune base de données sont visibles.

Nouveau comportement. Les bases de données de la démonstration sont visibles.

Figure 6. Nouveau comportement. Les bases de données de la démonstration sont visibles.

Problème Chromium concerné: #943770

Afficher la taille non compressée d'une ressource en pointant sur

Supposons que vous inspectiez l'activité réseau. Votre site utilise la compression de texte pour : pour réduire la taille de transfert des ressources. Vous voulez voir la taille des ressources de la page après le le navigateur les décompresse. Auparavant, ces informations n'étaient disponibles que pour les demandes importantes lignes. Vous pouvez maintenant accéder à ces informations en pointant sur la colonne Size (Taille).

Pointez sur la colonne "Taille" pour afficher la taille non compressée d'une ressource.

Figure 7 : Pointez sur la colonne "Taille" pour afficher la taille non compressée d'une ressource.

Problème Chromium concerné: #805429

Points d'arrêt intégrés dans le volet des points d'arrêt

Supposons que vous ajoutiez un point d'arrêt au niveau de la ligne de code à la ligne de code suivante:

document.querySelector('#dante').addEventListener('click', logWarning);

Depuis un certain temps déjà, les outils de développement vous permettent de spécifier le moment exact où l'opération doit s'arrêter sur un point d'arrêt. comme ceci: au début de la ligne, avant l'appel de document.querySelector('#dante'), ou avant l'appel de addEventListener('click', logWarning). Si vous activez les trois, en créant 3 points d'arrêt. Auparavant, le volet Breakpoints (Points d'arrêt) ne permettait pas de gérer ces trois points d'arrêt individuellement. À partir de Chrome 75, chaque point d'arrêt intégré aura sa propre entrée dans le Volet Breakpoints (Points d'arrêt).

Ancien comportement. Le volet "Breakpoints" (Points d'arrêt) ne contient qu'une seule entrée.

Figure 8. Ancien comportement. Le volet Breakpoints (Points d'arrêt) ne contient qu'une seule entrée.

Nouveau comportement. Le volet "Breakpoints" (Points d'arrêt) contient trois entrées.

Figure 9. Nouveau comportement. Le volet Breakpoints (Points d'arrêt) contient trois entrées.

Problème Chromium concerné: #927961

Nombre de ressources IndexedDB et Cache

Les volets IndexedDB et Cache indiquent désormais le nombre total de ressources dans une base de données ou cache.

Nombre total d'entrées dans une base de données IndexedDB.

Figure 10 : Nombre total d'entrées dans une base de données IndexedDB.

Problèmes Chromium concernés: #941197, #930773, #930865

Paramètre de désactivation de l'info-bulle d'inspection détaillée

Chrome 73 a introduit des info-bulles détaillées en mode Inspecter.

Info-bulle détaillée.

Figure 11 : Info-bulle détaillée affichant la couleur, la police, la marge et le contraste.

Vous pouvez désormais désactiver ces info-bulles détaillées dans Paramètres > Préférences > Éléments > Afficher l'info-bulle d'inspection détaillée.

Info-bulle minimale.

Figure 12. Info-bulle minimale n'affichant que la largeur et la hauteur.

Problème Chromium concerné: #948417

Paramètre permettant d'activer ou de désactiver le retrait de la touche de tabulation dans l'éditeur du panneau "Sources"

Les tests d'accessibilité ont révélé la présence d'une tabulation dans l'éditeur. Une fois qu'un clavier utilisateur s'affichait dans l'éditeur, il n'avait aucun moyen de le quitter, car la touche Tabulation était utilisé pour la mise en retrait. Pour ignorer le comportement par défaut et utiliser Tabulation pour déplacer le curseur, activez Paramètres > Préférences > Sources > Activer le focus à partir d'un onglet.

Nous avons beaucoup travaillé récemment pour faciliter la navigation dans l'interface utilisateur des outils de développement. Pour en savoir plus, consultez l'article de Rob Study dans l'article Navigate Chrome DevTools With Assistive Technology (Naviguer dans les outils pour les développeurs Chrome avec une technologie d'assistance).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta 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 plates-formes Web de pointe et de 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 et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

Envoyez-nous vos suggestions ou vos commentaires via crbug.com.
Signalez un problème lié aux outils de développement en cliquant sur Autres options > Aide > Signalez un problème dans les outils de développement.
Tweetez à l'adresse @ChromeDevTools.
Faites-nous part de vos commentaires sur les vidéos YouTube sur les nouveautés des outils de développement ou sur les vidéos YouTube de conseils pour les outils de développement.