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

Kayce Basques

Nouveautés des outils pour les développeurs dans Chrome 68:

• Évaluation stricte À mesure que vous saisissez des expressions, la console affiche un aperçu du résultat.
• Conseils sur les arguments Lorsque vous saisissez des fonctions, la console affiche les arguments attendus pour cette fonction.
• Saisie semi-automatique des fonctions Après avoir saisi un appel de fonction tel que document.querySelector('p'), la console affiche les fonctions et les propriétés compatibles avec la valeur renvoyée.
• Mots clés ES2017 dans la console Les mots clés tels que await sont désormais disponibles dans l'interface utilisateur de saisie semi-automatique de la console.
• Lighthouse 3.0 dans le panneau "Audits" (Audits). Audits plus rapides et plus cohérents, nouvelle interface utilisateur et nouveaux audits
• Assistance BigInt Essayez le nouvel entier à précision arbitraire de JavaScript dans la console.
• Ajout de chemins d'accès de propriété au volet "Watch" (Regarder) Ajoutez des propriétés du volet "Champ d'application" au volet "Watch" (Regarder).
• L'option "Afficher les codes temporels" a été déplacée dans les paramètres.

Lisez la suite ou regardez la version vidéo des notes de version ci-dessous.

Console d'assistance

Chrome 68 inclut quelques nouvelles fonctionnalités de la console liées à la saisie semi-automatique et à l'aperçu.

Évaluation stricte

Lorsque vous saisissez une expression dans la console, celle-ci peut désormais afficher un aperçu du résultat de cette expression sous votre curseur.

Figure 1 : La console imprime le résultat de l'opération sort() avant qu'elle n'ait été exécutée explicitement

Pour activer l'évaluation stricte:

1. Ouvrez la console.
2. Ouvrez Paramètres de la console .
3. Cochez la case Évaluation anticipée.

DevTools n'évalue pas de manière anticipée si l'expression provoque des effets secondaires.

Suggestions d'arguments

Lorsque vous saisissez des fonctions, la console affiche désormais les arguments attendus par la fonction.

Figure 2 : Divers exemples d'indices d'arguments dans la console

Remarques :

• Un point d'interrogation placé avant un argument, tel que ?options, représente un argument facultatif.
• Des points de suspension placés avant un argument, tel que ...items, représentent une propagation.
• Certaines fonctions, comme CSS.supports(), acceptent plusieurs signatures d'arguments.

Saisie semi-automatique après l'exécution de fonctions

Une fois l'évaluation anticipée activée, la console indique également quelles propriétés et fonctions sont disponibles après avoir saisi une fonction.

Figure 3. La capture d'écran du haut représente l'ancien comportement, et celle du bas le nouveau comportement qui prend en charge la saisie semi-automatique des fonctions.

Mots clés ES2017 dans la saisie semi-automatique

Les mots clés ES2017, tels que await, sont désormais disponibles dans l'interface utilisateur de saisie semi-automatique de la console.

Figure 4. La console suggère désormais await dans son UI de saisie semi-automatique

Audits plus rapides et plus fiables, nouvelle interface utilisateur et nouveaux audits

Chrome 68 est fourni avec Lighthouse 3.0. Les sections suivantes présentent quelques-unes des plus grandes modifications. Pour en savoir plus, consultez Annonce de Lighthouse 3.0.

Des audits plus rapides et plus fiables

Lighthouse 3.0 dispose d'un nouveau moteur d'audit interne, baptisé Lantern, qui effectue vos audits plus rapidement et avec moins de variance entre les exécutions.

Nouvelle interface

Lighthouse 3.0 propose également une nouvelle interface utilisateur, grâce à une collaboration entre les équipes Lighthouse et Chrome UX (recherche et conception).

Figure 5. Nouvelle interface utilisateur des rapports dans Lighthouse 3.0

Nouveaux audits

Lighthouse 3.0 inclut également quatre nouveaux audits:

• First Contentful Paint
• Le fichier robots.txt n'est pas valide
• Utilisez des formats vidéo pour le contenu animé
• Éviter les allers-retours multiples et coûteux vers n'importe quelle origine

Prise en charge de BigInt

Chrome 68 est compatible avec une nouvelle primitive numérique appelée BigInt. BigInt vous permet de représenter des entiers avec une précision arbitraire. Essayez-la dans la console:

Figure 6. Exemple de BigInt dans la console

Ajouter le chemin d'accès de la propriété au contrôle

Lorsque vous êtes arrêté sur un point d'arrêt, effectuez un clic droit sur une propriété dans le volet "Champ d'application", puis sélectionnez Ajouter le chemin d'accès de la propriété à surveiller pour ajouter cette propriété au volet "Surveillance".

Figure 7 : Exemple d'Ajouter le chemin d'accès de la propriété au contrôle

"Afficher les codes temporels" déplacé vers les paramètres

La case à cocher Afficher les codes temporels, qui se trouvait auparavant dans Paramètres de la console , a été déplacée vers Paramètres.

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.