Bonjour à tous. Dans la dernière édition du DevTools Digest, nous avons découvert les puissantes piles d'appels asynchrones et quelques autres. Dans cette édition, nous avons amélioré le filtrage du panneau "Réseau" (avec saisie semi-automatique), les fonctionnalités de modification avec le contenu Shadow DOM, les mises à jour de CodeMirror 4 et plus encore.
Filtrage du panneau "Réseau"
Vous pouvez désormais filtrer les ressources en fonction de certains champs, tels que "Domaine". L'un des formats de filtre est le suivant: Domain:website.com. En plus du filtrage, vous obtenez également des suggestions de saisie semi-automatique pour les valeurs de filtre valides, qui sont mises à jour en temps réel à mesure que vous saisissez votre requête. Cela peut s'avérer utile lorsque vous avez besoin de rechercher toutes les ressources desservies par un domaine particulier. [crbubg.com/258421].
Modifier le contenu Shadow DOM
Les outils de développement ont toujours permis de 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 basé sur JavaScript utilisé dans le panneau "Sources", a été mis à niveau vers la version 4. De nombreuses nouvelles fonctionnalités ont donc é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 à partir du nouveau champ de recherche du volet "Styles". Les résultats sont mis en évidence 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 consignez plusieurs messages à la suite, il peut être utile de connaître l'heure exacte à laquelle ils ont été consignés. Vous pouvez l'activer via les tests des outils de développement. [crbug.com/131714].
Répartition des statistiques de mémoire pour les instantanés de segments de mémoire
Lorsque vous consultez un instantané de segment de mémoire enregistré, notez le graphique à secteurs stastics, qui offre un aperçu visuel et codé par couleur de l'aspect de JavaScript qui consomme le plus de mémoire. Cette fonctionnalité est actuellement en phase de test. Pour l'essayer, activez l'option "Statistiques sur les instantanés de segments de mémoire". [crbug.com/346335]
Afficher la source d'origine d'un fichier console.log, 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'une chaîne semblable à util.js:46. Les outils de développement peuvent désormais corriger vos emplacements d'origine. Saisissez le fichier qui encapsule les messages du journal de la console dans la zone de saisie "Skipping through sources with particulier names" (Ignorer les sources portant des noms particuliers) pour que les outils de développement l'encadrent et qu'ils affichent la véritable source d'une instruction de journalisation. [crbug.com/231007]
Quelques ajouts plus petits, mais puissants
Actualisez le volet "Écouteurs d'événements" du panneau "Elements" après avoir ajouté ou supprimé de manière dynamique des écouteurs d'événements JavaScript. [crbug.com/341044].
Vous pouvez utiliser
Ctrl+pour vous concentrer sur la saisie dans la console. Cela peut s'avérer utile pour un workflow au clavier uniquement dans les outils de développement. [crbug.com/144943].Les suggestions de saisie semi-automatique en forme de bordure pour les valeurs (en pointillés, en pointillés, doubles et rainures) ont été mises à jour conformément aux spécifications. [crbug.com/349998]
Le bouton Rétablir les paramètres par défaut et actualiser **a été ajouté au panneau des paramètres. Il correspond exactement à la boîte. [crbug.com/135451].
Actuellement, cette fonctionnalité est expérimentale. Vous pouvez essayer la station station d'accueil à gauche pour vérifier si elle est adaptée à votre flux de travail. Les autres modes de mise en page sont ancrés dans la fenêtre principale (à droite ou en bas) et détachés dans une fenêtre distincte. [crbug.com/134282].
La roulette est désormais proposée en tant que point d'arrêt de l'écouteur d'événements, en plus des événements habituels de clic, déplacement de souris, déplacement du curseur, etc. [crbug.com/347562].
C'est tout pour le moment, merci de votre attention !