Réorganisez les onglets DevTools comme vous le souhaitez. Découvrez exactement où les événements de framework ont été liés et bloquez les requêtes réseau pour voir quels scripts tiers ralentissent votre application.
Meilleure navigation dans les panneaux: console au numéro 2, réorganisation des onglets et soulignement pratique
Après avoir déterminé les sections de DevTools les plus utilisées, il est apparu clairement que le panneau de la console en plein écran ne méritait pas la dernière position dans la barre d'onglets principale. En tant que deuxième panneau le plus utilisé, il est désormais le deuxième onglet. Cela est particulièrement important pour les résolutions inférieures, lorsque nous ne pouvons pas afficher tous les onglets en même temps.
Mais nous le comprenons. L'ordre classique fait partie de votre mémoire musculaire, et vous ressentirez un vertige pendant un certain temps. Ou peut-être, horreur, vous détestez la console en plein écran ! Ne vous inquiétez pas, nous sommes là pour vous. Vous pouvez désormais réorganiser les onglets en les faisant glisser, comme suit:
Les modifications que vous apportez à la barre d'onglets sont conservées et fonctionnent à la fois avec les onglets natifs et les onglets fournis par les extensions. En prime, des traits de soulignement animés et fluides sont disponibles. Parce que nous sommes gentils comme ça.
Compatibilité avec les écouteurs d'événements du framework
Les événements créés par des frameworks JavaScript tels que jQuery ont parfois été difficiles à gérer avec les outils pour les développeurs. En effet, la plupart des frameworks encapsulent les événements DOM natifs dans leur API d'événements personnalisés. L'analyse de l'écouteur d'événements ne révèle donc pas grand-chose sur ce qui se passe:
Toutefois, avec la nouvelle option "Écouteurs de framework" dans l'onglet "Écouteur d'événements", DevTools prend conscience de la partie de l'encapsulation du framework et la résout automatiquement. Désormais, les événements liés par des frameworks se comportent exactement comme leurs homologues natifs et vous indiquent où ils étaient réellement liés:
Le meilleur des autres
- Les outils de mise en forme personnalisés permettent aux langages transcompilés tels que CoffeeScript, de mieux formater leurs objets dans la console DevTools.
La timeline dispose d'une nouvelle boîte de dialogue plus esthétique pendant l'enregistrement, qui vous indique d'un coup d'œil l'état, l'heure et l'utilisation de la mémoire tampon.
De même, le panneau "Réseau" affiche désormais un indice utile lorsqu'il est vide:
Vous pouvez désormais filtrer les contenus mixtes dans le panneau "Réseau" à l'aide de la zone de saisie de filtre et la définir sur
mixed-content:displayed.
Comme toujours, n'hésitez pas à nous faire part de vos commentaires sur Twitter ou dans les commentaires ci-dessous, et signalez les bugs sur crbug.com/new.
À bientôt ! Paul Bakaus et l'équipe DevTools