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 concernant les outils pour les développeurs Chrome dans Chrome 75.

Version vidéo de cette page

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

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

Ancien comportement de saisie semi-automatique.

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

Nouveau comportement de saisie semi-automatique.

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

Problème Chromium pertinent: #931145

Effacer les données des sites depuis le menu Commandes

Appuyez sur Ctrl+Maj+P ou Commande+Maj+P (Mac) pour ouvrir le menu de commandes, puis exécutez la commande Effacer les données du site pour effacer toutes les données liées à la page, y compris: Service workers, localStorage, sessionStorage, IndexedDB, {14Web SQL, Web SQL

La commande Effacer les données de site

Image 3. Commande Effacer les données du site

La suppression des données des sites est disponible depuis un certain temps en sélectionnant Application > Vider l'espace de stockage. La nouvelle fonctionnalité de Chrome 75 permet d'exécuter la commande à partir du menu de commandes.

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

Onglet "Application" avec l'option "Vider l'espace de stockage" sélectionnée

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

Problème Chromium pertinent: #942503

Afficher toutes les bases de données IndexedDB

Auparavant, Application > IndexedDB ne vous permettait d'inspecter les bases de données IndexedDB que depuis l'origine principale. Par exemple, si votre page comporte un élément <iframe> et que cet élément <iframe> utilisait IndexedDB, vous ne pourrez pas afficher la ou les bases de données correspondantes. Depuis Chrome 75, les outils de développement affichent les bases de données IndexedDB pour toutes les origines.

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

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

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 pertinent: #943770

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

Supposons que vous inspectez l'activité du réseau. Votre site utilise la compression de texte pour réduire la taille de transfert des ressources. Vous voulez voir la taille des ressources de la page une fois que le navigateur les a décompressées. Auparavant, ces informations n'étaient disponibles que pour les grandes lignes de requête. Vous pouvez maintenant accéder à ces informations en pointant sur la colonne Size (Taille).

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

Figure 7 : Pointez sur la colonne "Size" (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 en 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ù la pause doit s'effectuer 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, vous créez en fait trois points d'arrêt. Auparavant, le volet Breakpoints (Points d'arrêt) ne vous permettait pas de gérer ces trois points individuellement. À partir de Chrome 75, chaque point d'arrêt intégré reçoit sa propre entrée dans le volet Breakpoints (Points d'arrêt).

Ancien comportement. Il n'y a qu'une seule entrée dans le volet "Breakpoints" (Points d'arrêt).

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

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

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

Problème Chromium pertinent: #927961

Nombre de ressources IndexedDB et Cache

Les volets IndexedDB et Cache indiquent maintenant le nombre total de ressources dans une base de données ou un 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 pertinents: #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 en accédant à Paramètres > Préférences > Éléments > Afficher l'info-bulle d'inspection détaillée.

Info-bulle minimale.

Figure 12. Info-bulle minimale indiquant uniquement la largeur et la hauteur.

Problème Chromium pertinent: #948417

Paramètre d'activation et de désactivation du retrait de la touche de tabulation dans l'éditeur du panneau des sources

Les tests d'accessibilité ont révélé l'existence d'un piège d'onglets dans l'Éditeur. Une fois qu'un utilisateur du clavier accédait à l'éditeur avec la touche de tabulation, il n'avait aucun moyen d'en sortir, car la touche Tabulation était utilisée pour la mise en retrait. Pour ignorer le comportement par défaut et utiliser la touche Tabulation pour déplacer le curseur, activez Paramètres > Préférences > Sources > Activer le curseur de tabulation.

De nombreux travaux ont été effectués récemment pour rendre l'interface utilisateur des outils de développement elle-même plus facile à parcourir au clavier. Pour en savoir plus, consultez la vidéo Naviguer dans les outils pour les développeurs Chrome avec technologie d'assistance.

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.