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

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

Kayce Basques

Nouveaux outils de développement dans Chrome 68:

Évaluation éclair. À mesure que vous saisissez des expressions, la console affiche un aperçu du résultat.
Indices d'argument. À mesure que 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 de saisie semi-automatique de la console.
Lighthouse 3.0 dans le panneau "Audits" : Des audits plus rapides et cohérents, une nouvelle interface utilisateur et de nouveaux audits.
Assistance BigInt. Essayez le nouvel entier de précision arbitraire de JavaScript dans la console.
Ajouter des chemins d'accès aux propriétés dans le volet de surveillance Ajoutez des propriétés du volet "Champ d'application" au volet de surveillance.
L'option "Afficher les codes temporels" a été déplacée dans les paramètres.

Remarque:Pour vérifier la version de Chrome que vous utilisez, accédez à chrome://version. Si vous exécutez une version antérieure, ces fonctionnalités n'existent pas. Si vous utilisez une version ultérieure, il est possible que ces fonctionnalités aient changé. Une nouvelle version majeure est mise à jour automatiquement toutes les six semaines environ.

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

Console d'assistance

Chrome 68 intègre quelques nouvelles fonctionnalités de la console liées à la saisie semi-automatique et à la prévisualisation.

Évaluation impatiente

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

La console affiche le résultat de l'opération sort() avant qu'elle ne soit explicitement exécutée.

Figure 1 : La console affiche le résultat de l'opération sort() avant son exécution explicite.

Pour activer l'évaluation éclair:

Ouvrez la console.
Ouvrez les paramètres de la console .
Cochez la case Évaluation eager.

Les outils de développement ne cherchent pas à évaluer si l'expression provoque des effets secondaires.

Suggestions d'argument

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

Suggestions d'argument dans la console.

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

Remarques :

Un point d'interrogation devant un argument, tel que ?options, représente un argument facultatif.
Des points de suspension avant un argument, comme ...items, représente un spread.
Certaines fonctions, telles que CSS.supports(), acceptent plusieurs signatures d'argument.

Saisie semi-automatique après les exécutions de la fonction

Une fois que vous avez activé l'évaluation eager, la console affiche également les propriétés et les fonctions disponibles une fois que vous avez saisi une fonction.

Une fois que vous avez exécuté document.querySelect('p'), la console peut afficher les propriétés et fonctions disponibles pour cet élément.

Image 3. La capture d'écran du haut représente l'ancien comportement, et la capture d'écran du bas représente le 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.

La console suggère désormais "await" dans l'interface utilisateur de saisie semi-automatique.

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

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

Lighthouse est intégré à Chrome 68 avec Lighthouse 3.0. Les sections suivantes récapitulent certaines des principales modifications. Pour en savoir plus, consultez 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 les équipes Lighthouse et UX (Recherche et conception) de Chrome.

Nouvelle interface utilisateur des rapports dans Lighthouse 3.0.

Figure 5. Nouvelle interface utilisateur des rapports dans Lighthouse 3.0

Nouveaux audits

Lighthouse 3.0 est également fourni avec quatre nouveaux audits:

First Contentful Paint
Le fichier robots.txt n'est pas valide
Utiliser des formats vidéo pour le contenu animé
Évitez les allers-retours multiples et coûteux vers n'importe quel point de départ

Compatibilité avec 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-le dans la console:

Exemple de BigInt dans la console

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

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

Pendant la pause sur un point d'arrêt, effectuez un clic droit sur une propriété dans le volet "Scope" (Champ d'application), puis sélectionnez Add Property path to watch (Ajouter un chemin d'accès à la propriété à surveiller) pour ajouter cette propriété au volet de surveillance.

Exemple de chemin d'accès d'une propriété à surveiller.

Figure 7 : Exemple d'ajout d'un chemin d'accès à une propriété à surveiller

Option "Afficher les codes temporels" déplacée dans les paramètres

La case Afficher les codes temporels, précédemment située dans les paramètres de la console , a été déplacée vers Paramètres.

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.