Un certain nombre de fonctionnalités ont récemment été mises à jour dans les outils de développement Chrome, certaines mineures, d'autres majeures. Nous commencerons par les nouveautés du panneau "Élément", puis nous parlerons de la console, de la chronologie et plus encore.
Les règles de style désactivées sont copiées en tant que commentaires
Lorsque vous copiez des règles CSS entières dans le volet "Styles", les styles que vous avez désactivés sont désormais inclus. Ils apparaissent dans votre presse-papiers sous forme de commentaires. [crbug.com/316532]
Copier en tant que chemin d'accès CSS
"Copier en tant que chemin CSS" est désormais disponible en tant qu'élément de menu pour les nœuds DOM dans le panneau "Éléments" (comme l'élément de menu "Copier XPath").
La génération de sélecteurs CSS ne doit pas se limiter à vos feuilles de style/JavaScript. Elle peut également servir d'alternative aux stratégies de localisation dans les tests WebDriver. [crbug.com/277286]
Afficher les styles des éléments Shadow DOM
Les styles des éléments enfants d'un réseau d'ombre peuvent désormais être inspectés. [crbug.com/279390]
La méthode copy() de la console fonctionne pour les objets
La méthode copy() de l'API de ligne de commande fonctionne désormais pour les objets. Essayez copy({foo:'bar'}) dans le panneau de la console. Vous remarquerez qu'une version chaîne et formatée de l'objet est maintenant dans votre presse-papiers. [crbug.com/289348]
Filtre d'expression régulière pour la console
Filtrez les messages de la console à l'aide d'expressions régulières dans le panneau de la console. crbug.com/318308]
Supprimer facilement des écouteurs d'événements
Essayez getEventListeners(document).mousewheel[0]; dans le panneau de la console pour récupérer le premier écouteur d'événement de la molette de la souris sur le document. Poursuivez avec $_.remove(); pour supprimer cet écouteur d'événement ($_ = valeur de l'expression évaluée la plus récemment). crbug.com/309524]
Suppression des avertissements CSS
Les avertissements de type Valeur de propriété CSS non valide que vous avez peut-être vus sont désormais supprimés. Des efforts sont actuellement déployés pour rendre l'implémentation plus robuste contre les CSS réels, y compris les piratages de navigateur. crbug.com/309982]
Opérations de Vos trajets résumées dans un graphique à secteurs
Le panneau "Chronologie" contient désormais un graphique à secteurs dans le volet "Détails", qui indique visuellement la source de vos coûts de rendu. Vous pouvez ainsi identifier vos goulots d'étranglement en un coup d'œil.
Vous constaterez que la plupart des informations qui s'affichaient dans des popovers sont désormais présentées dans leur propre volet. Pour les afficher, lancez un enregistrement de la chronologie et sélectionnez un frame. Notez le nouveau volet "Détails", qui contient un graphique circulaire. Dans la vue "Cadres", vous obtenez des statistiques intéressantes, comme le nombre moyen d'images par seconde (1000ms/frame duration) pour le ou les cadres sélectionnés. [crbug.com/247786]
Détails de l'événement de redimensionnement d'image
Les événements de redimensionnement et de décodage d'image du panneau "Timeline" contiennent désormais un lien vers le nœud DOM du panneau "Elements".
Le lien "URL de l'image" vous permet d'accéder à la ressource correspondante dans le panneau "Ressources". crbug.com/244159]
Frames du GPU
Les frames qui se produisent sur le GPU sont désormais affichés en haut, au-dessus des frames du thread principal. crbug.com/305863]
Arrêter sur les écouteurs popstate
"popstate" est désormais disponible en tant que point d'arrêt d'écouteur d'événements dans la barre latérale du panneau "Sources". [crbug.com/88112]
Paramètres de rendu disponibles dans le panneau
Lorsque vous ouvrez le panneau, plusieurs volets s'affichent, dont le panneau "Rendering" (Affichage). Utilisez-le pour afficher des rectangles de peinture, un compteur d'images par seconde, etc. Cette option est activée par défaut dans "Settings" (Paramètres) > "Show "Rendering" view in console drawer" (Afficher la vue "Rendering" (Affichage) dans le panneau de la console).
Copier l'image en tant qu'URL de données
Vous pouvez désormais copier le contenu des composants Image du panneau "Ressources" en tant qu'URI de données (data:image/png;base64,iVBO...).
Pour essayer, recherchez la ressource d'image dans Frames > [Resource] > Images, effectuez un clic droit sur l'aperçu de l'image pour accéder au menu contextuel, puis sélectionnez "Copy Image as Data URL" (Copier l'image en tant qu'URL de données). crbug.com/321132]
Filtrage des URI de données
Si vous n'avez jamais pensé qu'ils y avaient leur place, sachez que vous pouvez désormais les exclure de l'onglet "Réseau". Sélectionner l'icône Filtre
Correction de bugs liés à la synchronisation du réseau
Si vous avez constaté que le téléchargement de votre image prenait apparemment 300 000 ans, nous vous prions de nous excuser. ;) Ces délais incorrects pour les ressources réseau ont été corrigés. crbug.com/309570]
Contrôle plus précis du comportement de l'enregistrement réseau
Le comportement du réseau d'enregistrement est légèrement différent. Tout d'abord, le bouton d'enregistrement fonctionne comme vous le feriez avec Vos trajets ou un profil de processeur. Comme vous vous en doutez, si vous actualisez la page lorsque les outils de développement sont ouverts, l'enregistrement réseau démarre automatiquement. Il se désactive ensuite. Si vous souhaitez capturer l'activité réseau après le chargement de la page, activez-le. Cela permet de visualiser plus facilement votre cascade sans que les requêtes réseau tardives ne faussent les résultats. crbug.com/325878]
Les thèmes DevTools sont désormais disponibles via des extensions
Les feuilles de style utilisateur sont désormais disponibles via les tests DevTools (case à cocher: "Autoriser les thèmes d'UI personnalisés"), ce qui permet à une extension Chrome d'appliquer un style personnalisé à DevTools. Pour en savoir plus, consultez Exemple d'extension de thème DevTools. crbug.com/318566]
C'est tout pour cette édition du récapitulatif DevTools. Si vous ne l'avez pas déjà fait, consultez l'édition de novembre.