Condensé des outils de développement : modifications efficaces des éléments, débogage des service workers et nuances Material Design

Utilisez le nouveau menu contextuel du panneau DOM pour modifier efficacement les nœuds. Déboguer les nœuds de calcul de services directement via le panneau "Ressources". Faites votre choix parmi toutes les nuances Material Design du sélecteur de couleur. Bibliothèques JavaScript en boîte noire plus facilement.

Nouveau menu contextuel amélioré du panneau DOM

menu contextuel du nouveau DOM.

Nous avons analysé les actions les plus utilisées dans le panneau "DOM" et conclu que le menu contextuel par clic droit devait être désencombré et réorganisé.

Il est désormais beaucoup plus facile de masquer ou de supprimer rapidement un élément, de déclencher un état spécifique comme :active ou :hover, ou de modifier son code HTML. Si vous utilisez un pavé tactile et que vous ne voulez pas faire un clic droit, cliquez plutôt sur les trois petits points à côté de l'élément sélectionné.

Déboguer des service workers via le panneau "Ressources"

Les service workers sont fantastiques une fois qu'ils sont configurés, mais il peut être difficile de les comprendre dès le début. Le fait qu'il soit nécessaire de quitter les outils pour les développeurs et d'ouvrir chrome://serviceworker-internals/ dans une nouvelle fenêtre de navigateur pour les déboguer aggravait la situation.

Service workers dans les ressources

Ce n'est plus le cas. Vous pouvez maintenant déboguer les service workers du domaine actuel directement depuis le panneau "Resources" (Ressources). Ce processus est encore en cours, mais il représente déjà une nette amélioration par rapport à l'ancien état des choses.

Toutes les couleurs: nuances de Material Design dans le sélecteur de couleurs

Il y a quelques semaines, nous avons ajouté la palette Material Design au sélecteur de couleurs pour vous proposer des couleurs primaires et audacieuses prêtes à l'emploi. Pour concevoir une page entière, vous avez inévitablement besoin d'un accès complet à tous les stores Material Design. Nous les avons donc intégrés.

Pour afficher les nuances, appuyez de manière prolongée sur l'une des couleurs primaires, puis cliquez sur une nuance.

Bibliothèques JavaScript en boîte noire plus facilement dans les paramètres

Le blackboxing JavaScript existe depuis un certain temps, mais n'était pas très facile à découvrir. Il s'agit d'une fonctionnalité qui vous permet de placer un script dans une boîte noire sur une page afin de vous concentrer uniquement sur le code que vous avez créé (et de masquer tout le code d'encapsulation).

Nous l'avons maintenant déplacée dans les paramètres. Essayez cette commande :

Blackboxing

Le meilleur des autres

  • Vous n'avez pas accès aux boutons d'activation/de désactivation de l'affichage ? Les paramètres de rendu ont été déplacés vers le menu principal des outils de développement (sous "Plus d'outils"). En plus des éléments suspects habituels (par exemple, le compteur de FPS), nous avons également déplacé l'option "Émuler les supports d'impression".
  • Vous en avez assez de saisir chrome://inspect dans l'omnibox ? L'option Inspecter les appareils se trouve désormais également dans le nouveau menu principal, sous "Plus d'outils".
  • Vous avez fermé par erreur l'un de ces onglets du panneau pouvant être fermés, comme "Affichage" ou "Recherche" ? Vous pouvez désormais les rouvrir à l'aide du nouveau menu sur la gauche.

Comme toujours, n'hésitez pas à nous donner votre avis via Twitter ou les commentaires ci-dessous, et signalez vos bugs à l'adresse crbug.com/new.

À bientôt !
Paul Bakaus et l'équipe DevTools