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

Émuler les déficiences visuelles

Ouvrez l'onglet "Rendu" et utilisez la nouvelle fonctionnalité Émuler les déficiences visuelles pour mieux comprendre comment les personnes souffrant de différents types de déficiences visuelles perçoivent votre site.

Émuler la vision trouble

Les outils de développement vous permettent d'émuler la vision trouble et les types de déficiences de la vision des couleurs suivants :

• Protanopie : incapacité à percevoir la lumière rouge
• Deutéranopie : incapacité à percevoir la lumière verte
• Tritanopie : incapacité à percevoir la lumière bleue
• Achromatopsie : incapacité à percevoir n'importe quelle couleur, à l'exception des nuances de gris (trouble très rare)

Il existe des formes moins extrêmes de ces déficiences de la vision des couleurs, qui sont d'ailleurs plus courantes. Par exemple, la protanomalie est une sensibilité réduite à la lumière rouge (contrairement à la protanopie, qui est l'incapacité totale à percevoir la lumière rouge). Toutefois, ces déficiences visuelles "-omalies" ne sont pas aussi clairement définies : chaque personne atteinte d'une telle déficience visuelle est différente et peut voir les choses différemment (en étant capable de percevoir plus ou moins de couleurs concernées).

En concevant vos applications Web pour les simulations les plus extrêmes dans les outils de développement, vous avez la garantie qu'elles seront également accessibles aux personnes atteintes de protanomalie, de deutéranomalie, de tritanomalie et d'achromatomalie.

Envoyez vos commentaires sur le problème Chromium 1003700 ou découvrez-en plus sur l'implémentation.

Émuler des paramètres régionaux

Vous pouvez désormais émuler des paramètres régionaux en définissant une position dans Capteurs > Position. Ouvrez le menu Command et saisissez Sensors pour accéder à l'onglet Sensors (Capteurs). Après avoir effectué ces actions, les outils de développement modifient les paramètres régionaux par défaut actuels, ce qui affecte les éléments suivants :

• API Intl.*, par exemple new Intl.NumberFormat().resolvedOptions().locale
• d'autres API JavaScript compatibles avec les paramètres régionaux, telles que String.prototype.localeCompare et *.prototype.toLocaleString (par exemple, 123_456..toLocaleString()).
• API DOM telles que navigator.language et navigator.languages
• En-tête de requête HTTP Accept-Language

Consultez l'exemple de code dépendant des paramètres régionaux pour l'essayer.

Envoyez vos commentaires sur le problème 1051822 de Chromium.

Débogage de la règle d'intégration multi-origine (COEP)

Le panneau "Réseau" fournit désormais des informations de débogage sur le Règlement de l'intégrateur multi-origine.

La colonne État fournit désormais une brève explication de la raison pour laquelle une demande a été bloquée, ainsi qu'un lien permettant d'afficher les en-têtes de cette demande pour un débogage plus approfondi :

La section En-têtes de réponse de l'onglet En-têtes fournit des conseils supplémentaires sur la façon de résoudre les problèmes :

Envoyez vos commentaires sur le problème 1051466 de Chromium.

Nouvelles icônes pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation

Le panneau Sources comporte de nouvelles icônes pour les points d'arrêt, les points d'arrêt conditionnels et les points de journalisation :

• Les points d'arrêt sont représentés par des cercles rouges.
• Les points d'arrêt conditionnels sont représentés par des cercles moitié rouges, moitié blancs.
• Les points de journalisation sont représentés par des cercles rouges avec des icônes de console.

L'objectif de ces nouvelles icônes était de rendre l'UI plus cohérente avec les autres outils de débogage d'interface graphique (qui colorent généralement les points d'arrêt en rouge) et de faciliter la distinction entre les trois fonctionnalités en un coup d'œil.

Envoyez vos commentaires sur le problème 1041830 de Chromium.

Afficher les requêtes réseau qui définissent un chemin de cookie spécifique

Utilisez le nouveau mot clé de filtre cookie-path dans le panneau Réseau pour vous concentrer sur les requêtes réseau qui définissent un chemin de cookie spécifique.

Consultez Filtrer les demandes par propriétés pour découvrir d'autres mots clés spéciaux comme cookie-path.

Ancrer à gauche dans le menu Command

Ouvrez le menu Command (Commande) et exécutez la commande Dock to left pour déplacer les outils de développement vers la gauche de votre fenêtre d'affichage.

Envoyez vos commentaires sur le problème Chromium 1011679.

L'option Settings du menu principal a été déplacée

L'option permettant d'ouvrir les Paramètres à partir du menu principal se trouve désormais sous Plus d'outils.

Envoyez vos commentaires sur le problème 1050855 de Chromium.

Le panneau Audits s'appelle désormais Lighthouse.

Les équipes DevTools et Lighthouse ont souvent reçu des commentaires de développeurs Web qui leur disaient qu'il était possible d'exécuter Lighthouse à partir de DevTools, mais qu'ils ne trouvaient pas le panneau "Lighthouse" lorsqu'ils essayaient. C'est pourquoi le panneau Audits est désormais le panneau Lighthouse.

Supprimer tous les remplacements locaux d'un dossier

Après avoir configuré les remplacements locaux, vous pouvez effectuer un clic droit sur un dossier et sélectionner la nouvelle option Supprimer tous les remplacements pour supprimer tous les remplacements locaux de ce dossier.

Envoyez vos commentaires sur le problème 1016501 de Chromium.

Interface utilisateur des longues tâches mise à jour

Une longue tâche est un code JavaScript qui monopolise le thread principal pendant une longue période, ce qui provoque le blocage d'une page Web.

Vous pouvez visualiser les tâches longues dans le panneau "Performances" depuis un certain temps, mais dans Chrome 83, l'interface utilisateur de visualisation des tâches longues dans le panneau "Performances" a été mise à jour. La partie "Tâche longue" d'une tâche est désormais colorée avec un arrière-plan rouge à rayures.

Envoyez vos commentaires sur le problème 1054447 de Chromium.

Prise en charge des icônes masquables dans le volet "Manifeste"

Android Oreo a introduit les icônes adaptatives, qui affichent les icônes d'application sous différentes formes sur différents modèles d'appareils. Les icônes masquables sont un nouveau format d'icône compatible avec les icônes adaptatives. Elles vous permettent de vous assurer que l'icône de votre PWA s'affiche correctement sur les appareils compatibles avec la norme des icônes masquables.

Cochez la nouvelle case Affichez uniquement la zone de sécurité minimale pour les icônes masquables dans le volet Manifeste pour vérifier que votre icône masquable s'affichera correctement sur les appareils Android Oreo. Pour en savoir plus, consultez Mes icônes actuelles sont-elles prêtes ?

Télécharger les canaux de prévisualisation

Envisagez d'utiliser Chrome Canary, Dev ou Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe Chrome DevTools

Utilisez les options suivantes pour discuter des nouvelles fonctionnalités, des mises à jour ou de tout autre élément lié aux outils pour les développeurs.

• Envoyez-nous vos commentaires et vos demandes de fonctionnalités sur crbug.com.
• Signalez un problème dans les outils de développement en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils pour les développeurs" ou les vidéos YouTube "Conseils sur les outils pour les développeurs".

Nouveautés des outils pour les développeurs

Liste de tous les sujets abordés dans la série Nouveautés de DevTools.