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.
• Suggestions d'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. Des mots clés tels que await sont désormais disponibles dans l'interface utilisateur d'autocomplétion de la console.
• Lighthouse 3.0 dans le panneau "Audits". Des audits plus rapides et plus cohérents, une nouvelle UI et de nouveaux audits.
• l'assistance BigInt ; Essayez le nouvel entier de précision arbitraire de JavaScript dans la console.
• Ajouter des chemins d'accès de propriété au volet "Surveillance" Ajoutez des propriétés du volet "Étendue" au volet "Contrôle".
• L'option Afficher les codes temporels a été déplacée vers les paramètres.

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

Console d'assistance

Chrome 68 inclut de nouvelles fonctionnalités de la console liées à l'autocomplétion 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 affiche 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 : Exemples d'indications d'arguments dans la console

Remarques :

• Un point d'interrogation avant un arg, tel que ?options, représente un arg facultatif.
• Des points de suspension avant un argument, comme ...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

Après avoir activé l'évaluation anticipée, la console vous indique également les propriétés et les fonctions disponibles après la saisie d'une fonction.

Figure 3. La capture d'écran du haut représente l'ancien comportement, et celle du bas représente le nouveau comportement qui prend en charge l'autocomplétion 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 d'autocomplétion de la console.

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

Des audits plus rapides et plus fiables, une nouvelle UI et de nouveaux audits

Chrome 68 est fourni avec Lighthouse 3.0. Les sections suivantes présentent certains des changements les plus importants. Pour en savoir plus, consultez Annonce de Lighthouse 3.0.

Des audits plus rapides et plus fiables

Lighthouse 3.0 est doté 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 apporte également une nouvelle UI, 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
• Utiliser des formats vidéo pour le contenu animé
• Éviter les allers-retours multiples et coûteux vers n'importe quelle origine

Compatibilité avec BigInt

Chrome 68 est compatible avec une nouvelle primitive numérique appelée BigInt. BigInt vous permet de représenter des nombres entiers avec une précision arbitraire. Essayez-le 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 l'exécution est suspendue sur un point d'arrêt, effectuez un clic droit sur une propriété dans le volet "Portée", puis sélectionnez Ajouter le chemin d'accès de la propriété au contrôle pour ajouter cette propriété au volet "Contrôle".

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

L'option "Afficher les codes temporels" a été déplacée dans 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 Beta comme navigateur de développement par défaut. Ces canaux d'aperçu vous donnent accès aux dernières fonctionnalités des outils de développement, vous permettent de tester les API de plate-forme Web de pointe et vous aident à identifier les problèmes sur votre site avant vos utilisateurs.

Contacter l'équipe 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 en cliquant sur more_vert Plus d'options > Aide > Signaler un problème dans les outils de développement.
• Envoyez un tweet à @ChromeDevTools.
• Laissez des commentaires sur les vidéos YouTube "Nouveautés des outils de développement" ou les vidéos YouTube "Conseils sur les outils de développement".

Nouveautés des outils pour les développeurs

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