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

Kayce Basques

Nouveautés des outils de développement dans Chrome 68:

• Évaluation rapide. À mesure que vous saisissez des expressions, la console affiche un aperçu du résultat.
• Suggestions d'arguments. À mesure que vous saisissez des fonctions, la console affiche les arguments attendus .
• Saisie semi-automatique d'une fonction. 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 le de saisie semi-automatique.
• Lighthouse 3.0 dans le panneau "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.
• Ajoutez des chemins d'accès aux propriétés dans le volet de surveillance. Ajouter des propriétés à la surveillance à partir du volet "Scope" (Portée) volet.
• "Afficher les codes temporels" déplacées dans "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 à la prévisualisation.

Évaluation soignée

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

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

Pour activer l'évaluation rapide:

1. Ouvrez la console.
2. Ouvrez les paramètres de la console.
3. Cochez la case Évaluation intensive.

Les outils de développement n'ont pas à déterminer si l'expression entraîne des effets secondaires.

Suggestions d'arguments

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

Figure 2 : Différents exemples d'arguments dans la console

Remarques :

• Un point d'interrogation (?options, par exemple) représente un argument facultatif.
• Des points de suspension (...items, par exemple) précédant un argument, représentent un spread (répartition).
• Certaines fonctions, telles que CSS.supports(), acceptent plusieurs signatures d'argument.

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

Une fois l'évaluation intensive activée, la console indique aussi les propriétés et fonctions disponible après la saisie d'une fonction.

Figure 3. La capture d'écran du haut représente l'ancien comportement, tandis que celle du bas représente l'ancien comportement. Nouveau comportement compatible avec 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 récapitulent certains des changements les plus importants. Pour plus d'informations, consultez l'article Annonce de Lighthouse 3.0.

Audits plus rapides et plus fiables

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

Nouvelle interface

Lighthouse 3.0 apporte également une nouvelle interface utilisateur grâce à la collaboration entre Lighthouse et l'expérience utilisateur Chrome. (Recherche et conception).

Figure 5. Nouvelle interface utilisateur de rapports dans Lighthouse 3.0

Nouveaux audits

Lighthouse 3.0 comprend é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 multiples allers-retours coûteux vers n'importe quelle origine

Assistance BigInt

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

Figure 6. Exemple d'utilisation de la propriété BigInt dans la console

Ajouter le chemin d'accès de la propriété à la surveillance

Lorsque vous êtes en pause sur un point d'arrêt, effectuez un clic droit sur une propriété dans le volet "Scope" (Portée), puis sélectionnez Add Property (Ajouter une propriété) chemin d'accès à surveiller pour ajouter cette propriété au volet de surveillance.

Figure 7 : Exemple d'ajout d'un chemin de propriété à la surveillance

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

Auparavant, la case Afficher les codes temporels dans les paramètres de la console a été déplacé dans Paramètres.

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 vos suggestions ou vos commentaires via crbug.com.
• Signalez un problème lié aux outils de développement en cliquant sur Autres options   > Aide > Signalez un problème 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.

Nouveautés des outils de développement

Liste de tous les sujets abordés dans la série Nouveautés concernant les outils de développement