Un certain nombre de fonctionnalités mises à jour ont récemment été intégrées aux outils pour les développeurs Chrome. Nous commencerons par les mises à jour du panneau "Éléments", puis nous passerons à la console, à la chronologie, et plus encore.
Règles de style désactivées copiées comme commentées
Si vous copiez l'intégralité des règles CSS dans le volet "Styles", les styles que vous avez désactivés seront désormais inclus dans le presse-papiers, tels qu'ils sont mis en commentaire. [crbug.com/316532].
Copier en tant que chemin CSS
L'option "Copier en tant que chemin CSS" est désormais disponible pour les nœuds DOM dans le panneau "Elements" (comme l'option "Copier XPath").
La génération de sélecteurs CSS ne doit pas nécessairement se limiter à vos feuilles de style/JavaScript. Ils peuvent également constituer des alternatives 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'une racine fantôme peuvent désormais être inspectés. [crbug.com/279390]
La fonction 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 stringifiée et mise en forme de l'objet se trouve désormais 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).
Supprimez facilement les écouteurs d'événements
Essayez getEventListeners(document).mousewheel[0]; dans le panneau de la console pour récupérer le premier écouteur d'événements de la molette de la souris sur le document. Poursuivez, essayez $_.remove() ; pour supprimer cet écouteur d'événements ($_ = valeur de l'expression la plus récemment évaluée). crbug.com/309524]
Suppression des avertissements CSS
Les avertissements de type Valeur de propriété CSS non valide que vous avez pu voir sont désormais supprimés. Nous nous efforçons de rendre l'implémentation plus robuste contre les CSS réels, y compris les piratages de navigateur. crbug.com/309982]
Opérations chronologiques résumées sous forme de graphique à secteurs
Le panneau "Timeline" contient désormais un graphique à secteurs dans le volet "Détails". Il indique visuellement la source de vos coûts de rendu, ce qui vous permet d'identifier d'un coup d'œil les goulots d'étranglement.
Vous constaterez que la plupart des informations qui apparaissaient dans les fenêtres pop-up ont été placées dans son propre volet. Pour l'afficher, démarrez un enregistrement de la chronologie et sélectionnez un cadre, notez le nouveau volet "Détails" qui contient un graphique à secteurs. En mode Images, vous obtenez des statistiques intéressantes, comme le FPS moyen (1000ms/frame duration) pour la ou les images sélectionnées. [crbug.com/247786]
Détails de l'événement de redimensionnement de l'image
Les événements de redimensionnement et de décodage des images dans le panneau de la timeline contiennent désormais un lien vers le nœud DOM dans le panneau "Éléments".
Le lien "URL de l'image" vous redirige vers la ressource correspondante dans le panneau "Ressources". crbug.com/244159.
Images GPU
Les frames sur le GPU sont désormais affichés en haut, au-dessus des frames sur le thread principal. crbug.com/305863]
Interruption sur les écouteurs popstate
popstate est désormais disponible en tant que point d'arrêt de l'écouteur d'événements dans la barre latérale du panneau "Sources". [crbug.com/88112].
Paramètres de rendu disponibles dans le panneau
L'ouverture du panneau affiche désormais un certain nombre de volets, dont le panneau "Rendu" (Rendu), qui permet d'afficher les rectangles de peinture, le compteur de FPS, etc. Cette option est activée par défaut dans Paramètres > Afficher la vue "Rendu" dans le panneau de la console".
Copier l'image en tant qu'URL de données
Le contenu des composants Image du panneau "Ressources" peut désormais être copié en tant qu'URI de données (data:image/png;base64,iVBO...).
Pour essayer, recherchez la ressource d'image dans Cadres > [Ressource] > Images, effectuez un clic droit sur l'aperçu de l'image pour accéder au menu contextuel, puis sélectionnez "Copier l'image en tant qu'URL de données". crbug.com/321132]
Filtrage de l'URI de données
Si vous n'avez jamais pensé qu'ils appartenaient, vous pouvez désormais exclure les URI de données de l'onglet "Réseau". Sélectionnez l'icône Filtre
Correction des bugs liés au temps réseau
Si vous avez constaté que le téléchargement de votre image aurait pris 300 000 ans, nous en sommes désolés. ;) Ces codes temporels incorrects pour les ressources réseau ont été corrigés. crbug.com/309570]
Le comportement d'enregistrement réseau offre plus de contrôle
Le comportement du réseau d'enregistrement est un peu différent. Tout d'abord, le bouton d'enregistrement se comporte comme vous l'espériez pour la chronologie ou un profil de processeur. Comme prévu, si vous actualisez la page alors que les outils de développement sont ouverts, l'enregistrement réseau démarre automatiquement. Il se désactivera alors. Par conséquent, si vous souhaitez capturer l'activité réseau une fois la page chargée, vous devez l'activer. Vous pouvez ainsi visualiser plus facilement votre cascade d'annonces sans que les requêtes réseau destructives ne faussent les résultats. crbug.com/325878]
Thèmes des outils de développement désormais disponibles via les extensions
Les feuilles de style utilisateur sont désormais disponibles via les tests des outils de développement (case à cocher "Autoriser les thèmes d'interface utilisateur personnalisés"), qui permettent à une extension Chrome d'appliquer un style personnalisé aux outils de développement. Consultez l'exemple d'extension de thème DevTools pour voir un exemple. crbug.com/318566]
Cette édition du récapitulatif des outils de développement est terminée. Si vous ne l'avez pas déjà fait, consultez l'édition de novembre.