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 des déficiences visuelles pour mieux comprendre comment les personnes souffrant de différents types de déficiences visuelles utilisent votre site.

Émulation de la vision floue.

Les outils de développement peuvent reproduire une 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 n'importe quelle couleur à l'exception des nuances de gris (très rare).

Il existe des versions moins extrêmes de ces déficiences visuelles, qui sont en fait 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). Cependant, ces déficiences visuelles "anomalies" ne sont pas aussi clairement définies: chaque personne souffrant de ce type de déficience visuelle est différente et peut voir les choses différemment (pouvoir percevoir plus ou moins les couleurs pertinentes).

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

Envoyez vos commentaires au problème Chromium n° 1003700 ou découvrez 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 Sensors > Location (Capteurs > Position). Ouvrez le menu de commande et saisissez Sensors pour accéder à l'onglet Sensors (Capteurs). Une fois ces actions effectuées, 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 prenant en compte 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
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 un exemple de code dépendant des paramètres régionaux pour l'essayer par vous-même.

Envoyez vos commentaires concernant le problème Chromium n° 1051822.

Débogage COEP (Cross-Origin Embedder Policy)

Le panneau "Network" (Réseau) fournit désormais des informations de débogage concernant la Règle de l'intégrateur multi-origines.

La colonne Status (État) fournit maintenant une explication rapide des raisons pour lesquelles 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 ultérieur:

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 des conseils supplémentaires sur la résolution des problèmes:

Pour plus de conseils, consultez la section "En-têtes de réponse"

Envoyez vos commentaires concernant le 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 propose 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és par des cercles rouges.
Les points d'arrêt conditionnels sont représentés par des cercles mi-rouges, mi-blancs.
Les points de journalisation sont représentés par des cercles rouges avec des icônes dans la console.

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

Envoyez vos commentaires concernant le 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 la section Filtrer les demandes par propriété pour découvrir d'autres mots clés spécifiques tels que cookie-path.

Station d'accueil à gauche dans le menu de commandes

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

Outils de développement ancrés à gauche de la fenêtre d'affichage

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

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

Les équipes des outils de développement et de Lighthouse ont souvent reçu des commentaires de développeurs Web qu'elles entendaient qu'il est possible d'exécuter Lighthouse à partir des outils de développement. Cependant, lorsqu'elles ont commencé à l'essayer, elles n'ont pas trouvé le panneau "Lighthouse". Le panneau Audits est donc maintenant le panneau Lighthouse.

Panneau Lighthouse

Supprimer tous les remplacements locaux dans 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 concernant le problème Chromium n° 1016501.

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

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

Cela fait un certain temps que vous pouvez visualiser les tâches longues dans le panneau "Performances", mais dans Chrome 83, l'interface utilisateur de visualisation des tâches longues du panneau "Performances" a été mise à jour. La partie "Tâche longue" d'une tâche est maintenant colorée sur fond rouge à rayures.

Nouvelle interface utilisateur pour les tâches longues

Envoyez vos commentaires concernant le problème Chromium n° 1054447.

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'applications 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, ce qui vous permet de vous assurer que votre icône PWA s'affiche correctement sur les appareils compatibles avec les icônes masquables standards.

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

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

Télécharger les canaux de prévisualisation

Nous vous conseillons d'utiliser Chrome Canary, Dev ou Beta 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 pointe de plates-formes Web et de détecter les problèmes sur votre site avant qu'ils ne le fassent.

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 toute autre question concernant les outils de développement.

Envoyez-nous une suggestion ou des commentaires via crbug.com.
Signalez un problème dans les outils de développement via Plus d'options > Aide > Signaler un problème dans les outils de développement dans les Outils de développement.
Envoyez un tweet à @ChromeDevTools.
Dites-nous en plus sur les nouveautés concernant les vidéos YouTube dans les outils de développement ou sur les vidéos YouTube de nos conseils relatifs aux outils de développement.