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

Paul Bakaus
Paul Bakaus

Utilisez le nouveau menu contextuel du panneau DOM pour modifier efficacement les nœuds. Déboguez les services workers directement via le panneau "Resources" (Ressources). Faites votre choix parmi toutes les nuances Material Design dans le sélecteur de couleurs. Accédez plus facilement aux bibliothèques Blackbox JS.

Nouveau menu contextuel amélioré du panneau DOM

le nouveau menu contextuel DOM.

Nous avons analysé les actions les plus utilisées dans le panneau DOM et conclu que le menu contextuel du 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 certain état tel que :active ou :hover, ou de modifier son code HTML. Et 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 les service workers via le panneau "Resources"

Les service workers sont très utiles une fois qu'ils ont été configurés, mais il peut être difficile de les comprendre dès le début. Pour les déboguer, il fallait quitter les Outils de développement et ouvrir chrome://serviceworker-internals/ dans une nouvelle fenêtre du navigateur.

Service workers pour les ressources

Ce n'est plus vrai aujourd'hui. Vous pouvez désormais déboguer les service workers du domaine actuel directement depuis le panneau "Resources" (Ressources). Il s'agit encore d'un travail en cours, mais il représente déjà une nette amélioration par rapport au statu quo précédent.

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

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

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

Accédez plus facilement aux bibliothèques JavaScript Blackbox dans les paramètres

Le Blackboxing avec JavaScript existe depuis un certain temps, mais n'était pas très facile à trouver. C'est une fonctionnalité qui vous permet de mettre un script d'une page en noir pour vous concentrer uniquement sur le code que vous avez créé (et de masquer tout le code d'encapsulation).

Elle se trouve désormais dans les paramètres. Essayez cette commande :

Blackbox

Le meilleur des autres

  • Vous n'avez pas accès aux boutons d'activation de rendu ? Les paramètres d'affichage ont été déplacés vers le menu principal des outils de développement (sous "Plus d'outils"). En plus des options habituelles (le lecteur d'empreinte digitale), nous avons également déplacé l'option "Émuler un support d'impression".
  • Vous en avez assez de saisir chrome://inspect dans l'omnibox ? L'option Inspecter les appareils est désormais également disponible dans le nouveau menu principal, sous "Autres outils".
  • Vous avez fermé par erreur l'un des onglets du panneau que vous pouvez fermer, comme Rendu ou Recherche ? Vous pouvez les rouvrir avec le nouveau menu sur la gauche.

Comme toujours, donnez-nous votre avis sur Twitter ou dans les commentaires ci-dessous, et signalez les bugs sur crbug.com/new.

Nous vous attendons le mois prochain !
Paul Bakaus et l'équipe DevTools