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

Kayce Basques

Bonjour ! Voici les nouveautés de Chrome DevTools 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, acceptent des fonctions comme valeurs. Par exemple, filter: blur(1px) ajoute un flou de 1 pixel à un nœud. Lors de la saisie semi-automatique de propriétés telles que filter, DevTools renseigne désormais la propriété avec une valeur pertinente afin que vous puissiez prévisualiser le type de modification que la valeur aura sur le nœud.

Figure 1 : Ancien comportement de saisie semi-automatique. Les outils de développement proposent une saisie semi-automatique de filter: blur, et aucun changement n'est visible dans la fenêtre d'affichage.

Figure 2 : Nouveau comportement de saisie semi-automatique DevTools propose une saisie semi-automatique de 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 Command

Appuyez sur Ctrl+Maj+P ou sur Cmd+Maj+P (Mac) pour ouvrir le menu de commande, puis exécutez la commande Effacer les données du site pour effacer toutes les données liées à la page, y compris les service workers, localStorage, sessionStorage, IndexedDB, Web SQL, cookies, cache et cache d'application.

Figure 3. La commande Effacer les données des sites.

Vous pouvez effacer les données des sites depuis Application > Vider l'espace de stockage depuis un certain temps. 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 du site, vous pouvez contrôler celles qui sont supprimées en sélectionnant Application > Vider l'espace de stockage.

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 que les bases de données IndexedDB à partir de l'origine principale. Par exemple, si vous aviez un <iframe> sur votre page et que cet élément utilisait IndexedDB, vous ne pourriez pas voir ses bases de données.<iframe> À partir de Chrome 75, les outils pour les développeurs affichent les bases de données IndexedDB pour toutes les origines.

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

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 dessus

Supposons que vous inspectiez l'activité réseau. Votre site utilise la compression de texte pour réduire la taille de transfert des ressources. Vous souhaitez connaître la taille des ressources de la page après que le navigateur les a décompressées. Auparavant, ces informations n'étaient disponibles que lorsque vous utilisiez des lignes de requêtes volumineuses. Vous pouvez désormais y accéder en pointant sur la colonne Taille.

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

Problème Chromium pertinent: 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 par ligne de code à la ligne de code suivante:

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

Depuis un certain temps, DevTools vous permet de spécifier à quel moment exactement il doit s'arrêter sur un point d'arrêt: au début de la ligne, avant l'appel de document.querySelector('#dante') ou avant l'appel de addEventListener('click', logWarning). En activant les trois, vous créez trois points d'arrêt. Auparavant, le volet Points d'arrêt ne vous permettait pas de gérer ces trois points d'arrêt individuellement. Depuis Chrome 75, chaque point d'arrêt intégré dispose de sa propre entrée dans le volet Points d'arrêt.

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

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 un cache.

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

Problèmes Chromium pertinents: 941197, 930773, 930865

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

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

Figure 11 : Info-bulle détaillée montrant 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.

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

Problème Chromium pertinent: 948417

Paramètre permettant d'activer ou de désactiver l'indentation des onglets dans l'éditeur du panneau "Sources"

Les tests d'accessibilité ont révélé qu'un piège à onglets était présent dans l'éditeur. Une fois qu'un utilisateur du clavier accédait à l'éditeur avec la touche de tabulation, il n'avait aucun moyen de le quitter, 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 ciblage des mouvements d'onglet.

Nous avons récemment beaucoup travaillé pour rendre l'interface utilisateur des outils de développement plus facile à naviguer au clavier. Pour en savoir plus, consultez l'article de Rob Khannon, 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

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 plates-formes 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.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Tweetez à l'adresse @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés dans les outils de développement ou sur les vidéos YouTube de conseils sur les outils de développement.

Nouveautés des outils de développement

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.