Bienvenue dans un nouvel article sur les notes de version des outils de développement. Regardez la vidéo ci-dessous ou lisez la suite pour découvrir les nouveautés de Chrome DevTools dans Chrome 59.
Sélection
- Couverture du code CSS et JS Retrouvez les fichiers CSS et JS inutilisés le nouvel onglet "Couverture".
- Captures d'écran de toute la page Faites une capture d'écran de l'intégralité de la page, du haut du viewport au bas.
- Bloquer les requêtes Désactivez manuellement les requêtes individuelles dans le panneau "Network".
- Ignorez l'attente asynchrone. Parcourez les fonctions asynchrones de manière prévisible.
- Menu de commandes unifiées. Exécutez des commandes et ouvrez des fichiers à partir du nouveau menu de commandes unifié.
Nouvelles fonctionnalités
Couverture du code CSS et JS
Recherchez le code CSS et JavaScript inutilisé dans le nouvel onglet Couverture. Lorsque vous chargez ou exécutez une page, l'onglet indique la quantité de code utilisée par rapport à la quantité chargée. Vous pouvez réduire la taille de vos pages en n'exportant que le code dont vous avez besoin.
Cliquez sur une URL pour afficher ce fichier dans le panneau Sources, avec une répartition des lignes de code exécutées.
Chaque ligne de code est associée à un code couleur:
- Le vert fixe signifie que la ligne de code a été exécutée.
- Le rouge fixe signifie qu'il n'a pas été exécuté.
- Une ligne de code rouge et verte, comme la ligne 3 dans la capture d'écran ci-dessus,
signifie que seul une partie du code
de cette ligne est exécuté. Par exemple, une expression ternaire telle que
var b = (a > 0) ? a : 0
est de couleur rouge et verte.
Pour ouvrir l'onglet Couverture:
- Ouvrez le menu Command (Commande).
- Commencez à saisir
Coverage
, puis sélectionnez Afficher la couverture.
Captures d'écran de toute la page
Regardez la vidéo ci-dessous pour découvrir comment faire une capture d'écran du haut de la page jusqu'en bas.
Bloquer des requêtes
Vous souhaitez voir comment votre page se comporte lorsqu'un script, une feuille de style ou une autre ressource spécifique n'est pas disponible ? Effectuez un clic droit sur la demande dans le panneau Network (Réseau), puis sélectionnez Block Request URL (Bloquer l'URL de la requête). Un nouvel onglet Blocage des demandes s'affiche dans le panneau, ce qui vous permet de gérer les requêtes bloquées.
Ignorer l'attente asynchrone
Jusqu'à présent, essayer de parcourir du code comme dans l'extrait ci-dessous
des maux de tête. Vous vous trouvez au milieu de test()
, à ne pas dépasser une ligne, puis
vous risquez d'être interrompu par le code setInterval()
. Maintenant, lorsque
vous parcourez
code asynchrone comme test()
, les outils de développement passent de la première à la dernière ligne avec
la cohérence.
function wait(ms) {
return new Promise(r => setTimeout(r, ms)).then(() => "Yay");
}
// do some work in background.
setInterval(() => 42, 200);
async function test() {
debugger;
const hello = "world";
const response = await fetch('index.html');
const tmp = await wait(1000);
console.log(tmp);
return hello;
}
async function runTest() {
let result = await test();
console.log(result);
}
P.S. – Vous souhaitez améliorer vos compétences en débogage ? Consultez ces documents récents :
- Premiers pas avec le débogage JS
- Pauser votre code avec des points d'arrêt
- Référence de débogage JavaScript
Modifications
Menu de commandes unifié
Lorsque vous ouvrez le menu Command (Commande) maintenant, vous remarquerez qu'un caractère supérieur à (>
) est ajouté au début de votre commande. En effet, le menu Command a été unifié avec le menu Open File (Ouvrir un fichier), qui s'obtient avec Command+O (Mac) ou Ctrl+O (Windows, Linux).
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 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 dans les outils de développement à l'aide de l'option Autres 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 nos vidéos YouTube sur les nouveautés dans DevTools ou sur nos vidéos YouTube sur les conseils DevTools.
Nouveautés des outils de développement
Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement
- Améliorations apportées au panneau "Network"
- Filtres réseau repensés
- Les exports au format HAR excluent désormais les données sensibles par défaut
- Améliorations apportées au panneau des éléments
- Valeurs de saisie semi-automatique pour les propriétés d'accentuation du texte*
- Dépassements de défilement marqués d'un badge
- Améliorations du panneau "Performances"
- Recommandations dans les métriques sur les diffusions en direct
- Parcourir les fils d'Ariane
- Améliorations du panneau "Mémoire"
- Nouveaux "Éléments dissociés" profil
- Amélioration du nom des objets JS simples
- Désactiver la thématisation dynamique
- Chrome Test: partage de processus
- Lighthouse 12.2.1
- Informations importantes
- L'Enregistreur prend en charge l'exportation vers Puppeteer pour Firefox
- Améliorations du panneau "Performances"
- Observations en temps réel sur les métriques
- Requêtes de recherche dans le canal réseau
- Consulter les traces de la pile des appels performance.mark et performance.measure
- Utiliser des données d'adresses de test dans le panneau de saisie automatique
- Améliorations apportées au panneau des éléments
- Forcer davantage d'états pour des éléments spécifiques
- Éléments > Ajout de la saisie semi-automatique à davantage de propriétés de grille avec les styles
- Lighthouse 12.2.0
- Divers
- Insights de la console Gemini disponibles dans la plupart des pays européens
- Modifications apportées au panneau "Performances"
- Canal réseau amélioré
- Personnaliser les données de performances avec l'API d'extensibilité
- Détails dans le canal "Temps de chargement"
- Copier toutes les requêtes listées dans le panneau "Network" (Réseau)
- Snapshots de tas de mémoire plus rapides avec des balises HTML nommées et moins d'encombrement
- Ouvrir le panneau "Animations" pour capturer des animations et modifier les @keyframes en direct
- Lighthouse 12.1.0
- Améliorations liées à l'accessibilité
- Informations importantes
- Inspecter le positionnement des ancres CSS dans le panneau "Éléments"
- Améliorations apportées au panneau "Sources"
- Amélioration de la fonctionnalité "Ne jamais mettre en pause"
- Nouveaux écouteurs d'événements de repère de défilement
- Améliorations du panneau "Réseau"
- Préréglages de limitation de la bande passante mis à jour
- Informations sur le service worker dans les champs personnalisés du format HAR
- Envoyer et recevoir des événements WebSocket dans le panneau "Performances"
- Divers
- Améliorations apportées au panneau "Performances"
- Déplacer et masquer des pistes avec le nouveau mode de configuration des pistes
- Ignorer les scripts dans le graphique de flammes
- Réduire la capacité du processeur par 20
- Le panneau "Insights sur les performances" va être abandonné
- Déterminer une utilisation excessive de la mémoire grâce à de nouveaux filtres dans les instantanés de tas
- Inspecter les buckets de stockage dans Application > Stockage
- Désactiver les avertissements d'auto-XSS à l'aide d'un indicateur de ligne de commande
- Lighthouse 12.0.0
- Divers
- 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 l'affichage soigné automatique et la fermeture des crochets
- Les promesses refusées traitées sont reconnues comme étant interceptées.
- Causes d'erreur dans la console
- Améliorations du panneau "Réseau"
- Inspecter les en-têtes des premiers indices
- Masquer la colonne "Cascade"
- Améliorations apportées au panneau "Performances"
- Capturer les statistiques du sélecteur CSS
- Modifier l'ordre et masquer des pistes
- Ignorer les retiens dans le panneau "Mémoire"
- Lighthouse 11.7.1
- Informations importantes
- 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"
- Amélioration de la 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 des initiateurs sélectionnés vers les événements qu'ils ont déclenchés
- Lighthouse 11.6.0
- Info-bulles pour les catégories spéciales dans Mémoire > Instantanés de tas de mémoire
- Application > Mises à jour de l'espace de stockage
- Octets utilisés pour le stockage partagé
- Web SQL est complètement obsolète
- Améliorations apportées au panneau de couverture
- Le panneau des calques risque d'être abandonné
- Abandon du Profileur JavaScript: phase 4, finale
- Informations importantes
- Trouver l'œuf de Pâques
- Mises à jour du panneau "Éléments"
- Émuler une page sélectionnée dans Éléments > Styles
- Sélecteur de couleur, horloge angulaire et éditeur d'atténuation dans les solutions de remplacement
var()
- L'outil de longueur CSS est obsolète
- Volet pop-up du résultat de recherche sélectionné dans "Performances > Canal principal"
- Mises à jour du panneau "Network" (Réseau)
- Bouton "Effacer" et filtre de recherche sous "Réseau" > Onglet "EventStream"
- Info-bulles pour les motifs d'exception pour les cookies tiers dans Réseau > Cookies
- Activer et désactiver tous les points d'arrêt dans "Sources"
- Afficher les scripts chargés dans les outils de développement pour Node.js
- Lighthouse 11.5.0
- Améliorations liées à l'accessibilité
- Divers
- La collection officielle d'extensions Enregistreur est disponible
- Améliorations du réseau
- Motif de l'échec indiqué dans la colonne "État"
- Sous-menu "Copier" amélioré
- Amélioration des performances
- Fils d'Ariane dans Vos trajets
- Initiateurs d'événements sur le canal principal
- Menu de sélection d'instances de VM JavaScript pour les outils de développement Node.js
- Nouveau raccourci et nouvelle commande dans les sources
- Améliorations apportées aux éléments
- Le pseudo-élément ::view-transition est désormais modifiable dans "Styles".
- Compatibilité de la propriété align-content avec les conteneurs de blocs
- Compatibilité avec les positions des appareils pliables émulés
- Thématisation dynamique
- Avertissements d'arrêt progressif des cookies tiers dans les panneaux "Réseau" et "Application"
- Lighthouse 11.4.0
- Améliorations de l'accessibilité
- Divers
- Améliorations apportées aux éléments
- Barre de filtre simplifiée dans le panneau "Network"
- Compatibilité
@font-palette-values
- Cas accepté: propriété personnalisée en remplacement d'une autre propriété personnalisée
- Compatibilité améliorée avec les cartes sources
- Améliorations du panneau "Performances"
- Suivi avancé des interactions
- Filtrage avancé dans les onglets "De bas en haut", "Arbre d'appels" et "Journal des événements"
- Repères d'indentation dans le panneau "Sources"
- Info-bulles utiles pour les en-têtes et le contenu remplacés dans le panneau "Network"
- Nouvelles options du menu de commande pour ajouter et supprimer des schémas de blocage des requêtes
- Le test des cas de non-respect des CSP est supprimé
- Lighthouse 11.3.0
- Améliorations de l'accessibilité
- Divers
- Suppression progressive des cookies tiers
- Analyser les cookies de votre site Web avec Privacy Sandbox Analysis Tool
- Ignorer la fiche améliorée
- Modèle d'exclusion par défaut pour node_modules
- Les exceptions interceptées arrêtent désormais l'exécution si elles sont interceptées ou si elles passent par du code non ignoré.
x_google_ignoreList
a été renomméignoreList
dans les mappages sources- Nouveau bouton d'activation/désactivation du mode de saisie lors du débogage à distance
- Le panneau "Éléments" affiche désormais les URL des nœuds #document
- Stratégie de sécurité du contenu effective dans le panneau "Application"
- Amélioration du débogage des animations
- "Faites-vous confiance à ce code ?" boîte de dialogue "Sources" et avertissement auto-XSS dans la console
- Points d'arrêt des écouteurs d'événements dans les workers Web et les Worklets
- Nouveau badge multimédia pour
<audio>
et<video>
- Le préchargement est renommé "Chargement spéculatif".
- Lighthouse 11.2.0
- Améliorations de l'accessibilité
- Divers
- Amélioration de la section "@property" dans Éléments > Styles
- Règle @property modifiable
- Des problèmes liés à des règles @de propriété non valides sont signalés
- Mise à jour de la liste des appareils à émuler
- Faire une mise en forme élégante du code JSON dans les tags de script dans la section "Sources"
- Saisir semi-automatiquement les champs privés dans la console
- Lighthouse 11.1.0
- Améliorations liées à l'accessibilité
- Abandon de Web SQL
- Validation du format des captures d'écran dans Application > Fichier manifeste
- Informations importantes
- Nouvelle section pour les propriétés personnalisées dans Éléments > Styles
- Amélioration des forçages locaux supplémentaires
- Recherche avancée
- Panneau "Sources" amélioré
- Espace de travail simplifié dans le panneau "Sources"
- Réorganiser les volets dans "Sources"
- Mise en surbrillance de la syntaxe et mise en forme pour plus de types de scripts
- Émuler la caractéristique média prefers-reduced-transparency
- Lighthouse 11
- Améliorations liées à l'accessibilité
- Informations importantes
- Améliorations du 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
Appliquer le format correct des réponses pour les sous-types JSON
Performances: consultez les modifications de la priorité d'extraction des événements réseau
- Paramètres des sources activés par défaut : repliage du code et affichage automatique des fichiers
- Amélioration du débogage des problèmes liés aux cookies tiers
- Nouveaux coloris
- Lighthouse 10.4.0
- Déboguer le préchargement dans le panneau "Application"
- L'extension de débogage WebAssembly C/C++ pour les outils de développement est désormais Open Source
- Divers
- (Expérimental) Nouvelle émulation de rendu : prefers-reduced-transparency
- (Expérimental) Surveillance améliorée du protocole
- Amélioration du débogage des feuilles de style manquantes
- Compatibilité avec le timing linéaire dans Éléments > Styles > Éditeur d'atténuation
- Compatibilité avec les buckets de stockage et vue des métadonnées
- Lighthouse 10.3.0
- Accessibilité: commandes au clavier et meilleure lecture d'écran
- Divers
- Améliorations apportées aux éléments
- Nouveau badge de sous-grille CSS
- Spécificité des sélecteurs dans les info-bulles
- Valeurs des propriétés CSS personnalisées dans les info-bulles
- Améliorations apportées aux 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 10.2.0
- Ignorer les scripts de contenu par défaut
- Réseau > Amélioration des réponses
- Informations importantes
- Assistance au débogage WebAssembly
- Amélioration du comportement des pas effectués 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 10.1.1
- Améliorations des performances
- performance.mark() affiche le temps de suspension dans Performances > Temps
- profile() remplit Performance > Principal
- Avertissement en cas d'interactions utilisateur lentes
- Mises à jour de Web Vitals
- Abandon du Profileur JavaScript: phase 3
- Divers
- Forcer les en-têtes de réponse réseau
- Améliorations du débogage de Nuxt, Vite et de Rollup
- Améliorations CSS dans Éléments > Styles
- Propriétés et valeurs CSS non valides
- Liens vers des images clés dans la propriété de raccourci de l'animation
- Nouveau paramètre de la console: saisie semi-automatique lors de la saisie
- Le menu de commandes met en avant les fichiers créés
- Abandon du profileur JavaScript : deuxième étape
- Divers
- Mises à jour de l'Enregistreur
- Extensions de relecture de l'Enregistreur
- Enregistrer avec des sélecteurs Pierce
- Exporter des enregistrements sous forme de scripts Puppeteer grâce à l'analyse Lighthouse
- Obtenir des extensions pour l'Enregistreur
- Éléments > Modifications apportées aux styles
- Documentation CSS dans le volet "Styles"
- Prise en charge de l'imbrication CSS
- Marquer des points de journalisation et des points d'arrêt conditionnels dans la console
- Ignorer les scripts non pertinents pendant le débogage
- Début de l'abandon du profileur JavaScript
- Émuler le contraste réduit
- Lighthouse 10
- Divers
- Déboguer la couleur HD avec le volet "Styles"
- Expérience utilisateur améliorée pour les points d'arrêt
- Raccourcis personnalisables de l'Enregistreur
- Amélioration de la mise en surbrillance de la syntaxe pour Angular
- Réorganiser les caches dans le panneau "Application"
- Informations importantes
- 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 et automatique sur place
- Meilleure mise en surbrillance de la syntaxe et aperçu intégré pour Vue, SCSS et plus encore
- Saisie semi-automatique ergonomique et cohérente dans la console
- Divers
- Enregistreur : options de copie pour les étapes, lecture sur la page, menu contextuel de l'étape
- Afficher les noms de fonction réels dans les enregistrements des performances
- Nouveaux raccourcis clavier dans le panneau "Console et sources"
- Débogage JavaScript amélioré
- Informations importantes
- [Expérimental] Amélioration de l'expérience utilisateur dans la gestion des points d'arrêt
- [Expérimental] Mise en forme automatique sur place
- Conseils pour les propriétés CSS inactives
- Détection automatique des chemins XPath et des sélecteurs de texte dans le panneau "Enregistreur"
- Examiner les expressions séparées par une virgule
- Amélioration du paramètre "Liste d'éléments ignorés"
- Informations importantes
- Personnaliser les raccourcis clavier dans les outils de développement
- Basculer entre les thèmes clair et sombre à l'aide du raccourci clavier
- Mettre en surbrillance des objets C/C++ dans l'outil d'inspection de la mémoire
- Compatibilité avec les informations complètes sur l'initiateur pour l'importation de fichiers HAR
- Lancer une recherche DOM après avoir appuyé sur
Enter
- Affichage des icônes
start
etend
pour les propriétés CSS flexboxalign-content
- Informations importantes
- Regrouper les fichiers par créés/déployés 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'appels lors du débogage
- Masquer les sources de la liste des éléments à ignorer dans le panneau "Sources"
- Masquer les fichiers de la liste d'ignorer dans le menu Command
- Nouveau canal "Interactions" dans le panneau "Performances"
- Répartition des délais de LCP dans le panneau "Informations sur les performances"
- Générer automatiquement un nom par défaut pour les enregistrements dans le panneau "Enregistreur"
- Divers
- Rediffusion étape par étape dans l'Enregistreur
- Prendre en charge l'événement de survol de la souris dans le panneau "Enregistreur"
- Largest Contentful Paint (LCP) 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 protocoles dans le volet "Fichier manifeste"
- Badge de la couche supérieure dans le panneau "Elements"
- Joindre des informations de débogage Wasm au moment de l'exécution
- Permettre la modification en direct pendant le débogage
- Afficher et modifier les règles @scope at dans le volet "Styles"
- Améliorations apportées à la carte source
- Informations importantes
- Redémarrer le frame pendant le débogage
- Options de ralenti dans le panneau "Enregistreur"
- Créer une extension pour le panneau "Enregistreur"
- Regrouper les fichiers par créés / déployés dans le panneau "Sources"
- Nouveau suivi du 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 de performances
- Aperçu de la valeur autre que la 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
- Divers
- Capturer les événements de double-clic et de clic droit dans le panneau "Enregistreur"
- Nouveau mode "Période" et "Instantané" dans le panneau Lighthouse
- Amélioration de la commande de zoom dans le panneau "Insights sur les performances"
- Confirmer la suppression d'un enregistrement des performances
- Réorganiser les volets dans le panneau "Éléments"
- Choisir une couleur en dehors du navigateur
- Aperçu des valeurs intégrées amélioré 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
- Fonctionnalité en version preview: Nouveau panneau "Informations sur les performances"
- Nouveaux raccourcis pour émuler les thèmes clair et sombre
- Amélioration de la sécurité dans l'onglet "Aperçu du 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ébut
- Afficher les pseudo-éléments de mise en surbrillance hérités dans le volet "Styles"
- Divers
- [Expérimental] Copier les modifications CSS
- [Expérimental] Choix d'une couleur en dehors du navigateur
- Importer et exporter les flux utilisateur enregistrés au format JSON
- Afficher les calques de la cascade dans le volet "Styles"
- Compatibilité avec la fonction de couleur
hwb()
- Amélioration de l'affichage des propriétés privées
- Informations importantes
- [Expérimental] Nouveau mode "Période" et "Instantané" dans le panneau Lighthouse
- Afficher et modifier les @prises au niveau des règles dans le volet "Styles"
- Compatibilité avec les sélecteurs courants par défaut
- Personnaliser le sélecteur d'enregistrement
- Renommer un enregistrement
- Prévisualiser les propriétés de classe ou de fonction par simple survol de la souris
- Images partiellement présentées dans le panneau "Performances"
- Informations importantes
- Limiter les requêtes WebSocket
- Nouveau volet de l'API Reporting dans le panneau "Application"
- Prise en charge de l'attente jusqu'à ce que l'élément soit visible/cliquable dans le panneau de l'Enregistreur
- Amélioration de la mise en forme, du style et du filtrage de la console
- Déboguer une extension Chrome avec des fichiers de mappage de sources
- Amélioration de l'arborescence des dossiers sources dans le panneau "Sources"
- Afficher les fichiers sources des nœuds de calcul dans le panneau "Sources"
- Mises à jour du thème sombre automatique de Chrome
- Sélecteur de couleur et volet fractionné conviviaux
- Informations importantes
- Fonctionnalité Preview : arborescence d'accessibilité en pleine page
- Modifications plus précises dans l'onglet "Modifications"
- Définir un délai avant expiration plus long pour l'enregistrement du parcours utilisateur
- Vérifier que vos pages peuvent être mises en cache avec l'onglet "Cache amélioré"
- Nouveau filtre du volet "Propriétés"
- Émuler la caractéristique média CSS "forced-colors"
- Afficher les règles lors du passage de la souris
- Compatibilité avec
row-reverse
etcolumn-reverse
dans l'éditeur Flexbox - Nouveaux raccourcis clavier pour relancer XHR et développer tous les résultats de recherche
- Lighthouse 9 dans le panneau Lighthouse
- Panneau "Sources" amélioré
- Divers
- [Expérimental] Points de terminaison dans le volet de l'API Reporting
- Fonctionnalité en avant-première : nouveau panneau de l'Enregistreur
- Actualiser la liste des appareils en mode Appareil
- Saisie semi-automatique avec Modifier au format HTML
- Amélioration de l'expérience de débogage du code
- Synchroniser les paramètres des outils de développement sur plusieurs appareils
- Fonctionnalité en preview: nouveau panneau "Aperçu du CSS"
- Récupération et amélioration de l'expérience de modification et de copie de la longueur CSS
- Émuler la caractéristique média "préférences-contrast" du CSS
- É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 "Réseau"
- Amélioration de l'affichage des propriétés dans le panneau "Propriétés"
- Option permettant de masquer les erreurs CORS dans la console
- Aperçu et évaluation appropriés des objets
Intl
dans la console - Traces de pile asynchrones cohérentes
- Conserver la barre latérale de la console
- Volet de cache d'application obsolète dans le panneau "Application"
- [Expérimental] Nouveau volet de l'API Reporting dans le panneau "Application"
- Nouveaux outils de création de longueurs 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 signaler un bug de traduction
- Amélioration de l'interface utilisateur du menu de commande des outils de développement
- 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
- Abandon à venir de la barre latérale de la console
- Affichage des en-têtes
Set-Cookies
bruts dans l'onglet "Issues" (Problèmes) et le panneau "Network" (Réseau) - Affichage cohérent des accésseurs natifs en tant que propriétés dans la console
- Traces de pile d'erreur appropriées pour les scripts intégrés avec #sourceURL
- Modifier le format de couleur dans le volet "Calculé"
- Remplacer des info-bulles personnalisées par des info-bulles en HTML natif
- [Expérimental] Masquer les problèmes dans l'onglet "Problèmes"
- 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
- Meilleure gestion des chaînes dans la console
- Amélioration du débogage CORS
- Lighthouse 8.1
- URL de la nouvelle note dans le volet "Fichier manifeste"
- Correction des sélecteurs de correspondance CSS
- Impression élégante des réponses JSON dans le panneau "Network" (Réseau)
- Éditeur de grille CSS
- Prise en charge des redéclarations de
const
dans la console - Visionneuse de l'ordre des sources
- Nouveau raccourci pour afficher les détails du cadre
- Amélioration de la compatibilité avec le débogage CORS
- Renommer le libellé XHR en "Fetch/XHR"
- Filtrer le type de ressource Wasm dans le panneau "Network" (Réseau)
- Hints client user-agent pour les appareils dans l'onglet "Conditions du réseau"
- Signaler des problèmes liés au mode Quirks dans l'onglet "Problèmes"
- Inclure des intersections de calcul dans le panneau "Performances"
- Lighthouse 7.5 dans le panneau Lighthouse
- Menu contextuel "Redémarrer le frame" obsolète dans la pile d'appels
- [Expérimental] Moniteur de protocole
- [Expérimental] Enregistreur Puppeteer
- Fenêtre pop-up d'informations sur les métriques Web Vitals
- Nouvel outil d'inspection de la mémoire
- Visualiser l'élément de défilement CSS
- Nouveau volet des paramètres des badges
- Aperçu d'image amélioré avec des informations sur le format
- Nouveau bouton "Conditions 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étails du frame"
- Filtrer les tests dans le paramètre "Tests"
- Nouvelle colonne
Vary Header
dans le volet "Stockage de cache" - Compatibilité avec la vérification de la marque privée JavaScript
- Amélioration de l'assistance pour le débogage des points d'arrêt
- Compatibilité avec l'aperçu du survol avec la notation
[]
- Amélioration de la structure des fichiers HTML
- Traces de pile d'erreur appropriées pour le débogage Wasm
- Nouveaux outils de débogage CSS Flexbox
- Nouvelle superposition Core Web Vitals
- Déplacement du nombre de problèmes dans la barre d'état de la console
- Signaler des problèmes liés aux activités Web fiables
- Formater des chaînes en tant que littéraux de chaîne JavaScript (valides) dans la console
- Volet "Nouveau jeton 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" (Réseau) - Améliorations des performances
- Afficher les fonctionnalités autorisées/non autorisées dans la vue "Détails de l'image"
- Nouvelle colonne
SameParty
dans le volet "Cookies" - Obsolescence de la prise en charge non standard de
fn.displayName
- 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 à faible contraste dans l'onglet "Problèmes"
- [Expérimental] Arborescence d'accessibilité complète dans le panneau "Éléments"
- Compatibilité avec le débogage pour les cas de non-respect des Trusted Types
- Effectuer une capture d'écran du 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
- Forcer l'état
:target
CSS - Nouveau raccourci pour dupliquer un é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 URL
- Effacer uniquement les cookies visibles
- Nouvelle option pour effacer les cookies tiers dans le volet "Stockage"
- Modifier les hints client User-Agent pour les appareils personnalisés
- Conserver "Enregistrer le journal réseau"
- Afficher les connexions WebTransport dans le panneau "Réseau"
- "En ligne" renommée "No throttling"
- Nouvelles options de copie dans la console, le panneau "Sources" et le volet "Styles"
- Nouvelles informations sur les service workers dans la vue des détails du frame
- Mesurer les informations sur la mémoire dans la vue "Détails du frame"
- Envoyer des commentaires depuis l'onglet "Problèmes"
- Images supprimées dans le panneau "Performances"
- Émuler les appareils pliables et à double écran en mode Appareil
- [Expérimental] Automatiser les tests du navigateur avec l'enregistreur Puppeteer
- [Expérimental] Éditeur de polices dans le volet "Styles"
- [Expérimental] Outils de débogage CSS flexbox
- [Expérimental] Nouvel onglet "Non-respect de CSP"
- [Expérimental] Nouveau calcul du contraste des couleurs : algorithme de contraste perceptif avancé (APCA)
- Démarrage plus rapide des outils pour les développeurs
- Nouveaux outils de visualisation des angles CSS
- Émuler des types d'images non compatibles
- Simuler la taille du quota de stockage dans le volet "Stockage"
- Nouvelle voie Web Vitals dans le panneau "Performances"
- Signaler des erreurs CORS dans le panneau "Network"
- Informations sur l'isolation multi-origine dans la vue "Détails du frame"
- Nouvelles informations sur les Web Workers dans la vue d'informations sur le frame
- Afficher les détails du frame d'ouverture pour les fenêtres ouvertes
- Ouvrir le panneau "Network" à partir du volet Service Workers
- Copier la valeur de la propriété
- Copier la trace de la pile pour l'initiateur de 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 fichiers/mémoires
- Mettre en surbrillance les pseudo-éléments dans le panneau "Éléments"
- [Expérimental] Outils de débogage CSS Flexbox
- [Expérimental] Personnaliser les raccourcis clavier pour les accords
- Nouveaux outils de débogage de la grille CSS
- Nouvel onglet WebAuthn
- Déplacer des outils entre le panneau supérieur et le panneau inférieur
- Nouveau volet de la barre latérale Computed dans le volet "Styles"
- Regrouper des propriétés CSS dans le volet "Calculé"
- Lighthouse 6.3 dans le panneau Lighthouse
performance.mark()
événements dans la section "Durée"- Nouveaux filtres
resource-type
eturl
dans le panneau "Network" (Réseau) - Modifications apportées à l'affichage des détails des cadres
- Abandon de
Settings
dans le menu "Autres outils" - [Expérimental] Afficher et corriger les problèmes de contraste des couleurs dans le panneau "Présentation du CSS"
- [Expérimental] Personnaliser les raccourcis clavier dans les outils de développement
- Panneau "New Media" (Nouveau média)
- Faire des captures d'écran de nœud à l'aide du menu contextuel du panneau "Éléments"
- Mise à 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 des "autres origines" dans le volet Service Workers
- Afficher le résumé de la couverture pour les éléments filtrés
- Nouvelle vue détaillée 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 par l'humain dans le panneau "Network" (Réseau) - Saisie semi-automatique des polices personnalisées dans le volet "Styles"
- Affichage cohérent du type de ressource dans le panneau "Réseau"
- Boutons "Effacer" dans les panneaux "Éléments" et "Réseau"
- Modification des styles pour les frameworks CSS-in-JS
- Lighthouse 6 dans le panneau Lighthouse
- Abandon de First Meaningful Paint (FMP)
- Compatibilité avec de nouvelles fonctionnalités JavaScript
- Nouveaux avertissements concernant les raccourcis d'application dans le volet "Fichier manifeste"
- Événements
respondWith
du service worker dans l'onglet "Timing" (Temps) - Affichage cohérent du panneau "Calculé"
- Décalages d'octets de code pour les fichiers WebAssembly
- Copier et couper par ligne dans le panneau "Sources"
- Mises à jour des paramètres de la console
- Mises à jour du panneau "Performances"
- Nouvelles icônes pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation
- Résoudre les problèmes sur le site avec le nouvel onglet "Problèmes"
- Afficher les informations d'accessibilité dans l'info-bulle du mode d'inspection
- Mises à jour du panneau "Performances"
- Terminologie des promesses plus précise dans la console
- Mises à jour du volet "Styles"
- Abandon du panneau Propriétés dans le panneau "Éléments"
- Prise en charge des raccourcis d'application dans le volet du fichier manifeste
- Émuler les déficiences visuelles
- Émuler les paramètres régionaux
- Débogage de la règle d'intégration multi-origine (COEP)
- 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
- Accrochage à gauche du menu de commande
- L'option "Paramètres" du menu principal a été déplacée
- Le panneau "Audits" est désormais le panneau "Lighthouse"
- Supprimer tous les remplacements locaux dans un dossier
- Mise à jour de l'interface utilisateur des tâches longues
- Prise en charge des icônes masquables dans le volet "Manifest"
- Compatibilité de Moto G4 en mode Appareil
- Informations concernant les cookies
- Icônes de fichier manifeste d'application Web plus précises
- Pointer sur les propriétés CSS
content
pour afficher les valeurs non échappées - Erreurs de carte source dans la console
- Paramètre permettant de désactiver le défilement au-delà de la fin d'un fichier
- Prise en charge des redéclarations
let
etclass
dans la console - Débogage de WebAssembly amélioré
- Demander des chaînes d'initiateur de requête dans l'onglet "Initiateur"
- Mettez en surbrillance la demande réseau sélectionnée dans "Overview" (Aperçu).
- 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 du code doit désormais être lancée par un rechargement de page.
- Déboguer pourquoi un cookie a été bloqué
- Afficher les valeurs des cookies
- Simuler différentes préférences de préférences de couleur et de mouvement réduit
- Modifications concernant la couverture du code
- Déboguer pourquoi une ressource réseau a été demandée
- Les panneaux "Console" et "Sources" respectent à nouveau les préférences d'indentation.
- Nouveaux raccourcis pour la navigation avec le curseur
- Compatibilité avec plusieurs clients dans le panneau "Audits"
- Débogage du gestionnaire de paiements
- 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 depuis le menu principal
- Copier les styles des éléments
- Visualiser les décalages de mise en page
- Lighthouse 5.1 dans le panneau "Audits"
- Synchronisation du thème de l'OS
- Raccourci clavier pour ouvrir l'éditeur de points d'arrêt
- Cache de préchargement dans le panneau "Network" (Réseau)
- Propriétés privées lors de l'affichage d'objets
- Notifications et messages push dans le panneau "Application"
- Saisie semi-automatique avec des valeurs CSS
- Nouvelle interface utilisateur pour les paramètres réseau
- Messages WebSocket dans les exportations HAR
- Boutons d'importation et d'exportation HAR
- Utilisation de la mémoire en temps réel
- Numéros de port d'enregistrement des services workers
- Inspecter les événements de récupération et de synchronisation en arrière-plan
- Puppeteer pour Firefox
- 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 par survol de la souris
- Points d'arrêt intégrés dans le volet "Points d'arrêt"
- Nombre de ressources IndexedDB et Cache
- Paramètre de désactivation de l'info-bulle d'inspection détaillée
- Paramètre d'activation/désactivation du retrait de tabulation dans l'éditeur
- Mettre en surbrillance tous les nœuds affectés par la propriété CSS
- Lighthouse v4 dans le panneau "Audits"
- Visionneuse de messages binaires WebSocket
- Capture d'écran de la zone dans le menu de commandes
- Filtres de service worker dans le panneau "Network"
- Modifications apportées au panneau "Performances"
- Tâches longues dans les enregistrements du panneau "Performances"
- First Paint dans la section "Timing" (Temps)
- Astuce supplémentaire : Raccourci pour afficher les codes de couleur RVB et HSL (vidéo)
- Points de journalisation
- Info-bulles détaillées en mode Inspecter
- Exporter des 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
- Repliage du code
- L'onglet "Cadres" a été renommé "Messages".
- Astuce supplémentaire: Filtrer le panneau "Réseau" par propriété (vidéo)
- Visualiser les métriques de performances dans le panneau "Performances"
- Mettre en surbrillance les nœuds de texte dans l'arborescence DOM
- Copiez le chemin 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 permettant d'accéder au panneau Audits à partir du menu Commande
- Astuce supplémentaire: Inspecter les requêtes média à l'aide du mode Appareil (vidéo)
- Passez la souris sur un résultat d'expression en direct pour mettre en surbrillance un nœud DOM.
- Stocker des nœuds DOM en tant que variables globales
- Informations sur l'initiateur et la priorité désormais disponibles dans les importations et exportations de fichiers HAR
- Accéder au menu de commandes depuis le menu principal
- Points d'arrêt Picture-in-picture
- Astuce: Utilisez
monitorEvents()
pour consigner les événements déclenchés par un nœud dans le Console (vidéo) - Expressions dynamiques dans la console
- Mettre en surbrillance les nœuds DOM lors de l'évaluation stricte
- Optimisations du panneau "Performances"
- Débogage plus fiable
- Activer la limitation de la bande passante depuis le menu Command
- Points d'arrêt conditionnels pour la saisie semi-automatique
- Arrêter sur les événements AudioContext
- Déboguer des applications Node.js avec ndb
- Astuce supplémentaire: Mesurez les interactions utilisateur réelles avec l'API User Timing
- Évaluation stricte
- Conseils sur les arguments
- Saisie semi-automatique des fonctions
- Mots clés ES2017
- Lighthouse 3.0 dans le panneau "Audits"
- Compatibilité BigInt
- Ajouter des chemins d'accès de propriété au volet "Watch" (Surveillance)
- "Afficher les codes temporels" déplacées dans "Paramètres"
- Conseil supplémentaire : Méthodes de la console moins connues (vidéo)
- Rechercher dans tous les en-têtes réseau
- Aperçus des valeurs des variables CSS
- Copier en tant que récupération
- Nouveaux audits, options de configuration pour ordinateur et traces d'affichage
- Arrêter les boucles infinies
- Temps utilisateur dans les onglets "Performances"
- Les instances de VM JavaScript sont clairement indiquées dans le panneau "Mémoire"
- L'onglet "Network" (Réseau) a été renommé "Page".
- Mises à jour du thème sombre
- Informations sur la transparence des certificats dans le panneau de sécurité
- Fonctionnalités d'isolation de sites dans le panneau "Performances"
- Astuce supplémentaire: panneau "Calques" + inspecteur d'animations (vidéo)
- Blackboxing dans le panneau "Network" (Réseau)
- Ajustement automatique du zoom en mode Appareil
- Affichage mis en forme dans les onglets "Aperçu" et "Réponse"
- Prévisualiser un contenu HTML dans l'onglet "Aperçu"
- Compatibilité des remplacements locaux avec les styles dans le code HTML
- Astuce supplémentaire: Les scripts du framework Blackbox pour rendre les points d'arrêt des écouteurs d'événements plus utiles
- Remplacements locaux
- Nouveaux outils d'accessibilité
- Onglet "Modifications"
- Nouveaux audits SEO et de performances
- Plusieurs enregistrements dans le panneau "Performances"
- Exécution de code fiable avec les workers en code asynchrone
- Conseil supplémentaire : Automatisez les actions des outils pour les développeurs avec Puppeteer (vidéo)
- Analyseur de performances
- Barre latérale de la console
- Regrouper les messages de console similaires
- Astuce supplémentaire: Activer/Désactiver la pseudo-classe de survol avec la souris (vidéo)
- Compatibilité avec le débogage à distance multi-client
- Workspace 2.0
- 4 nouveaux audits
- Simuler des notifications push avec des données personnalisées
- Déclencher des événements de synchronisation en arrière-plan avec des tags personnalisés
- Astuce supplémentaire : Points d'arrêt de l'écouteur d'événements (vidéo)
- Les premiers niveaux sont disponibles dans la console
- Nouveaux processus de capture d'écran
- Mise en surbrillance de la grille CSS
- Nouvelle API de la console pour interroger des objets
- Nouveaux filtres de la console
- Importations HAR dans le panneau "Réseau"
- Ressources de cache pouvant être prévisualisées
- Débogage du cache plus prévisible
- Couverture de code au niveau du bloc
- Simulation de limitation de débit sur un appareil mobile
- Afficher l'utilisation de l'espace de stockage
- Afficher quand un service worker a mis en cache des réponses
- Activer l'indicateur de FPS depuis le menu de commandes
- Définir le comportement de la molette de la souris pour zoomer ou faire défiler
- Prise en charge du débogage pour les modules ES6
- Nouveau panneau "Audits"
- Badges tiers
- Nouveau geste pour "Continuer ici"
- Passer en mode asynchrone
- Aperçus d'objets plus informatifs dans la console
- Sélection du contexte plus détaillée dans la console
- Mises à jour en temps réel dans l'onglet "Couverture"
- Options de limitation de bande passante réseau simplifiées
- Les piles asynchrones sont activées par défaut
- Couverture du code CSS et JS
- Captures d'écran pleine page
- Bloquer des demandes
- Ignorer l'attente asynchrone
- Menu de commandes unifié