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, nous découvrirons un filtrage amélioré du panneau "Réseau" (avec 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 pouvez obtenir des suggestions de saisie semi-automatique pour les valeurs de filtre valides, qui s'actualisent en temps réel à mesure que vous saisissez votre requête. Cette option 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].
Mise à niveau vers CodeMirror 4.0
CodeMirror, l'éditeur de texte JavaScript utilisé dans le panneau "Sources", est passé à la version 4. Suite à ce changement, plusieurs nouvelles fonctionnalités ont été ajoutées. 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 à partir du 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
Lors de l'affichage d'un instantané de segment de mémoire enregistré, notez le graphique à secteurs de stabilité qui donne 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 paramètres par défaut et actualiser **a été ajouté au panneau "Paramètres". Il correspond exactement à ce qui est affiché sur l'écran. [crbug.com/135451]
Il s'agit actuellement d'une fonctionnalité expérimentale. Vous pouvez essayer l'option Acrocher à gauche pour voir si elle convient à votre workflow. Les autres modes de mise en page sont ancrés à la fenêtre principale (à droite ou en bas) et détachés dans une fenêtre distincte. [crbug.com/134282]
"wheel" est désormais proposée en tant que point d'arrêt de l'écouteur d'événements, en plus des événements "click", "mousemove", "mousedown", etc. [crbug.com/347562].
Merci de votre attention !