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

Kayce Basques

Émuler les déficiences visuelles

Ouvrez l'onglet Affichage et utilisez la nouvelle fonctionnalité Simuler des déficiences visuelles pour mieux comprendre comment les personnes ayant différents types de déficiences visuelles interagissent avec votre site.

Émulation de la vision trouble.

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

• Protanopie: incapacité à percevoir la lumière rouge
• Deuteranopie: 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 versions moins extrêmes de ces déficiences de la vision des couleurs, qui sont 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 anomalies de la vision ne 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 (en percevant plus ou moins les couleurs concernées).

En concevant pour les simulations les plus extrêmes dans DevTools, vous vous assurez que vos applications Web sont également accessibles aux personnes atteintes de protanomalie, de deuteranomalie, de tritanomalie et d'achromatomalie.

Envoyez des commentaires pour le problème 1003700 de Chromium ou en savoir plus sur l'implémentation.

Émuler les 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 (Commande) et saisissez Sensors pour accéder à l'onglet Sensors (Capteurs). Après avoir effectué ces actions, DevTools modifie la langue par défaut actuelle, ce qui affecte les éléments suivants:

• API Intl.*, par exemple new Intl.NumberFormat().resolvedOptions().locale
• d'autres API JavaScript tenant compte des 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
• l'en-tête de requête HTTP Accept-Language ;

Consultez l'exemple de code dépendant de la langue pour essayer par vous-même.

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

Débogage du règlement de l'intégrateur 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 explication rapide de la raison pour laquelle une requête a été bloquée, ainsi qu'un lien permettant d'afficher les en-têtes de cette requête 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 pour résoudre les problèmes:

Envoyez vos commentaires pour 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é rouge, moitié blanc.
• Les points de journalisation sont représentés par des cercles rouges avec des icônes de console.

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

Envoyez des 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 Network (Réseau) pour vous concentrer sur les requêtes réseau qui définissent un chemin de cookie spécifique.

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

Accrocher à gauche dans le menu Command (Commande)

Ouvrez le menu Command (Commande) et exécutez la commande Dock to left pour déplacer les outils de développement à gauche de votre vue.

Envoyez des commentaires pour le problème Chromium 1011679.

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

L'option permettant d'ouvrir les paramètres depuis le menu principal se trouve désormais sous Autres outils.

Envoyez des commentaires pour le problème Chromium 1050855.

Le panneau Audits est désormais le panneau Lighthouse

Les équipes DevTools et Lighthouse ont souvent reçu des commentaires de la part de développeurs Web qui affirmaient qu'il était possible d'exécuter Lighthouse depuis DevTools, mais qu'ils ne trouvaient pas le panneau "Lighthouse" lorsqu'ils essayaient de l'utiliser. Le panneau Audits est donc désormais le panneau Lighthouse.

Supprimer tous les forçages locaux d'un dossier

Après avoir configuré les Forces locales, vous pouvez désormais effectuer un clic droit sur un dossier et sélectionner la nouvelle option Supprimer toutes les forces pour supprimer toutes les forces locales de ce dossier.

Envoyez vos commentaires pour le problème Chromium 1016501.

Mise à jour de l'UI des tâches longues

Une tâche longue est un code JavaScript qui monopolise le thread principal pendant une longue période, ce qui entraîne 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 la 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 pour le problème Chromium 1054447.

Prise en charge des icônes masquables dans le volet "Fichier 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 est bien affichée sur les appareils compatibles avec la norme des icônes masquables.

Activez la nouvelle case à cocher Afficher uniquement la zone de sécurité minimale pour les icônes masquables dans le volet Fichier manifeste pour vérifier que votre icône masquable s'affiche 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 Bêta comme navigateur de développement par défaut. Ces canaux de prévisualisation vous donnent accès aux dernières fonctionnalités de DevTools, vous permettent de tester les API de plate-forme Web de pointe et vous aident à 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, 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 à l'aide de l'icône more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube sur les nouveautés des outils pour les développeurs ou sur les vidéos YouTube sur les conseils concernant les outils pour les développeurs.

Nouveautés des outils pour les développeurs

Liste de tous les éléments abordés dans la série Nouveautés des outils pour les développeurs.