Aide au débogage pour les cas de non-respect des Trusted Types
Point d'arrêt sur les cas de non-respect des types de confiance
Vous pouvez désormais définir des points d'arrêt et intercepter des exceptions en cas de non-respect des règles de type Trusted dans le panneau Sources.
L'API Trusted Types vous aide à prévenir les failles de script intersites basé sur le DOM. Pour découvrir comment écrire, examiner et gérer des applications exemptes de failles DOM XSS avec les Trusted Types, cliquez ici.
Dans le panneau Sources, ouvrez le volet de la barre latérale Debugger. Développez la section Points d'arrêt de non-respect des CSP et cochez la case Cas de non-respect des types de confiance pour suspendre les exceptions. Essayez par vous-même en suivant cette page de démonstration.
Problème Chromium: 1142804
Associez le problème dans le panneau "Sources" à l'onglet "Problèmes"
Le panneau Sources affiche désormais une icône d'avertissement à côté de la ligne qui ne respecte pas le type de confiance. Pointez dessus pour prévisualiser l'exception. Cliquez dessus pour développer l'onglet Issues (Problèmes). Il fournit plus de détails sur les exceptions et des conseils pour les résoudre.
Problème Chromium: 1150883
Effectuer une capture d'écran d'un nœud au-delà de la fenêtre d'affichage
Vous pouvez désormais effectuer des captures d'écran pour un nœud complet, y compris pour le contenu en dessous de la ligne de flottaison. Auparavant, la capture d'écran était tronquée, car le contenu n'était pas visible dans la fenêtre d'affichage. Les captures d'écran pleine page sont maintenant aussi précises.
Dans le panneau Elements (Éléments), effectuez un clic droit sur un élément, puis sélectionnez Capture node screenshot (Capturer le nœud).
Problème Chromium: 1003629
Nouvel onglet "Jetons de confiance" pour les requêtes réseau
Inspectez les requêtes réseau Trust Tokens à l'aide du nouvel onglet Trust Tokens (Jetons de confiance).
Trust Token est une nouvelle API qui permet de lutter contre la fraude et de distinguer les bots des humains, sans suivi passif. Découvrez comment faire vos premiers pas avec les jetons de confiance.
Une assistance au débogage supplémentaire sera disponible dans les prochaines versions.
Problème Chromium: 1126824
Lighthouse 7 dans le panneau Lighthouse
Le panneau Lighthouse fonctionne désormais avec Lighthouse 7. Consultez les notes de version pour obtenir la liste complète des modifications.
Nouveaux audits dans Lighthouse 7:
- Précharger l'image Largest Contentful Paint (LCP) Audite si l'image utilisée par l'élément LCP est préchargée afin d'améliorer la durée de votre LCP.
- Problèmes consignés dans le panneau
Issues
. Indique la liste des problèmes non résolus dans le panneauIssues
. - Progressive Web Apps (PWA) : La catégorie des PWA a changé de manière assez importante.
Le groupe Installable est désormais entièrement alimenté par les vérifications de capacité qui activent les critères d'installation de Chrome. Ce sont les mêmes signaux que dans le volet Manifest.
- L'audit "Enregistrement d'un service worker" est déplacé vers le groupe Optimisé pour les PWA, et l'audit "Utilise HTTPS" est désormais inclus dans l'audit clé "Exigences concernant l'installation".
- Le groupe Rapide et fiable est supprimé. Étant donné que l'audit des "exigences d'installation" remanié inclut une vérification de la fonctionnalité hors connexion, l'audit "page actuelle et start_url" renvoient un code 200 lorsqu'ils sont hors connexion. L'audit "Le chargement de la page est suffisamment rapide sur le réseau mobile" a également été supprimé.
Problème Chromium: 772558
Mises à jour du panneau "Elements"
Prise en charge du forçage de l'état CSS :target
Vous pouvez maintenant utiliser les outils de développement pour forcer et inspecter l'état CSS :target
.
Dans le panneau Éléments, sélectionnez un élément et définissez son état. Cochez la case :target
pour forcer et inspecter les styles.
Utilisez la pseudo-classe :target
pour styliser un élément lorsque le hachage de l'URL et l'ID d'un élément sont identiques. Regardez cette démonstration pour l'essayer par vous-même. Cette nouvelle fonctionnalité des outils de développement vous permet de tester ces styles sans avoir à modifier manuellement l'URL en permanence.
Problème Chromium: 1156628
Nouveau raccourci pour dupliquer l'élément
Utilisez le nouveau raccourci Dupliquer l'élément pour cloner un élément instantanément.
Effectuez un clic droit sur un élément dans le panneau Éléments, puis sélectionnez Dupliquer l'élément. Un nouvel élément sera créé sous celui-ci.
Vous pouvez également dupliquer un élément à l'aide de raccourcis clavier:
- Mac:
Shift
+Option
+⬇️
- Fenêtre/ Linux:
Shift
+Alt
+⬇️
Problèmes Chromium: 1150797, 1150797
Sélecteurs de couleur pour les propriétés CSS personnalisées
Le volet Styles affiche désormais des sélecteurs de couleur pour les propriétés CSS personnalisées.
En outre, vous pouvez maintenir la touche Shift
enfoncée et cliquer sur le sélecteur de couleur pour parcourir les représentations RVBA, HSLA et hexadécimales de la valeur de couleur.
Problème Chromium: 1147016
Nouveaux raccourcis pour copier les propriétés CSS
Quelques nouveaux raccourcis vous permettent désormais de copier des propriétés CSS plus rapidement.
Dans le panneau Éléments, sélectionnez un élément. Ensuite, effectuez un clic droit sur une classe CSS ou une propriété CSS dans le volet Styles pour copier la valeur.
Copier les options de la classe CSS:
- Copier le sélecteur : Copiez le nom du sélecteur actuel.
- Copier la règle. Copiez la règle du sélecteur actuel.
- Copier toutes les déclarations: copie toutes les déclarations sous la règle actuelle, y compris les propriétés non valides et avec préfixe.
Copier les options de la propriété CSS:
- Copier la déclaration : Copiez la déclaration de la ligne active.
- Copier la propriété : Copiez la propriété de la ligne actuelle.
- Copier la valeur: copie la valeur de la ligne actuelle.
Problème Chromium: 1152391
Mises à jour des cookies
Nouvelle option pour afficher les cookies décodés par l'URL
Vous pouvez maintenant choisir d'afficher la valeur des cookies décodés par l'URL dans le volet Cookies.
Accédez au panneau Application et sélectionnez le volet Cookies. Sélectionnez un cookie de la liste. Cochez la nouvelle case Afficher l'URL décodée pour afficher le cookie décodé.
Problème Chromium: 997625
Supprimer uniquement les cookies visibles
Le bouton Effacer tous les cookies du volet "Cookies" est désormais remplacé par le bouton Effacer les cookies filtrés.
Dans le panneau Application > Cookies, saisissez du texte dans la zone de texte pour filtrer les cookies. Dans notre exemple ici, nous filtrons la liste par "PREF". Cliquez sur le bouton Effacer les cookies filtrés pour supprimer les cookies visibles. Effacez le texte du filtre. Les autres cookies restent dans la liste. Auparavant, vous aviez uniquement la possibilité de supprimer tous les cookies.
Problème Chromium: 978059
Nouvelle option pour effacer les cookies tiers dans le volet "Stockage"
Lorsque vous effacez les données des sites dans le volet Storage (Stockage), les outils de développement n'effacent désormais que les cookies propriétaires par défaut. Activez y compris les cookies tiers pour effacer également les cookies tiers.
Problème Chromium: 1012337
Modifier les indicateurs client User-Agent pour les appareils personnalisés
Vous pouvez désormais modifier les indicateurs client User-Agent pour les appareils personnalisés.
Accédez à Paramètres > Appareils, puis cliquez sur Ajouter un appareil personnalisé. Développez la section Indices client user-agent pour modifier les indicateurs client.
Les indicateurs client user-agent constituent une alternative à la chaîne user-agent. Ils permettent aux développeurs d'accéder à des informations sur le navigateur d'un utilisateur de manière ergonomique et protégeant la confidentialité. Pour en savoir plus sur les indicateurs client User-Agent, consultez la page web.dev/user-agent-client-hints/.
Problème Chromium: 1073909
Mises à jour du panneau "Network"
Conserver le paramètre "Enregistrer le journal réseau"
Désormais, les outils de développement conservent le paramètre "Enregistrer un journal réseau". Auparavant, les outils de développement réinitialisaient le choix de l'utilisateur à chaque actualisation d'une page.
Problème Chromium: 1122580
Afficher les connexions WebTransport dans le panneau "Network" (Réseau)
Le panneau "Network" (Réseau) affiche désormais les connexions WebTransport.
WebTransport est une nouvelle API offrant une messagerie client-serveur, bidirectionnelle et à faible latence. Pour en savoir plus sur ses cas d'utilisation et découvrir comment envoyer des commentaires sur l'avenir de l'implémentation, rendez-vous sur web.dev/webtransport/.
Problème Chromium: 1152290
"Online" a été renommé "No throttling" (Pas de limitation).
L'option d'émulation de réseau "Online" est maintenant renommée "No Throttling".
Problème Chromium: 1028078
Nouvelles options de copie dans la console, les panneaux "Sources" et le volet "Styles"
Nouveaux raccourcis pour copier des objets dans la console et le panneau des sources
Vous pouvez désormais copier des valeurs d'objet à l'aide des nouveaux raccourcis de la console et du panneau des sources. Cela s'avère pratique, surtout lorsque vous avez un objet volumineux (par exemple, un long tableau) à copier.
Problèmes Chromium: 1149859, 1148353
Nouveaux raccourcis pour copier le nom du fichier dans les panneaux "Sources" et "Styles"
Vous pouvez maintenant copier le nom du fichier en effectuant un clic droit sur:
- un fichier dans le panneau Sources ; ou
- le nom du fichier dans le volet Styles du panneau Éléments.
Sélectionnez Copier le nom du fichier dans le menu contextuel pour copier le nom du fichier.
Problème Chromium: 1155120
Mises à jour de la vue détaillée du frame
Nouvelles informations sur les service workers dans la vue détaillée du frame
Les outils de développement affichent désormais les service workers dédiés sous le cadre qui les crée.
Dans le panneau Application, développez un cadre avec les service workers, puis sélectionnez-en un sous l'arborescence Service Workers pour afficher les détails.
Problème Chromium: 1122507
Mesurer les informations sur la mémoire dans la vue détaillée de l'image
L'état de l'API performance.measureMemory()
s'affiche désormais dans la section Disponibilité de l'API.
La nouvelle API performance.measureMemory()
estime l'utilisation de la mémoire pour l'ensemble de la page Web. Pour savoir comment surveiller l'utilisation totale de mémoire de votre page Web avec cette nouvelle API, consultez cet article.
Problème Chromium: 1139899
Envoyer des commentaires depuis l'onglet "Problèmes"
Si vous souhaitez améliorer un message concernant un problème, accédez à l'onglet Problèmes depuis la console ou Plus de paramètres > Plus d'outils > Problèmes, puis ouvrez l'onglet Problèmes. Développez un message concernant un problème, cliquez sur Le message du problème vous est-il utile ?, puis envoyez vos commentaires dans le pop-up.
Images supprimées dans le panneau "Performances"
Lors de l'analyse des performances de chargement dans le panneau "Performances", la section Frames marque désormais les frames supprimés en rouge. Pointez dessus pour connaître la fréquence d'images.
Problème Chromium: 1075865
Émuler les appareils pliables et double écran en mode Appareil
Vous pouvez désormais émuler des appareils à double écran et pliables dans les outils de développement.
Après avoir activé la barre d'outils de l'appareil, sélectionnez l'un des appareils suivants: Surface Duo ou Samsung Galaxy Fold.
Cliquez sur la nouvelle icône représentant un span pour basculer entre les positions à écran unique, pliée et double écran ou dépliée.
Vous pouvez également activer les fonctionnalités expérimentales de la plate-forme Web pour accéder à la nouvelle fonctionnalité CSS Media screen-spanning
et à l'API JavaScript getWindowSegments
. L'icône expérimentale affiche l'état de l'indicateur Experimental Web Platform features (Fonctionnalités expérimentales de la plate-forme Web). L'icône est mise en surbrillance lorsque l'indicateur est activé. Accédez à chrome://flags
et activez/désactivez l'indicateur.
Problème Chromium: 1054281
Fonctionnalités expérimentales
Automatiser les tests de navigateur avec Puppeteer Recorder
Les outils de développement peuvent désormais générer des scripts Puppeteer en fonction de votre interaction avec le navigateur, ce qui vous permet d'automatiser plus facilement les tests du navigateur. Puppeteer est une bibliothèque Node.js qui fournit une API de haut niveau pour contrôler Chrome ou Chromium via le protocole DevTools.
Accédez à cette page de démonstration. Ouvrez le panneau Sources dans les outils de développement. Sélectionnez l'onglet Enregistrement dans le volet de gauche. Ajoutez un enregistrement et nommez le fichier (par exemple, test01.js).
Cliquez sur le bouton Record (Enregistrer) en bas pour commencer à enregistrer l'interaction. Essayez de remplir le formulaire à l'écran. Notez que les commandes Puppeteer sont ajoutées en conséquence au fichier. Cliquez à nouveau sur le bouton Record (Enregistrer) pour arrêter l'enregistrement.
Pour exécuter le script, suivez le guide de démarrage sur le site officiel de Puppeteer.
Veuillez noter que cette expérience n'en est qu'à ses débuts. Nous prévoyons d'améliorer et de développer la fonctionnalité Enregistreur au fil du temps.
Problème Chromium: 1144127
Éditeur de police dans le volet "Styles"
Le nouvel éditeur de police est un éditeur contextuel dans le volet Styles qui contient les propriétés liées aux polices. Il vous aide à trouver la typographie idéale pour votre page Web.
La fenêtre contextuelle fournit une interface utilisateur épurée pour manipuler dynamiquement la typographie avec une série de types d'entrée intuitifs.
Problème Chromium: 1093229
Outils de débogage CSS Flexbox
Les outils de développement ont ajouté une compatibilité expérimentale pour le débogage Flexbox depuis la dernière version.
Les outils de développement tracent désormais une ligne directrice pour vous aider à mieux visualiser la propriété CSS align-items
. La propriété CSS gap
est également prise en charge. Dans notre exemple, nous utilisons le CSS gap: 12px;
. Notez le modèle de hachures pour chaque écart.
Problème Chromium: 1139949
Nouvel onglet "Cas de non-respect des règles CSP"
Consultez d'un coup d'œil tous les cas de non-respect des Content Security Policy (CSP) dans le nouvel onglet Cas de non-respect des CSP. Ce nouvel onglet est un test qui devrait faciliter l'utilisation des pages Web comportant un grand nombre de cas de non-respect des règles CSP et des types de confiance.
Problème Chromium: 1137837
Nouveau calcul du contraste des couleurs : algorithme avancé de contraste perceptuel (APCA)
L'algorithme Advanced Perceptual Contrast Algorithm (APCA) remplace le rapport de contraste des directives AA/AAA dans le sélecteur de couleurs.
L'APCA est une nouvelle méthode de calcul du contraste basée sur des recherches modernes sur la perception des couleurs. Comparée aux directives de l'AA/AAA, l'APCA dépend davantage du contexte. Le contraste est calculé en fonction des propriétés spatiales du texte (épaisseur et taille de la police), de la couleur (différence de luminosité perçue entre le texte et l'arrière-plan) et du contexte (lumière ambiante, environnement et finalité prévue du texte).
Dans cet exemple, le seuil de l'APCA est de 38%. Le rapport de contraste doit être supérieur ou égal à la valeur répertoriée. Cette valeur est calculée en fonction de l'épaisseur et de la taille de la police, en se référant à ce tableau de conversion APCA.
Problème Chromium: 1121900
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.
Nouveautés des outils de développement
Liste des points abordés dans la série Nouveautés des outils de développement.
Chrome 126
- Améliorations apportées au panneau "Performances"
- Déplacer et masquer des canaux grâce au nouveau mode de configuration des canaux
- Ignorer les scripts dans le graphique de type "flamme"
- Réduire le processeur 20 fois
- Le panneau "Insights sur les performances" va être abandonné
- Identifier une utilisation excessive de la mémoire avec les nouveaux filtres dans les instantanés de segments de mémoire
- Inspecter les buckets de stockage dans Application > Stockage
- Désactiver les avertissements auto-XSS à l'aide d'un indicateur de ligne de commande
- Lighthouse version 12.0.0
- Points forts divers
Chrome 125
- Mieux comprendre les erreurs et les avertissements dans la console avec Gemini
- Prise en charge des règles@position-try dans Éléments > Styles
- Améliorations apportées au panneau "Sources"
- Configurer la mise en page vitrine automatique et la fermeture des crochets
- Les promesses refusées traitées sont reconnues comme interceptées
- Causes d'erreurs dans la console
- Améliorations apportées au panneau "Réseau"
- Inspecter les en-têtes des indicateurs anticipés
- Masquer la colonne "Waterfall" (Cascade d'annonces)
- Améliorations apportées au panneau "Performances"
- Capturer les statistiques des sélecteurs CSS
- Modifier l'ordre et masquer les titres
- Ignorer les éléments de retenue dans le panneau "Mémoire"
- Lighthouse version 11.7.1
- Points forts divers
Chrome 124
- Nouveau panneau de saisie automatique
- Limitation de la bande passante réseau améliorée pour WebRTC
- Prise en charge des animations liées au défilement dans le panneau "Animations"
- Meilleure prise en charge de l'imbrication CSS dans Éléments > Styles
- Panneau "Performances améliorées"
- Masquer les fonctions et leurs enfants dans le graphique de type "flamme"
- Flèches vers les événements qu'ils ont lancés depuis les initiés sélectionnés
- Lighthouse version 11.6.0
- Info-bulles pour les catégories spéciales dans Mémoire > Instantanés de segments de mémoire
- Application > Storage updates (Application > Mises à jour de l'espace de stockage)
- Octets utilisés pour le stockage partagé
- Web SQL est entièrement obsolète
- Améliorations apportées au panneau de couverture
- Le panneau "Calques" a peut-être été abandonné
- Abandon du Profileur JavaScript: phase 4, finale
- Points forts divers
Chrome 123
- Trouvez l'easter egg
- Mises à jour du panneau "Éléments"
- Émuler une page sélectionnée dans Éléments > Styles
- Sélecteur de couleur, Horloge à angle et Éditeur de lissage de vitesse dans les versions de remplacement
var()
- L'outil CSS Length est obsolète
- Fenêtre pop-up du résultat de recherche sélectionné dans Performances > Piste principale
- Mises à jour du panneau réseau
- Bouton de suppression et filtre de recherche dans l'onglet Réseau > EventStream
- Info-bulles contenant des motifs d'exception pour les cookies tiers dans Réseau > Cookies
- Activer et désactiver tous les points d'arrêt dans les sources
- Afficher les scripts chargés dans les outils de développement pour Node.js
- Lighthouse version 11.5.0
- Améliorations de l'accessibilité
- Points forts divers
Chrome 122
- La collection officielle des extensions Enregistreur est disponible
- Améliorations du réseau
- Motif de l'échec dans la colonne "État"
- Sous-menu "Copier" amélioré
- Amélioration des performances
- Fil d'Ariane dans la timeline
- Initiateurs d'événements dans le canal principal
- Menu de sélection d'instance de VM JavaScript pour les outils de développement Node.js
- Nouveau raccourci et nouvelle commande dans "Sources"
- Améliorations apportées aux éléments
- Le pseudo-élément ::view-transition peut désormais être modifié dans "Styles"
- Compatibilité de la propriété align-content avec les conteneurs de blocs
- Prise en charge de la posture pour les appareils pliables émulés
- Thématisation dynamique
- Avertissements de suppression progressive des cookies tiers dans les panneaux "Réseau" et "Application"
- Lighthouse version 11.4.0
- Améliorations de l'accessibilité
- Points forts divers
Chrome 121
- Améliorations apportées aux éléments
- Barre de filtre simplifiée dans le panneau "Network"
- Assistance
@font-palette-values
- Cas compatible: propriété personnalisée en remplacement d'une autre propriété personnalisée
- Meilleure compatibilité avec les cartes sources
- Améliorations apportées au panneau "Performances"
- Suivi des interactions améliorées
- Filtrage avancé dans les onglets "Ascendant", "Arborescence d'appel" et "Journal des événements"
- Repères de retrait dans le panneau "Sources"
- Info-bulles utiles pour les en-têtes et le contenu remplacés dans le panneau "Réseau"
- Nouvelles options du menu Commandes pour l'ajout et la suppression de schémas de blocage de requêtes
- Le test des cas de non-respect des CSP a été supprimé
- Lighthouse version 11.3.0
- Améliorations de l'accessibilité
- Points forts divers
Chrome 120
- Abandon des cookies tiers
- Analyser les cookies de votre site Web avec l'outil d'analyse Privacy Sandbox
- Fiche améliorée pour les éléments à ignorer
- Modèle d'exclusion par défaut pour node_modules
- Les exceptions détectées arrêtent désormais l'exécution si elles sont détectées ou transmises via du code que vous n'ignorez pas
x_google_ignoreList
a été renomméignoreList
dans les cartes sources- Nouveau bouton d'activation du mode d'entrée lors du débogage à distance
- Le panneau "Elements" affiche désormais les URL des nœuds #document
- Règle de sécurité du contenu efficace dans le panneau "Application"
- Amélioration du débogage des animations
- Boîte de dialogue "Faites-vous confiance à ce code ?" dans les sources et avertissement auto-XSS dans la console
- Points d'arrêt de l'écouteur d'événements dans les workers et les Worklets Web
- Nouveau badge multimédia pour
<audio>
et<video>
- Le préchargement a été renommé "chargement spéculatif"
- Lighthouse version 11.2.0
- Améliorations de l'accessibilité
- Points forts divers
Chrome 119
- Amélioration de la section @property dans Éléments > Styles
- Règle @property modifiable
- Des problèmes liés à des règles @property non valides sont signalés
- Mise à jour de la liste des appareils à émuler
- Imprimer de manière élégante le fichier JSON intégré dans les tags de script dans les sources
- Saisie semi-automatique des champs privés dans la console
- Lighthouse version 11.1.0
- Améliorations de l'accessibilité
- Abandon de Web SQL
- Validation du format de capture d'écran dans Application > Manifeste
- Points forts divers
Chrome 118
- Nouvelle section pour les propriétés personnalisées dans Éléments > Styles
- Améliorations supplémentaires apportées aux forçages locaux
- Amélioration des recherches
- Panneau "Sources" amélioré
- Espace de travail simplifié dans le panneau "Sources"
- Réorganiser les volets dans les sources
- Mise en surbrillance de la syntaxe et mise en page élégante pour davantage de types de scripts
- Émuler la fonctionnalité multimédia "preferred-reduced-transparency"
- Lighthouse 11
- Améliorations de l'accessibilité
- Points forts divers
Chrome 117
- Améliorations apportées au panneau "Réseau"
- Remplacer le contenu Web localement encore plus rapidement
- Remplacer le contenu des requêtes XHR et de récupération
- Masquer les demandes d'extension Chrome
- Codes d'état HTTP lisibles par l'humain
Paramètres des sources activés par défaut: pliage du code et affichage automatique des fichiers
Amélioration du débogage des problèmes liés aux cookies tiers
L'extension de débogage C/C++ WebAssembly pour les outils de développement est désormais Open Source
(Expérimental) Nouvelle émulation du rendu: preferences-reduced-transparency
Chrome 116
- Amélioration du débogage des feuilles de style manquantes
- Ajout de temps linéaire dans Éléments > Styles > Éditeur de lissage de vitesse
- Compatibilité des buckets de stockage et vue des métadonnées
- Lighthouse version 10.3.0
- Accessibilité: commandes au clavier et amélioration de la lecture d'écran
- Points forts divers
Chrome 115
- Améliorations apportées aux éléments
- Nouveau badge de sous-grille CSS
- Spécificité du sélecteur dans les info-bulles
- Valeurs des propriétés CSS personnalisées dans les info-bulles
- Améliorations des sources
- Mise en surbrillance de la syntaxe CSS
- Raccourci pour définir des points d'arrêt conditionnels
- Application > Mesures d'atténuation du suivi des rebonds
- Lighthouse version 10.2.0
- Ignorer les scripts de contenu par défaut
- Réseau > Améliorations de la réponse
- Points forts divers
Chrome 114
- Assistance au débogage WebAssembly
- Amélioration du comportement de pas dans les applications Wasm
- Déboguer la saisie automatique à l'aide du panneau "Éléments" et de l'onglet "Problèmes"
- Assertions dans l'Enregistreur
- Lighthouse version 10.1.1
- Amélioration des performances
- performance.mark() affiche les codes temporels en pointant sur Performances > Chronologies
- La commande profile() insère Performances > Principal.
- Avertissement en cas d'interactions utilisateur lentes
- Informations concernant les signaux Web
- Abandon du Profileur JavaScript: phase 3
- Points forts divers
Chrome 113
- Remplacer les en-têtes de réponse du réseau
- Améliorations de débogage de Nuxt, Vite et Rollup
- Améliorations CSS dans Éléments > Styles
- Propriétés et valeurs CSS non valides
- Liens vers les images clés dans la propriété du raccourci d'animation
- Nouveau paramètre de la console: saisie semi-automatique à la saisie
- Le menu Commandes met en avant les fichiers créés.
- Abandon du profileur JavaScript: étape 2
- Points forts divers
Chrome 112
- Mises à jour de l'Enregistreur
- Extensions de relecture de l'Enregistreur
- Enregistrer avec des sélecteurs de pierce
- Exporter les enregistrements sous forme de scripts Puppeteer avec l'analyse Lighthouse
- Obtenir des extensions pour l'Enregistreur
- Éléments > Mises à jour des styles
- Documentation CSS dans le volet "Styles"
- Compatibilité avec l'imbrication CSS
- Marquer des points de journalisation et des points d'arrêt conditionnels dans la console
- Ignorer les scripts non pertinents lors du débogage
- Abandon du profileur JavaScript
- Émuler le contraste réduit
- Lighthouse 10
- Points forts divers
Chrome 111
- Déboguer les couleurs HD avec le volet "Styles"
- Expérience utilisateur améliorée pour les points d'arrêt
- Raccourcis personnalisables dans l'Enregistreur
- Amélioration de la mise en évidence de la syntaxe pour Angular
- Réorganiser les caches dans le panneau "Application"
- Points forts divers
Chrome 110
- Suppression du panneau "Performances" lors de l'actualisation
- Mises à jour de l'Enregistreur
- Afficher et mettre en surbrillance le code de votre parcours utilisateur dans l'Enregistreur
- Personnaliser les types de sélecteurs d'un enregistrement
- Modifier le parcours utilisateur pendant l'enregistrement
- Impression élégante sur place
- Amélioration de la mise en surbrillance de la syntaxe et de l'aperçu intégré pour Vue, SCSS, etc.
- Saisie semi-automatique économe et cohérente dans la console
- Points forts divers
Chrome 109
- Enregistreur: copier en tant qu'options pour les pas, la relecture sur la page et le menu contextuel d'une étape
- Afficher le nom réel des fonctions dans les enregistrements des performances
- Nouveaux raccourcis clavier dans le panneau "Console et sources"
- Amélioration du débogage JavaScript
- Points forts divers
- [Expérimental] Amélioration de l'expérience utilisateur pour la gestion des points d'arrêt
- [Expérimental] Impression élégante et automatique sur place
Chrome 108
- Conseils pour les propriétés CSS inactives
- Détecter automatiquement les sélecteurs de texte et XPath dans le panneau "Enregistreur"
- Passer en revue les expressions séparées par une virgule
- Amélioration du paramètre "Liste d'éléments à ignorer"
- Points forts divers
Chrome 107
- Personnaliser les raccourcis clavier dans les outils de développement
- Activer/Désactiver les thèmes clair et sombre avec le raccourci clavier
- Mettre en surbrillance les objets C/C++ dans l'outil d'inspection de mémoire
- Assurer la compatibilité avec les informations complètes de l'initiateur pour l'importation HAR
- Lancer une recherche DOM après avoir appuyé sur
Enter
- Afficher les icônes
start
etend
pour les propriétés CSSalign-content
- Points forts divers
Chrome 106
- Regrouper les fichiers par création / déployé dans le panneau "Sources"
- Traces de pile associées pour les opérations asynchrones
- Ignorer automatiquement les scripts tiers connus
- Amélioration de la pile d'appel pendant le débogage
- Masquer les sources de la liste des éléments à ignorer dans le panneau "Sources"
- Masquer les fichiers de la liste des éléments à ignorer dans le menu de commande
- Nouveau suivi des interactions dans le panneau "Performances"
- Répartition des durées LCP dans le panneau "Insights sur les performances"
- Générer automatiquement un nom par défaut pour les enregistrements dans le panneau "Enregistreur"
- Points forts divers
Chrome 105
- Lecture détaillée dans l'Enregistreur
- Permettre le survol avec la souris sur un événement dans le panneau "Enregistreur"
- LCP (Largest Contentful Paint) dans le panneau "Insights sur les performances"
- Identifier les flashs de texte (FOIT, FOUT) comme causes potentielles de décalages de mise en page
- Gestionnaires de protocole dans le volet "Manifeste"
- Badge du calque supérieur dans le panneau "Elements"
- Joindre les informations de débogage Wasm au moment de l'exécution
- Prendre en charge la modification en temps réel pendant le débogage
- Afficher et modifier les règles @scope du volet "Styles"
- Améliorations apportées à la carte source
- Points forts divers
Chrome 104
- Redémarrer le frame pendant le débogage
- Options de relecture lente dans le panneau "Enregistreur"
- Créer une extension pour le panneau "Enregistreur"
- Regrouper les fichiers par création / déployé dans le panneau "Sources"
- Nouveau suivi "Temps utilisateur" dans le panneau "Insights sur les performances"
- Afficher l'emplacement attribué à un élément
- Simuler la simultanéité matérielle pour les enregistrements Performance
- Prévisualiser les valeurs qui ne sont pas de couleur lors de la saisie semi-automatique des variables CSS
- Identifier les frames bloquants dans le volet du cache amélioré
- Amélioration des suggestions de saisie semi-automatique pour les objets JavaScript
- Améliorations apportées aux cartes sources
- Points forts divers
Chrome 103
- Capturez les événements de double-clic et de clic droit dans le panneau "Enregistreur"
- Nouvelle période et mode Instantané dans le panneau Lighthouse
- Contrôle du zoom amélioré dans le panneau "Insights sur les performances"
- Confirmer la suppression d'un enregistrement de performance
- Réorganiser les volets dans le panneau "Elements"
- Choisir une couleur en dehors du navigateur
- Amélioration de l'aperçu de la valeur intégrée lors du débogage
- Compatibilité avec les blobs volumineux pour les authentificateurs virtuels
- Nouveaux raccourcis clavier dans le panneau "Sources"
- Améliorations apportées aux cartes sources
Chrome 102
- Fonctionnalité en preview: nouveau panneau "Insights sur les performances"
- Nouveaux raccourcis pour émuler les thèmes clair et sombre
- Amélioration de la sécurité dans l'onglet "Aperçu sur le réseau"
- Amélioration de l'actualisation au point d'arrêt
- Mises à jour de la console
- Annuler l'enregistrement du parcours utilisateur au démarrage
- Afficher les pseudo-éléments de mise en surbrillance hérités dans le volet "Styles"
- Points forts divers
- [Expérimental] Copier les modifications CSS
- [Expérimental] Choisir une couleur en dehors du navigateur
Chrome 101
- Importer et exporter des parcours utilisateur enregistrés sous forme de fichier JSON
- Afficher les calques en cascade dans le volet "Styles"
- Compatibilité avec la fonction de couleur
hwb()
- Amélioration de l'affichage des propriétés privées
- Points forts divers
- [Expérimental] Nouvelle période et nouveau mode Instantané dans le panneau Lighthouse
Chrome 100
- Afficher et modifier les @prises en charge dans les règles du volet "Styles"
- Prendre en charge les sélecteurs courants par défaut
- Personnaliser le sélecteur d'enregistrement
- Renommer un enregistrement
- Prévisualiser les propriétés d'une classe/fonction lorsque l'utilisateur pointe dessus
- Images partiellement présentées dans le panneau "Performances"
- Points forts divers
Chrome 99
- Limiter les requêtes WebSocket
- Volet de la nouvelle API Reporting dans le panneau "Application"
- Prise en charge de l'attente jusqu'à ce que l'élément soit visible/cliquable dans le panneau "Enregistreur"
- Amélioration du style, du formatage et du filtrage dans la console
- Déboguer l'extension Chrome avec les fichiers de carte source
- Amélioration de l'arborescence des dossiers sources dans le panneau "Sources"
- Afficher les fichiers sources des workers dans le panneau des sources
- Mises à jour du thème sombre automatique dans Chrome
- Sélecteur de couleur et volet fractionné intuitifs
- Points forts divers
Chrome 98
- Fonctionnalité en preview: arborescence d'accessibilité pleine page
- Modifications plus précises dans l'onglet "Modifications"
- Définir un délai plus long pour l'enregistrement du parcours utilisateur
- Assurez-vous que vos pages peuvent être mises en cache à l'aide de l'onglet "Cache amélioré"
- Nouveau filtre du volet des propriétés
- Émuler la caractéristique média CSS "force-colors"
- Afficher les règles en cas de survol avec la souris
- Prendre en charge
row-reverse
etcolumn-reverse
dans l'éditeur Flexbox - Nouveaux raccourcis clavier pour répéter XHR et développer tous les résultats de recherche
- Lighthouse 9 dans le panneau "Lighthouse"
- Panneau "Sources" amélioré
- Points forts divers
- [Expérimental] Points de terminaison dans le volet de l'API Reporting
Chrome 97
- Fonctionnalité en preview: nouveau panneau "Enregistreur"
- Actualiser la liste des appareils en mode Appareil
- Saisie semi-automatique avec la fonctionnalité Modifier au format HTML
- Amélioration de l'expérience de débogage du code
- Synchronisation des paramètres des outils de développement sur plusieurs appareils
Chrome 96
- Fonctionnalité en preview: nouveau panneau "Présentation du CSS"
- Restauration et amélioration de l'expérience de modification et de copie de la longueur CSS
- Émuler la caractéristique média CSS "prefers-contrast"
- Émuler le thème sombre automatique de Chrome
- Copier les déclarations au format JavaScript dans le volet "Styles"
- Nouvel onglet "Charge utile" dans le panneau "Network"
- Amélioration de l'affichage des propriétés dans le volet "Propriétés"
- Option permettant de masquer les erreurs CORS dans la console
- Aperçu et évaluation des objets
Intl
appropriés dans la console - Traces de pile asynchrones cohérentes
- Conserver la barre latérale de la console
- Volet du cache d'application obsolète dans le panneau "Application"
- [Expérimental] Nouveau volet "API Reporting" dans le panneau "Application"
Chrome 95
- Nouveaux outils de création de longueur CSS
- Masquer les problèmes dans l'onglet "Problèmes"
- Amélioration de l'affichage des propriétés
- Lighthouse 8.4 dans le panneau "Lighthouse"
- Trier les extraits dans le panneau "Sources"
- Nouveaux liens vers les notes de version traduites et signalement d'un bug de traduction
- Amélioration de l'interface utilisateur pour le menu de commandes des outils de développement
Chrome 94
- Utiliser les outils de développement dans la langue de votre choix
- Nouveaux appareils Nest Hub dans la liste des appareils
- Phases d'évaluation dans la vue Détails du frame
- Nouveau badge "Requêtes de conteneur CSS"
- Nouvelle case à cocher pour inverser les filtres réseau
- La barre latérale de la console sera bientôt abandonnée
- Afficher les en-têtes
Set-Cookies
bruts dans l'onglet "Problèmes" et le panneau "Réseau" - Accesseurs natifs d'affichage cohérents en tant que propriétés propres dans la console
- Traces de pile d'erreurs appropriées pour les scripts intégrés avec #sourceURL
- Modifier le format de couleur dans le volet "Calculé"
- Remplacer les info-bulles personnalisées par des info-bulles HTML natives
- [Expérimental] Masquer les problèmes dans l'onglet "Problèmes"
Chrome 93
- Requêtes de conteneur CSS modifiables dans le volet "Styles"
- Aperçu du Web bundle dans le panneau "Network"
- Débogage de l'API Attribution Reporting
- Gestion améliorée des chaînes dans la console
- Amélioration du débogage CORS
- Lighthouse 8.1
- Nouvelle URL de note dans le volet "Manifeste"
- Correction des sélecteurs de correspondance CSS
- Mettre en valeur les réponses JSON dans le panneau "Network" (Réseau)
Chrome 92
- Éditeur de grille CSS
- Prise en charge des redéclarations de
const
dans la console - Lecteur de l'ordre source
- Nouveau raccourci pour afficher les détails du frame
- Amélioration de la compatibilité au débogage CORS
- Renommer l'étiquette XHR en Fetch/XHR
- Filtrer le type de ressource Wasm dans le panneau "Network"
- Indices client User-Agent pour les appareils dans l'onglet "Conditions du réseau"
- Signaler des problèmes du mode Quirks dans l'onglet "Problèmes"
- Inclure le calcul des intersections dans le panneau "Performances"
- Lighthouse 7,5 dans le panneau "Lighthouse"
- Abandon du menu contextuel "Redémarrer le cadre" dans la pile d'appel
- [Expérimental] Moniteur de protocole
- [Expérimental] Enregistreur Puppeteer
Chrome 91
- Fenêtre pop-up d'informations sur les signaux Web
- Nouvel outil d'inspection de mémoire
- Visualiser l'extrait CSS Scroll-Snap
- Volet des nouveaux paramètres du badge
- Aperçu d'image amélioré avec des informations sur le format
- Bouton "Nouvelles conditions du réseau" avec des options permettant de configurer des
Content-Encoding
- raccourci pour afficher la valeur calculée
- Mot clé
accent-color
- Classer les types de problèmes à l'aide de couleurs et d'icônes
- Supprimer les jetons de confiance
- Fonctionnalités bloquées dans la vue détaillée du frame
- Filtrer les tests dans les paramètres "Tests"
- Nouvelle colonne
Vary Header
dans le volet de stockage du cache - Compatibilité avec la vérification privée de la marque JavaScript
- Compatibilité améliorée avec le débogage des points d'arrêt
- Prendre en charge l'aperçu de survol avec la notation
[]
- Amélioration du contour des fichiers HTML
- Traces de pile d'erreurs appropriées pour le débogage Wasm
Chrome 90
- Nouveaux outils de débogage CSS Flexbox
- Nouvelle superposition Core Web Vitals
- Nombre de problèmes déplacé dans la barre d'état de la console
- Signaler des problèmes liés à l'activité Web fiable
- Formater les chaînes en tant que littéraux de chaîne JavaScript (valides) dans la console
- Volet "New Trust Tokens" (Nouveaux jetons de confiance) du panneau "Application"
- Émuler la caractéristique média CSS "color-gamut"
- Amélioration des outils pour les progressive web apps
- Nouvelle colonne
Remote Address Space
dans le panneau "Network" - Amélioration des performances
- Afficher les fonctionnalités autorisées/non autorisées dans la vue "Détails du frame"
- Nouvelle colonne
SameParty
dans le volet "Cookies" - La compatibilité non standard avec
fn.displayName
a été abandonnée - Abandon de
Don't show Chrome Data Saver warning
dans le menu "Paramètres" - [Expérimental] Création automatique de rapports sur les problèmes de faible contraste dans l'onglet "Problèmes"
- [Expérimental] Arborescence d'accessibilité complète dans le panneau "Elements"
Chrome 89
- Déboguer les cas de non-respect des Trusted Types
- Capturer un nœud au-delà de la fenêtre d'affichage
- Nouvel onglet "Jetons de confiance" pour les requêtes réseau
- Lighthouse 7 dans le panneau "Lighthouse"
- Compatibilité avec le forçage de l'état CSS
:target
- Nouveau raccourci pour dupliquer l'élément
- Sélecteurs de couleur pour les propriétés CSS personnalisées
- Nouveaux raccourcis pour copier les propriétés CSS
- Nouvelle option pour afficher les cookies décodés par l'URL
- Effacer uniquement les cookies visibles
- Nouvelle option pour effacer les cookies tiers dans le volet "Stockage"
- Modifier les indicateurs client User-Agent pour les appareils personnalisés
- Conserver le paramètre "Enregistrer le journal réseau"
- Afficher les connexions WebTransport dans le panneau "Network" (Réseau)
- "Online" a été renommé "No throttling" (Pas de limitation).
- Nouvelles options de copie dans la console, les panneaux "Sources" et le volet "Styles"
- Nouvelles informations sur les service workers dans la vue détaillée du frame
- Mesurer les informations sur la mémoire dans la vue Détails de l'image
- Envoyer des commentaires depuis l'onglet "Problèmes"
- Suppression des frames dans le panneau "Performances"
- Émuler les appareils pliables et double écran en mode Appareil
- [Expérimental] Automatiser les tests sur navigateur avec Puppeteer Recorder
- [Expérimental] Éditeur de police dans le volet "Styles"
- [Expérimental] Outils de débogage CSS Flexbox
- [Expérimental] Nouvel onglet "Cas de non-respect des règles CSP"
- [Expérimental] Nouveau calcul du contraste des couleurs : algorithme avancé de contraste perceptuel (APCA)
Chrome 88
- Démarrage plus rapide des outils de développement
- Nouveaux outils de visualisation de l'angle CSS
- Émuler les types d'images non compatibles
- Simuler la taille du quota de stockage dans le volet "Storage" (Stockage)
- Nouvelle section "Signaux Web" dans le panneau "Performances"
- Signaler des erreurs CORS dans le panneau "Network" (Réseau)
- Informations sur l'isolation multi-origine dans la vue "Détails du frame"
- Informations sur les nouveaux travailleurs Web dans la vue "Détails du frame"
- Afficher les détails du cadre de l'ouverture pour les fenêtres ouvertes
- Ouvrir le panneau "Network" (Réseau) à partir du volet Service Workers
- Copier la valeur de la propriété
- Copier la trace de la pile pour l'initiateur réseau
- Prévisualiser la valeur de la variable Wasm lors du survol avec la souris
- Évaluer la variable Wasm dans la console
- Unités de mesure cohérentes pour les tailles de fichier/mémoire
- Mettre en surbrillance des pseudo-éléments dans le panneau "Elements"
- [Expérimental] Outils de débogage CSS Flexbox
- [Expérimental] Personnaliser les raccourcis clavier des accords
Chrome 87
- Nouveaux outils de débogage de la grille CSS
- Nouvel onglet WebAuthn
- Déplacer les outils entre le panneau supérieur et le panneau inférieur
- Nouveau volet de la barre latérale "Calculé" dans le volet "Styles"
- Regrouper des propriétés CSS dans le volet "Calculé"
- Lighthouse 6.3 dans le panneau "Lighthouse"
- Événements
performance.mark()
dans la section "Durée" - Nouveaux filtres
resource-type
eturl
dans le panneau "Network" - Mises à jour de la vue détaillée du frame
- Abandon de
Settings
dans le menu "Plus d'outils" - [Expérimental] Afficher et résoudre les problèmes de contraste des couleurs dans le panneau "Aperçu" de CSS
- [Expérimental] Personnaliser les raccourcis clavier dans les Outils de développement
Chrome 86
- Nouveau panneau multimédia
- Faire des captures d'écran de nœuds à l'aide du menu contextuel du panneau "Éléments"
- Mises à jour de l'onglet "Problèmes"
- Émuler les polices locales manquantes
- Émuler les utilisateurs inactifs
- Émuler
prefers-reduced-data
- Compatibilité avec les nouvelles fonctionnalités JavaScript
- Lighthouse 6.2 dans le panneau "Lighthouse"
- Abandon de la liste "Autres origines" dans le volet Service Workers
- Afficher un récapitulatif de la couverture pour les éléments filtrés
- Nouvelle vue des détails du frame dans le panneau "Application"
- Suggestion de couleur accessible dans le volet "Styles"
- Rétablir le volet Properties (Propriétés) du panneau "Elements"
- Valeurs d'en-tête
X-Client-Data
lisibles dans le panneau "Network" - Utiliser la saisie semi-automatique pour les polices personnalisées dans le volet "Styles"
- Affichage cohérent du type de ressource dans le panneau "Réseau"
- Effacer les boutons des panneaux "Éléments" et "Réseau"
Chrome 85
- Modification du style pour les frameworks CSS-in-JS
- Lighthouse 6 dans le panneau "Lighthouse"
- Abandon de First Meaningful Paint (FMP)
- Compatibilité avec les nouvelles fonctionnalités JavaScript
- Nouveaux avertissements de raccourcis d'appli dans le volet "Manifeste"
- Événements
respondWith
du service worker dans l'onglet "Timing" - Affichage cohérent du volet "Calculé"
- Décalages de bytecode pour les fichiers WebAssembly
- Copie et coupe au niveau de la ligne dans le panneau "Sources"
- Mises à jour des paramètres de la console
- Informations concernant le panneau "Performances"
- Nouvelles icônes pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation
Chrome 84
- Résoudre les problèmes du site à l'aide du nouvel onglet "Problèmes"
- Afficher les informations d'accessibilité dans l'info-bulle du mode Inspecter
- Informations concernant le panneau "Performances"
- Terminologie plus précise pour les promesses dans la console
- Mises à jour du volet "Styles"
- Abandon du volet Properties (Propriétés) du panneau "Elements"
- Prise en charge des raccourcis d'application dans le volet "Manifeste"
Chrome 83
- Émuler les déficiences visuelles
- Émuler les paramètres régionaux
- Débogage COEP (Cross-Origin Embedder Policy)
- Nouvelles icônes pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation
- Afficher les requêtes réseau qui définissent un cookie spécifique
- Station d'accueil à gauche depuis le menu de commandes
- L'option "Paramètres" du menu principal a été déplacée
- Le panneau "Audits" devient le panneau Lighthouse
- Supprimer tous les remplacements locaux dans un dossier
- Interface utilisateur des tâches longues mise à jour
- Compatibilité des icônes masquées dans le volet "Manifeste"
Chrome 82
Chrome 81
- Compatibilité du Moto G4 en mode Appareil
- Informations concernant les cookies
- Icônes plus précises du fichier manifeste d'application Web
- Pointez sur les propriétés CSS
content
pour afficher les valeurs sans échappement - Erreurs de mappage source dans la console
- Paramètre permettant de désactiver le défilement après la fin d'un fichier
Chrome 80
- Prise en charge des redéclarations
let
etclass
dans la console - Amélioration du débogage de WebAssembly
- Demander des chaînes d'initiateurs dans l'onglet "Initiateur"
- Mettre en surbrillance la requête réseau sélectionnée dans la vue d'ensemble
- Colonnes d'URL et de chemin d'accès dans le panneau "Network"
- Chaînes user-agent mises à jour
- Nouvelle interface utilisateur de configuration du panneau "Audits"
- Modes de couverture de code par fonction ou par bloc
- La couverture de code doit désormais être lancée par une actualisation de la page
Chrome 79
- Déterminer pourquoi un cookie a été bloqué
- Afficher les valeurs des cookies
- Simule différents schémas de couleurs "preferred-color-scheme" et "preferreds-reduced-motion"
- Mises à jour de la couverture du code
- Identifier la raison pour laquelle une ressource réseau a été demandée
- Les panneaux "Console" et "Sources" respectent à nouveau les préférences de retrait
- Nouveaux raccourcis pour la navigation avec le curseur
Chrome 78
- Compatibilité avec les multicomptes dans le panneau "Audits"
- Débogage du gestionnaire de paiement
- Lighthouse 5.2 dans le panneau "Audits"
- Largest Contentful Paint dans le panneau "Performances"
- Problèmes liés aux outils de développement de fichiers dans le menu principal
Chrome 77
- Copier les styles des éléments
- Visualiser les décalages de mise en page
- Lighthouse 5.1 dans le panneau "Audits"
- Synchronisation des thèmes de l'OS
- Raccourci clavier pour ouvrir l'éditeur de points d'arrêt
- Précharger le cache dans le panneau "Network"
- Propriétés privées lors de l'affichage d'objets
- Notifications et messages push dans le panneau "Application"
Chrome 76
- Saisie semi-automatique avec des valeurs CSS
- Nouvelle interface utilisateur pour les paramètres réseau
- Messages WebSocket dans les exportations au format HAR
- Boutons d'importation et d'exportation au format HAR
- Utilisation de la mémoire en temps réel
- Numéros de port d'enregistrement des service workers
- Inspecter les événements de récupération en arrière-plan et de synchronisation en arrière-plan
- Puppeteer pour Firefox
Chrome 75
- Préréglages pertinents pour la saisie semi-automatique des fonctions CSS
- Effacer les données des sites depuis le menu de commandes
- Afficher toutes les bases de données IndexedDB
- Afficher la taille non compressée d'une ressource en passant la souris
- Points d'arrêt intégrés dans le volet "Breakpoints" (Points d'arrêt)
- Nombre de ressources IndexedDB et Cache
- Paramètre permettant de désactiver l'info-bulle d'inspection détaillée
- Paramètre permettant d'activer/de désactiver le retrait de la touche de tabulation dans l'éditeur
Chrome 74
- Mettre en surbrillance tous les nœuds affectés par la propriété CSS
- Lighthouse v4 dans le panneau "Audits"
- Lecteur de messages binaires WebSocket
- Faire une capture d'écran de la zone dans le menu de commandes
- Filtres de service worker dans le panneau "Network"
- Informations concernant le panneau "Performances"
- Tâches longues dans les enregistrements du panneau "Performances"
- First Paint dans la section "Durée"
- Astuce supplémentaire: Raccourci pour afficher les codes de couleur RVB et HSL (vidéo)
Chrome 73
- Points de journalisation
- Info-bulles détaillées en mode Inspecter
- Exporter les données de couverture de code
- Naviguer dans la console à l'aide d'un clavier
- Ligne de rapport de contraste AAA dans le sélecteur de couleur
- Enregistrer les remplacements de géolocalisation personnalisés
- Pliage de code
- Onglet "Frames" renommé "Messages"
- Astuce: Filtrer les panneaux réseau par propriété (vidéo)
Chrome 72
- Visualiser les métriques de performances dans le panneau "Performances"
- Mettez en surbrillance les nœuds de texte dans l'arborescence DOM
- Copiez le chemin d'accès JS dans un nœud DOM.
- Mises à jour du panneau "Audits", y compris un nouvel audit qui détecte les bibliothèques JS et les nouveaux mots clés pour accéder au panneau "Audits" à partir du menu de commandes
- Astuce supplémentaire: Utiliser le mode Appareil pour inspecter les requêtes média (vidéo)
Chrome 71
- Pointez sur un résultat d'expression active pour mettre en surbrillance un nœud DOM.
- Stocker les nœuds DOM en tant que variables globales
- Informations sur l'initiateur et la priorité désormais dans les importations et exportations HAR
- Accéder au menu "Commandes" depuis le menu principal
- Points d'arrêt Picture-in-picture
- Astuce supplémentaire: Utilisez
monitorEvents()
pour consigner les événements déclenchés d'un nœud dans la console (vidéo).
Chrome 70
- Expressions actives dans la console
- Mettre en surbrillance les nœuds DOM lors de l'évaluation eager
- Optimisations du panneau "Performances"
- Débogage plus fiable
- Activer la limitation de bande passante réseau à partir du menu Commandes
- Points d'arrêt conditionnels de la saisie semi-automatique
- Coupure sur les événements AudioContext
- Déboguer des applications Node.js avec ndb
- Astuce: Mesurez les interactions utilisateur réelles avec l'API User Timing
Chrome 68
- Évaluation impérative
- Indices d'argument
- Saisie semi-automatique des fonctions
- Mots clés ES2017
- Lighthouse 3.0 dans le panneau "Audits"
- Compatibilité avec BigInt
- Ajouter des chemins d'accès aux propriétés dans le volet de surveillance
- Déplacement de l'option "Afficher les codes temporels" dans les paramètres
- Astuce supplémentaire: Méthodes moins connues dans la console (vidéo)
Chrome 67
- Rechercher dans tous les en-têtes réseau
- Aperçus des valeurs de variables CSS
- Copier en tant qu'exploration
- Nouveaux audits, options de configuration des ordinateurs de bureau et affichage des traces
- Arrêter les boucles infinies
- Temps utilisateur dans les onglets "Performances"
- Instances de VM JavaScript clairement répertoriées dans le panneau "Mémoire"
- Onglet "Réseau" renommé "Onglet "Page"
- Modifications apportées au thème sombre
- Informations sur la transparence des certificats dans le panneau "Sécurité"
- Fonctionnalités d'isolation de sites dans le panneau "Performances"
- Astuce: panneau des calques + inspecteur d'animations (vidéo)
Chrome 66
- Blackbox dans le panneau "Network" (Réseau)
- Régler automatiquement le zoom en mode Appareil
- Impression élégante dans les onglets "Preview" (Aperçu) et "Response" (Réponse)
- Prévisualiser le contenu HTML dans l'onglet "Aperçu"
- Prise en charge des remplacements locaux pour les styles en HTML
- Astuce: Scripts du framework Blackbox pour rendre les points d'arrêt de l'écouteur d'événements plus utiles
Chrome 65
- Remplacements locaux
- Nouveaux outils d'accessibilité
- Onglet "Modifications"
- Nouveaux outils d'optimisation du référencement et d'audit des performances
- Plusieurs enregistrements dans le panneau "Performances"
- Exécution de code étape fiable avec des nœuds de calcul en code asynchrone
- Astuce bonus: Automatiser les actions des outils de développement avec Puppeteer (vidéo)
Chrome 64
- Analyseur de performances
- Barre latérale de la console
- Regrouper les messages similaires de la Console
- Astuce: Activer/Désactiver la pseudo-classe de survol (vidéo)
Chrome 63
- Assistance au débogage distant multiclient
- Workspaces 2.0
- Quatre nouveaux audits
- Simuler des notifications push avec des données personnalisées
- Déclencher des événements de synchronisation en arrière-plan à l'aide de tags personnalisés
- Astuce supplémentaire: Points d'arrêt de l'écouteur d'événements (vidéo)
Chrome 62
- Le premier niveau vous attend dans la console
- Nouveaux workflows de captures d'écran
- Mise en surbrillance de la grille CSS
- Nouvelle API Console permettant d'interroger des objets
- Nouveaux filtres de la console
- Importations HAR dans le panneau "Network"
- Ressources de cache prévisualisables
- Débogage plus prévisible du cache
- Couverture de code au niveau du bloc
Chrome 61
- Simulation de limitation de la bande passante sur les appareils mobiles
- Afficher l'utilisation de l'espace de stockage
- Afficher la date à laquelle un service worker a mis en cache les réponses
- Activer la jauge de FPS à partir du menu Commandes
- Définir le comportement de la roulette de la souris pour zoomer ou faire défiler
- Compatibilité au débogage avec les modules ES6
Chrome 60
- Nouveau panneau "Audits"
- Badges tiers
- Nouveau geste pour "Continuer vers ce lieu"
- Passer à l'approche asynchrone
- Aperçus plus détaillés des objets dans la console
- Sélection du contexte plus informative dans la console
- Informations en temps réel dans l'onglet "Couverture"
- Options de limitation de la bande passante réseau simplifiées
- Pile asynchrones activées par défaut