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

Sofia Emelianova
Sofia Emelianova

La collection officielle des extensions de l'Enregistreur est disponible

La collection officielle d'extensions Enregistreur, qui permet d'exporter ou de rediffuser ces vidéos est désormais disponible.

Pour ouvrir la collection directement depuis l'Enregistreur, sélectionnez Télécharger > Exporter > Télécharger des extensions dans la barre d'action en haut du panneau Enregistreur.

Améliorations du réseau

Cette version apporte un certain nombre d'améliorations au panneau Réseau.

Motif de l'échec indiqué dans la colonne "État"

Désormais, la colonne État affiche toujours un motif d'échec. Auparavant, vous deviez activer check_box Lignes de requête volumineuse ou sélectionner la requête dans le tableau.

Affichage du motif avant et après l'échec dans la colonne "État".

Problèmes Chromium: 1506760.

Sous-menu "Copier" amélioré

Le sous-menu Copier d'une requête est désormais mieux organisé.

Amélioration du sous-menu "Copier" avant et après.

De plus, l'option Copy as cURL (Copier en tant que cURL) copie désormais la commande correcte dans le presse-papiers sous Windows.

Problèmes Chromium: 1267033, 1276452, 798498.

Amélioration des performances

Cette version apporte un certain nombre d'améliorations au panneau Performances.

Fils d'Ariane dans la chronologie

La chronologie en haut du panneau Performances vous permet à présent de définir des fils d'Ariane et de passer de l'un à l'autre.

Pour définir un fil d'Ariane, sélectionnez une plage dans la chronologie, pointez dessus, puis cliquez sur le bouton zoom_in N ms. Vous pouvez créer plusieurs fils d'Ariane imbriqués à la suite. Pour passer d'un niveau de zoom à un autre, cliquez sur le fil d'Ariane correspondant dans la chaîne située au-dessus de la timeline. Regardez la vidéo suivante pour voir le fonctionnement du fil d'Ariane.

Problèmes Chromium: 1467739.

Initiateurs d'événements dans le canal principal

La section Performances > Par défaut, le canal principal affiche désormais des flèches reliant les initiés et les événements suivants qu'ils ont causés.

  • Invalidation de style ou de mise en page -> Recalculer les styles ou la mise en page
  • Request Animation Frame (Demander un frame d'animation) -> Frame d'animation déclenché
  • Demander un rappel à la prochaine période d'inactivité -> Rappel d'inactivité
  • Installer un minuteur -> Minuteur déclenché
  • Créer un WebSocket -> Send... (Envoyer...) et receive WebSocket Handshake (Envoyer le handshake WebSocket) ou Destroy WebSocket (Détruire WebSocket)

Pour voir les flèches, recherchez un événement de ce type dans la trace et cliquez dessus. Auparavant, cette fonctionnalité était en phase de test.

Flèche provenant de la requête et du déclenchement d'un rappel inactif.

Problèmes Chromium: 1434596.

Menu de sélection d'instance de VM JavaScript pour les outils de développement Node.js

Dans le panneau Performance des outils de développement Node.js, vous pouvez désormais sélectionner une instance de VM JavaScript dans le menu déroulant correspondant de la barre d'action. Une fonctionnalité similaire était disponible dans le Profileur JavaScript, qui sera bientôt obsolète.

Ajout d'un nouveau menu avant et après, qui vous permet de sélectionner une instance de VM JavaScript.

Problèmes Chromium: 1511813.

Améliorations apportées aux éléments

Cette version apporte un certain nombre d'améliorations au panneau Éléments.

En plus des deux fonctionnalités suivantes, le panneau Éléments mémorise désormais le dernier onglet que vous avez ouvert (par exemple, Calculé ou Propriétés).

Vous pouvez désormais modifier le pseudo-élément ::view-transition dans "Styles"

Vous pouvez désormais modifier les pseudo-éléments CSS ::view-transition dans Styles à l'aide de la feuille de style de l'outil d'inspection.

Compatibilité des modifications avant et après modification des pseudo-éléments de transition de vue.

Pour en savoir plus, consultez Transitions lisses et simples avec l'API View Transitions.

Problèmes Chromium: 1511233.

Compatibilité de la propriété align-content avec les conteneurs de blocs

La propriété align-content fonctionne désormais avec tous les conteneurs de blocs, y compris table-caption et table-cell. Auparavant, il ne fonctionnait qu'avec la grille et l'environnement flexible.

Prise en charge de l'alignement de contenu avant et après dans les conteneurs de blocs.

Problèmes Chromium: 1500511.

Nouveau raccourci et nouvelle commande dans "Sources"

Vous pouvez maintenant appuyer sur Cmd (Mac) / Ctrl (Win) + Maj + cliquer sur un numéro de ligne dans Sources pour créer un point de journalisation. Ce raccourci complète la combinaison de touches Cmd (Mac) / Ctrl (Win) déjà existante + clic pour créer des points d'arrêt conditionnels.

Le menu de commandes obtient la nouvelle commande Afficher le fichier actif dans la barre latérale du navigateur, qui est identique à l'option correspondante dans le menu déroulant de l'Éditeur.

Nouvelle commande permettant d'afficher le fichier actif dans la barre latérale du navigateur.

Problèmes Chromium: 1486933, 1467464.

Prise en charge de la stratégie pour les appareils pliables émulés

Le mode Appareil vous permet désormais de définir la posture d'un appareil pliable émulé: Continu ou Plié. La posture continue correspond à une position "plate" et plié forment un angle entre les sections de l'écran.

Menu déroulant contenant des options de stratégie.

De plus, la liste Appareils comprend un nouvel appareil pliable émulé: l'Asus Zenbook Fold.

Problème Chromium: 1066842.

Thématisation dynamique

Désormais, les outils de développement se mettent automatiquement en correspondance avec le thème de couleurs de Chrome. Pour définir un thème:

  1. Ouvrez un nouvel onglet, puis cliquez sur Modifier Personnaliser Chrome en bas à droite.
  2. Dans "Apparence", sélectionnez un thème via le fond d'écran Changer de thème ou sélectionnez une palette de couleurs.

Les outils de développement correspondent au thème de couleurs sélectionné dans "Apparence".

Problèmes Chromium: 1483276.

Avertissements d'abandon progressif des cookies tiers dans les panneaux "Réseau" et "Application"

Les panneaux Réseau et Application mettent désormais en évidence et affichent des avertissements à côté des cookies concernés par les restrictions tierces de Protection contre le suivi.

Dans Réseau, recherchez une requête accompagnée d'une icône d'avertissement avertissement, cliquez dessus, puis ouvrez l'onglet Cookies.

Avant et après la capture des cookies tiers dans le panneau "Network" (Réseau).

Dans Application, accédez à Stockage > Cookies, puis cliquez sur un domaine. Les cookies surlignés en jaune ne sont pas stockés dans le navigateur.

Mise en surbrillance des cookies tiers avant et après dans le panneau "Application".

Pointez sur l'icône d'avertissement pour afficher une info-bulle décrivant les problèmes, puis cliquez dessus pour ouvrir l'onglet Issues (Problèmes) contenant plus d'informations.

De plus, les cookies du tableau sont désormais triés par nom par défaut.

Problèmes Chromium: 1506225, 1503961.

Lighthouse 11.4.0

Le panneau Lighthouse exécute désormais la version 11.4.0. Consultez la liste complète des modifications. Parmi les changements notables, le nouvel audit vous permet de détecter si votre site Web utilise toujours des cookies tiers.

Audit qui détecte les cookies tiers.

Pour découvrir les principes de base de l'utilisation du panneau Lighthouse dans les outils de développement, consultez Lighthouse: optimiser la vitesse du site Web.

Problème Chromium: 772558.

Accessibilité

Cette version comporte les améliorations d'accessibilité suivantes:

  • Lorsque vous accédez aux paramètres Paramètres > Tests, le champ de recherche se trouve désormais automatiquement au premier plan.
  • Le bouton Annuler Effacer l'entrée dans Réseau > Le paramètre Filtre peut désormais être sélectionné.
  • Arborescence de fichiers sous Sources > Page s'affiche désormais correctement en mode contraste élevé.
  • Les lecteurs d'écran énoncent désormais correctement les éléments suivants: <ph type="x-smartling-placeholder">
      </ph>
    • État des cases à cocher dans Sources > Points d'arrêt.
    • Informations de position et d'index pour une liste de suggestions.
    • Résultat de l'action lors de l'ajout ou de la suppression d'un lieu dans paramètres Paramètres > Zones géographiques :
    • Groupes de règles d'exclusion (générales ou personnalisées) dans Paramètres Paramètres > Liste des éléments à ignorer.

Problèmes Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Points importants divers

Voici quelques correctifs et améliorations importants dans cette version:

  • Animations: <ph type="x-smartling-placeholder">
      </ph>
    • Correction du bug qui entraînait le rendu hors limites du pop-up de capture d'écran (1506991).
    • Correction d'un bug qui empêchait la suppression de nœuds d'animation et qui n'étaient pas marqués comme supprimés (1506561).
  • Réseau: <ph type="x-smartling-placeholder">
      </ph>
    • Remplacements d'en-têtes: correction d'un bug lié à une fausse icône en forme de point violet dans l'onglet En-têtes (1507856).
    • Aperçu: correction d'un bug entraînant un double décodage inutile (1509336).
    • Correction d'un bug qui empêchait l'affichage des requêtes courtes (1509862).
  • Application > IndexedDB: boutons réorganisés dans la barre d'action pour plus de cohérence avec les autres panneaux (1393800)
  • Capteurs: correction d'un bug qui empêchait le rappel de position non disponible incorrecte (1486859).
  • Performances: <ph type="x-smartling-placeholder">
      </ph>
    • Le bouton Collecter la corbeille est désormais associé à une icône appropriée, "Nettoyer la mémoire". au lieu d'une « bin » (1507530).
    • La trace des performances conserve désormais les données lorsque vous accédez à about:blank (1509947).

Télécharger les canaux de prévisualisation

Vous pouvez utiliser Chrome Canary, Dev ou Bêta comme navigateur de développement par défaut. Ces versions preview vous permettent d'accéder aux dernières fonctionnalités des outils de développement, de tester des API de plates-formes Web de pointe et de détecter les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe des outils pour les développeurs Chrome

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités et des modifications dans l'article, ou de tout autre sujet lié aux outils de développement.

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

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