La version 88 de Chrome inclut des mises à jour importantes des DevTools, notamment un débogage amélioré du réseau, des outils de débogage expérimentaux pour CSS Flexbox, une vue améliorée des détails des frames, de nouvelles capacités de débogage WASM et des améliorations générales des performances.
L'onglet réseau offre trois nouvelles fonctionnalités permettant simplifier le processus de débogage :
- Les propriétés de la requête peuvent désormais être copiées directement à partir de l'onglet network en cliquant avec le bouton droit de la souris sur la requête spécifique et en sélectionnant "Copy value".
- La stack trace pour l'initiateur du réseau peut maintenant être copiée à partir de requêtes réseau individuelles en sélectionnant l'option "Copy stack trace".
- Un échec de Cross-Origin Resource Sharing > sera désormais correctement signalé dans la vue network.
Flexbox de CSS est un outil de conception puissant qui est souvent difficile à déboguer car il fonctionne sur les deux axes. Pour simplifier le processus de débogage, Chrome propose deux nouveaux badges. Le premier badge apparaît sur la vue de la hiérarchie des éléments et marque les éléments avec display:flex qui leur est appliqué.
Le second badge est un indicateur d'alignement contextuel basé sur les propriétés flexbox suivantes :
- flex-direction
- align-items
- align-content
- align-self
- justify-items
- justify-content
Tout en tenant compte de l'orientation basée sur :
- flex-direction
- direction
- writing-mode
Pour utiliser le débogage flexbox, les développeurs doivent l'activer sous l'onglet Settings> Experiments.
Les DevTools de Chrome 88 fournissent également une vue améliorée des détails du cadre qui comprend des informations supplémentaires des informations sur l'état d'isolement de Cross-origin, des informations dédiées sur les web workers du cadre et la possibilité de découvrir quelle image déclenche une autre ouverture de fenêtre.
Chrome 88 aligne également le débogage Wasm avec les capacités de débogage Javascript existantes. Lors de la suspension de l'exécution sur un point d'arrêt, les développeurs peuvent soit survoler les variables pour voir leurs valeurs actuelles, soit les évaluer dans la console.
Enfin, le démarrage de DevTools est désormais près de 40% plus rapide en termes de compilation JavaScript en raison de la réduction de la surcharge de performances de la sérialisation, de l'analyse et de la désérialisation lors du démarrage.
Chrome DevTools fournit un ensemble complet d'utilitaires pour le débogage des applications Web et est utilisé dans la plupart des navigateurs basés sur Chromium. L'équipe de développement de Chrome continue d'améliorer les DevTools et propose de nouvelles fonctionnalités avec chaque version de Chrome. Les développeurs peuvent suivre les dernières fonctionnalités sur le site Web des développeurs Google et discuter des fonctionnalités possibles, modifications et bogues sur la liste de diffusion.