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

Kayce Basques

Émuler les déficiences visuelles

Ouvrez l'onglet Rendu et utilisez la nouvelle fonctionnalité Émuler les déficiences visuelles pour obtenir un meilleur de la façon dont les personnes ayant différents types de déficiences visuelles découvrent votre site.

Émuler une vision trouble

Les outils de développement peuvent émuler la vision floue 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 une couleur, à l'exception des nuances de gris (extrêmement rare).

Il existe des versions moins extrêmes de ces déficiences de la vision des couleurs et, en fait, plus courantes. Par exemple, la protanomalie est une sensibilité réduite à la lumière rouge (par opposition à la protanopie, qui est l'incapacité totale à percevoir la lumière rouge). Cependant, ces "-omaly" les déficiences visuelles sont pas aussi clairement définies: chaque personne souffrant d'une telle déficience visuelle est différente et peut voir les choses différemment (être capable de percevoir plus ou moins les couleurs pertinentes).

En concevant les simulations les plus extrêmes dans les outils de développement, vous avez la garantie que vos applications Web seront accessibles aux personnes souffrant de protanomalie, de deutéranomalie, de tritanomalie et d’achromatomalie.

Envoyez vos commentaires au problème Chromium n° 1003700 ou obtenez plus d'informations sur l'implémentation.

Émuler les paramètres régionaux

Vous pouvez désormais émuler des paramètres régionaux en définissant un emplacement dans Capteurs > Emplacement : Ouvrez le menu Menu, puis saisissez Sensors pour accéder à l'onglet Capteurs. Après avoir effectué ces actions : Outils de développement modifie les paramètres régionaux par défaut actuels, ce qui a une incidence sur ce qui suit:

• 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 (ex. : 123_456..toLocaleString()
• Les API DOM telles que navigator.language et navigator.languages
• L'en-tête de requête HTTP Accept-Language

Consultez l'exemple de code dépendant des paramètres régionaux pour l'essayer par vous-même.

Envoyez vos commentaires au problème Chromium n° 1051822.

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

Le panneau "Network" (Réseau) fournit à présent des informations de débogage concernant la stratégie d'intégration multi-origine.

La colonne État fournit à présent une explication rapide des raisons pour lesquelles une demande a été bloquée, pour afficher les en-têtes de cette requête en vue d'un débogage plus approfondi:

La section Response Headers (En-têtes de réponse) de l'onglet Headers (En-têtes) fournit davantage d'indications sur la manière de résoudre les problèmes:

Envoyez vos commentaires au problème Chromium n° 1051466.

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:

• Points d'arrêt sont représentées par des cercles rouges.
• Points d'arrêt conditionnels sont représentés par des cercles mi-rouges moitiés blancs.
• Points de journalisation sont représentés par des cercles rouges avec des icônes Console.

L'intérêt des nouvelles icônes était de rendre l'interface utilisateur plus cohérente avec les autres outils de débogage de l'IUG (qui colore généralement les points d'arrêt en rouge) et permet de distinguer plus facilement les trois caractéristiques en un coup d'œil.

Envoyez vos commentaires au problème Chromium n° 1041830.

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 Network (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é pour trouver d'autres mots clés spéciaux comme cookie-path.

Station d'accueil à gauche à partir du menu de commandes

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

Envoyez vos commentaires au problème Chromium n° 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 au problème Chromium n° 1050855.

Le panneau Audits a été remplacé par Lighthouse.

Les équipes DevTools et Lighthouse ont souvent reçu des commentaires de développeurs Web qu'il est possible d'exécuter Lighthouse depuis les outils de développement, mais lorsqu'ils l'ont essayé, impossible de trouver "Lighthouse" et le panneau Audits devient Lighthouse.

Supprimer toutes les valeurs de remplacement locales 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 au problème Chromium n° 1016501.

Mise à jour de l'interface utilisateur des longues tâches

Une longue tâche est un code JavaScript qui monopolise le thread principal pendant un long moment, provoquant ainsi une perte de données pour figer la page.

Vous pouvez visualiser les tâches longues dans le panneau "Performances" depuis un certain temps déjà, mais dans L'UI de visualisation des tâches de longue durée dans le panneau "Performances" de Chrome 83 a été mise à jour. La longue tâche d'une tâche est maintenant colorée avec un arrière-plan rouge rayé.

Envoyez vos commentaires au problème Chromium n° 1054447.

Prise en charge des icônes masquables dans le volet du fichier manifeste

Android Oreo a lancé des icônes adaptatives, qui permettent d'afficher les icônes des applications de 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. qui vous permettent de vous assurer que l'icône de votre PWA s'affiche correctement sur les appareils compatibles avec le masquage icônes standards.

Cochez la nouvelle case Afficher uniquement la zone de sécurité minimale pour les icônes masquables dans le fichier manifeste. pour vérifier que l'icône masquable s'affiche correctement sur les appareils Android Oreo. Regardez Est-ce que icônes actuellement prêtes ? pour en savoir plus.

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   > 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