Bonjour à tous, dans la dernière édition du DevTools Digest, nous avons pu découvrir les puissantes piles d'appels asynchrones et quelques autres. Dans cette édition, vous découvrirez un filtrage amélioré du panneau de réseau (avec la saisie semi-automatique), des fonctionnalités de modification avec le contenu Shadow DOM, des mises à jour de CodeMirror 4 et plus encore.
Filtrage du panneau "Network" (Réseau)
Vous pouvez désormais filtrer les ressources en fonction de certains champs, comme "Domaine". Voici un exemple de format de filtre: Domain:website.com. En plus du filtrage, vous obtenez des suggestions de saisie semi-automatique pour les valeurs de filtre valides, qui s'actualisent en temps réel lorsque vous saisissez votre requête. Cette fonctionnalité peut vous être utile lorsque vous devez trouver toutes les ressources diffusées par un domaine spécifique. [crbubg.com/258421]
Modifier le contenu Shadow DOM
DevTools a toujours pu modifier le code HTML standard dans le panneau "Elements". Ces fonctionnalités s'étendent désormais aux éléments faisant partie d'un Shadow DOM. [crbug.com/348991]
Passer à CodeMirror 4.0
CodeMirror, l'éditeur de texte JavaScript utilisé dans le panneau "Sources", est passé à la version 4. De nombreuses nouvelles fonctionnalités ont été ajoutées en conséquence. crbug.com/356878]
Recherche rapide d'une propriété CSS
Vous pouvez désormais rechercher des noms de propriétés, des valeurs ou des sélecteurs de règles dans le nouveau champ de recherche du volet "Styles". Les résultats sont mis en surbrillance en temps réel à mesure que vous saisissez votre requête. [crbug.com/278852]
Codes temporels à côté des messages de la console
Lorsque vous journalisez des messages de manière rapide, il peut être utile de voir l'heure exacte à laquelle ils sont enregistrés. Vous pouvez l'activer via les tests DevTools. [crbug.com/131714]
Répartition des statistiques de mémoire pour les instantanés de tas de mémoire
Lorsque vous affichez un instantané de tas de mémoire enregistré, notez le graphique à secteurs des statistiques, qui fournit un aperçu visuel, codé par couleur, de l'aspect de JavaScript qui consomme le plus de mémoire. Il s'agit actuellement d'une fonctionnalité expérimentale. Pour l'essayer, activez "Statistiques sur les instantanés de tas". [crbug.com/346335]
Afficher la source d'un fichier "console.log" d'origine, et non la version encapsulée
Vous disposez probablement d'une fonction de wrapper console.log, mais malheureusement, dans la console, tous vos messages proviennent d'un élément tel que util.js:46. Vous pouvez maintenant demander à DevTools de résoudre vos emplacements d'origine. Saisissez le fichier qui encapsule les messages de journal de la console dans la zone de saisie "Ignorer l'exploration des sources avec des noms particuliers" pour que DevTools le mette en boîte noire, puis affiche la véritable source d'une instruction de journal. [crbug.com/231007]
Quelques ajouts supplémentaires, mais efficaces
Actualisez le volet "Écouteurs d'événements" dans le panneau "Éléments" après avoir ajouté ou supprimé dynamiquement des écouteurs d'événements JavaScript. [crbug.com/341044]
Vous pouvez utiliser
Ctrl+pour mettre en surbrillance la saisie dans la console. Cela peut être utile pour un workflow uniquement au clavier dans les outils de développement. [crbug.com/144943]Les suggestions de saisie semi-automatique pour le style de bordure des valeurs (pointillé, en pointillés, double, rainuré) ont été mises à jour pour correspondre aux spécifications. [crbug.com/349998]
Le bouton Restaurer les valeurs par défaut et actualiser **a été ajouté au panneau des paramètres. Il fait exactement ce qu'il indique. [crbug.com/135451]
Il s'agit actuellement d'une fonctionnalité expérimentale. Vous pouvez essayer l'option Accrochage à gauche pour voir si elle convient à votre workflow. Les autres modes de mise en page sont l'ancrage dans la fenêtre principale (à droite ou en bas) et le détachement dans une fenêtre distincte. [crbug.com/134282]
"wheel" est désormais proposé en tant que point d'arrêt de l'écouteur d'événements, en plus des événements habituels de clic, de déplacement de la souris, de clic gauche, etc. [crbug.com/347562]
C'est tout pour le moment. Merci de votre attention.