Cette page a été traduite par l'API Cloud Translation.

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 mieux comprendre comment les personnes souffrant de 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 déficiences visuelles ne sont pas aussi clairement définies: chaque personne atteinte d'une telle déficience 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 > Localisation. Ouvrez le menu Commande, puis saisissez Sensors pour accéder à l'onglet Capteurs. Une fois ces actions effectuées, les outils de développement modifient les paramètres régionaux par défaut actuels, ce qui a un impact sur les éléments suivants:

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

Remarque:Les mises à jour de navigator.language et navigator.languages ne sont pas visibles immédiatement, mais uniquement après la prochaine navigation ou actualisation de la page. Les modifications apportées à l'en-tête HTTP Accept-Language ne sont reflétées que pour les requêtes ultérieures.

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 du motif de blocage d'une requête, ainsi qu'un lien permettant d'afficher les en-têtes de cette requête pour un débogage plus approfondi:

Requêtes bloquées dans la colonne "État"

La section Response Headers (En-têtes de réponse) de l'onglet Headers (En-têtes) fournit plus de conseils sur la résolution des problèmes:

Plus de conseils dans la section "En-têtes de réponse"

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:

Les points d'arrêt sont représentés par des cercles rouges.
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 la console.

L'objectif des nouvelles icônes était de rendre l'UI 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 de distinguer plus facilement les trois fonctionnalités en un coup d'œil.

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

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

Outils de développement ancrés à gauche de la 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 leur indiquant qu'il était possible d'exécuter Lighthouse à partir des outils de développement, mais lorsqu'elles ont essayé de l'essayer, elles n'ont pas trouvé le panneau "Lighthouse". Le panneau Audits est donc désormais le panneau Lighthouse.

Panneau 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 qu'il contient.

Supprimer tous les remplacements

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 longtemps, provoquant 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 s'affiche désormais sur un arrière-plan rouge rayé.

Nouvelle interface utilisateur pour les longues tâches

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 introduit des icônes adaptatives, qui affichent les icônes d'application 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. Elles vous permettent de vous assurer que l'icône de votre PWA s'affiche correctement sur les appareils compatibles avec la norme d'icônes masquables.

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

Case à cocher "Afficher uniquement la zone de sécurité minimale pour les icônes masquables"

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 une suggestion ou un commentaire via crbug.com.
Signalez un problème dans les outils de développement en sélectionnant Autres options > Aide > Signaler un problème dans les outils de développement 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.