Allez, pour finir la journée, nouvelle petite série de tweets sur les #DevTools. Les 2 premières séries, où il est question de performances, se trouvent ici :
https://twitter.com/romaintaz/status/1526459492946391040?s=20&t=Ilu2vDHF5iDg4a7FMSlYng
https://twitter.com/romaintaz/status/1526477511672094720?s=20&t=Ilu2vDHF5iDg4a7FMSlYng
Cette fois-ci, je vais vous parler du "Recorder". Il est lui aussi un outil expérimental, apparu en Chrome 97. Il ne devrait donc pas manquer de nouvelles fonctionnalités dans les versions à venir de Chrome.
Son nom est assez explicite je pense, puisqu'il permet d'enregistrer un scénario utilisateur. On démarre un enregistrement, on navigue sur son site, et une fois terminé, on arrête l'enregistrement. 
Une fois terminé, nous pouvons voir le scénario dans le panneau du DevTools.
Chaque action (clic, saisie au clavier...) correspond à une étape, que nous pouvons modifier : changer le sélecteur, la valeur saisie, ajouter une étape avant ou après, définir une assertion, etc.
Chaque action (clic, saisie au clavier...) correspond à une étape, que nous pouvons modifier : changer le sélecteur, la valeur saisie, ajouter une étape avant ou après, définir une assertion, etc.
Le scénario peut alors être joué, on peut même changer la vitesse du rejeu, ce qui est nouveau depuis ma session à Devoxx France !
Autre intérêt : on peut exécuter ce scénario en profilant le site, et ainsi afficher l'analyse avec l'outil "Performance" ou le nouveau "Performance Insights" dont je parlais récemment. Cela peut s'avérer très pratique pour optimiser certains scénarios critiques pour son site.
Enfin, et ce n'est pas négligeable, il est possible d'exporter son scénario, soit au format JSON (pour les réimporter ensuite), soit comme script Puppeteer ou @puppeteer/replay. C'est peut-être là l'occasion de se lancer dans les tests end-to-end si ce n'est pas déjà fait ! 😉
Que contient ce script ? Tout d'abord, après l'initialisation, nous avons un ensemble de fonctions utilitaires (des `waitFor*`, `querySelector*`).
Viennent ensuite les étapes à proprement parlé, dont voici le début :
Ce n'est pas parfait, mais c'est un excellent début. D'autant que toute cette opération m'aurait pris moins d'une minute !
La documentation de cette fonctionnalité se trouve ici :
developer.chrome.com/docs/devtools/…
La documentation de cette fonctionnalité se trouve ici :
developer.chrome.com/docs/devtools/…
Voilà, c'est fini pour aujourd'hui sur les #DevTools de Chrome.
Demain, j'aborderai d'autres éléments, comme la partie CSS, l'accessibilité ou encore la fameuse Console, qui regorge elle aussi de fonctionnalités cachées.
Demain, j'aborderai d'autres éléments, comme la partie CSS, l'accessibilité ou encore la fameuse Console, qui regorge elle aussi de fonctionnalités cachées.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
