Édition multinavigateurs —

Les outils de développement du navigateur continuent d'évoluer, avec de nouvelles fonctionnalités améliorées ajoutées tout le temps. Il est difficile de garder une trace, surtout lorsque vous utilisez plusieurs navigateurs. Avec autant d'offres, il n'est pas surprenant que nous nous sentions dépassés et que nous utilisions les fonctionnalités que nous connaissons déjà au lieu de suivre les nouveautés.

C'est dommage, car certaines d'entre elles peuvent nous rendre beaucoup plus productifs.

]Ainsi, mon objectif avec cet article est de faire connaître certaines des fonctionnalités les plus récentes de Chrome, Microsoft Edge, Firefox et Safari. Espérons que cela vous donnera envie de les essayer et vous aidera peut-être à vous sentir plus à l'aise la prochaine fois que vous aurez besoin de déboguer un problème spécifique au navigateur.

Cela dit, commençons directement.

Les Chrome DevTools L'équipe a travaillé dur pour moderniser sa base de code (maintenant âgée de 13 ans). Ils ont été occupés à améliorer le système de construction, à migrer vers TypeScript, à introduire de nouveaux WebComponents, à reconstruire leur infrastructure de thème et bien plus encore. En conséquence, les outils sont désormais plus faciles à étendre et à modifier.

Mais en plus de ce travail moins orienté utilisateur, l'équipe a également fourni de nombreuses fonctionnalités. Permettez-moi de passer en revue quelques-uns d'entre eux ici, liés au débogage CSS. C'est une fonctionnalité utile, par exemple, pour les longues listes de photos où vous souhaitez que le navigateur positionne automatiquement chaque photo dans son conteneur déroulant. cette documentation MDNet jetez un œil aux démos d'Adam Argyle ici.

Les propriétés clés de l'accrochage au défilement sont :

• scroll-snap-typequi indique navigateur la direction dans laquelle l'accrochage se produit et comment il se produit ;
• scroll-snap-alignqui indique au navigateur où s'accrocher.

Chrome DevTools a introduit de nouvelles fonctionnalités qui aident à déboguer ces propriétés clés :[19659015]si un élément définit l'accrochage au défilement à l'aide de scroll-snap-typele panneau Éléments affiche un badge à côté.

• Vous pouvez cliquer sur le badge de défilement pour activer une nouvelle superposition. Lorsque vous le faites, plusieurs éléments sont mis en évidence sur la page :
  • le conteneur de défilement,
  • les éléments qui défilent dans le conteneur,
  • la position où les éléments sont alignés (marqué par un point bleu).

Cette superposition permet de comprendre facilement si et comment les choses se mettent en place après le défilement. Cela peut être très utile lorsque, par exemple, vos éléments n'ont pas d'arrière-plan et que les limites entre eux sont difficiles à voir. la page »/>

Bien que l'accrochage au défilement ne soit pas une nouvelle fonctionnalité CSS, l'adoption est plutôt faible (moins de 4% selon chromestatus.com), et depuis que la spécification a changé, tous les navigateurs ne la prennent pas en charge de la même manière .

J'espère que cette fonctionnalité de DevTools donnera envie aux gens de jouer davantage avec elle et finalement de l'adopter pour leurs sites.

]Requêtes de conteneur

Si vous avez fait n'importe quel type de développement Web ces dernières années, vous avez probablement entendu parler des requêtes de conteneur. C'est l'une des fonctionnalités CSS les plus demandées depuis longtemps et un problème très complexe à résoudre pour les fabricants de navigateurs et les rédacteurs de spécifications.

Si vous ne savez pas ce que sont les requêtes de conteneur, je vous suggère de passer par Stephanie Eckles. ' Article d'introduction sur les requêtes de conteneur CSS d'abord.

En quelques mots, ils permettent aux développeurs de définir la disposition et le style des éléments en fonction de la taille de leur conteneur. Cette capacité est un énorme avantage lors de la création de composants réutilisables, car nous pouvons les adapter à l'endroit où ils sont utilisés (plutôt que de s'adapter uniquement à la taille de la fenêtre pour laquelle les requêtes multimédias sont bonnes).

Heureusement, les choses bougent dans ce domaine. space et Chromium prend désormais en charge les requêtes de conteneur et l'équipe Chrome DevTools a commencé à ajouter des outils qui facilitent leur prise en main.

Les requêtes de conteneur ne sont pas encore activées par défaut dans Chromium (pour les activer, accédez à chrome ://flags et recherchez « requêtes de conteneur »), et cela peut prendre encore un peu de temps. De plus, le travail de DevTools pour les déboguer n'en est qu'à ses débuts. Mais certaines fonctionnalités précoces ont déjà débarqué.

• Lors de la sélection d'un élément dans DevTools dont les styles proviennent d'une règle @containercette règle apparaît dans la barre latérale Styles du panneau Éléments. Ceci est similaire à la façon dont les styles de requêtes multimédias sont présentés dans DevTools et permettra de savoir facilement d'où vient un certain style.

Comme le montre la capture d'écran ci-dessus, la barre latérale Styles affiche 2 règles qui s'appliquent à l'élément actuel. Celui du bas s'applique à tout moment à l'élément .media et fournit son style par défaut. Et celui du haut est imbriqué dans une requête de conteneur @container (max-width:300px) qui ne prend effet que lorsque le conteneur est plus étroit que 300px.

• En plus de cela, juste au-dessus du @container at-rule, le volet Styles affiche un lien vers l'élément auquel la règle se résout, et le survol de celui-ci affiche des informations supplémentaires sur sa taille. De cette façon, vous savez exactement pourquoi la requête de conteneur correspond.

L'équipe Chrome DevTools travaille activement sur cette fonctionnalité et vous pouvez vous attendre à beaucoup plus à l'avenir.

Chromium Collaboration

Avant d'aborder les fonctionnalités d'autres navigateurs, parlons de Chromium pour un peu. Chromium est un projet open source sur lequel Chrome, Edge, Brave et d'autres navigateurs sont construits. Cela signifie que tous ces navigateurs ont accès aux fonctionnalités de Chromium.

Deux des contributeurs les plus actifs à ce projet sont Google et Microsoft et, en ce qui concerne DevTools, ils ont collaboré sur quelques fonctionnalités intéressantes que j'aimerais partager. passez en revue maintenant.

CSS Layout Debugging Tools

Il y a quelques années, Firefox a innové dans ce domaine et a livré les tout premiers inspecteurs grid et flexbox. Les navigateurs basés sur Chromium permettent désormais également aux développeurs Web de déboguer facilement la grille et la flexbox. ma conversation BlinkOn).

Entre autres choses, DevTools dispose désormais des fonctionnalités de débogage de mise en page suivantes :

• Mettez en surbrillance plusieurs mises en page de grille et de flexibilité sur la page et personnalisez si vous souhaitez voir les noms de ligne de grille ou des nombres, des zones de grille, etc.

• Éditeurs flexibles et de grille pour jouer visuellement avec les différentes propriétés.

• Les icônes d'alignement dans la saisie semi-automatique CSS facilitent le choix des propriétés et des valeurs.

• Mettez en surbrillance le survol de la propriété pour comprendre à quelles parties de la page une propriété s'applique.

Grand aperçu)

Vous pouvez lire plus d'informations à ce sujet sur les sites de documentation de Microsoft et Google.

Localisation

Il s'agissait d'un autre projet de collaboration impliquant Microsoft et Google qui , maintenant, permet à tous les DevTools basés sur Chromium d'être traduits dans des langues autres que l'anglais. Cela impliquait de parcourir toute la base de code et de rendre les chaînes d'interface utilisateur localisables.

Le résultat en valait la peine. Si l'anglais n'est pas votre langue maternelle et que vous vous sentez plus à l'aise d'utiliser DevTools dans une autre langue, accédez aux paramètres (F1) et recherchez la liste déroulante des langues.

Voici un capture d'écran de ce à quoi cela ressemble dans Chrome DevTools :

Et voici à quoi ressemble Edge en japonais :

Microsoft est passé à Chromium pour développer Edge il y a plus de 2 ans maintenant. Bien qu'à l'époque, cela ait suscité de nombreuses discussions dans la communauté Web, peu de choses ont été écrites ou dites à ce sujet depuis lors. Les personnes travaillant sur Edge (y compris ses DevTools) ont été occupées cependant, et le navigateur a maintenant beaucoup de fonctionnalités uniques.

Être basé sur le projet open source Chromium signifie qu'Edge bénéficie de toutes ses fonctionnalités et corrections de bugs. . En pratique, l'équipe Edge ingère les modifications apportées au référentiel Chromium dans son propre référentiel.

Mais au cours de la dernière année environ, l'équipe a commencé à créer des fonctionnalités spécifiques à Edge en fonction des besoins des utilisateurs Edge et des commentaires. Edge DevTools a maintenant une série de fonctionnalités uniques que je vais passer en revue.

Outils d'ouverture, de fermeture et de déplacement

Avec près de 30 panneaux différents, DevTools est un logiciel vraiment compliqué dans n'importe quel navigateur. Mais, vous n'avez jamais vraiment besoin d'accéder à tous les outils en même temps. En fait, lors du premier démarrage de DevTools, seuls quelques panneaux sont visibles et vous pouvez en ajouter d'autres plus tard.

Par contre, il est difficile de découvrir les panneaux qui ne sont pas affichés par défaut, même s'ils pourrait vous être vraiment utile.

Edge a ajouté 3 fonctionnalités petites, mais puissantes, pour résoudre ce problème :

• un bouton de fermeture sur les onglets pour fermer les outils dont vous n'avez plus besoin,
• a + bouton (plus) à la fin de la barre d'onglets pour ouvrir n'importe quel outil,
• une option de menu contextuel pour déplacer les outils.

Le GIF suivant montre comment fermer et ouvrir les outils dans les zones principale et de tiroir peut être fait dans Edge.

Vous pouvez également déplacer des outils entre la zone principale et la zone de tiroir :

• un clic droit sur un onglet en haut affiche un élément « Déplacer vers le bas », et[19659020]un clic droit sur un onglet du tiroir affiche un élément "Déplacer vers le haut". ( Grand aperçu)

  Obtenir une aide contextuelle avec les info-bulles de DevTools

  Il est difficile pour les développeurs débutants comme pour les développeurs chevronnés de tout savoir sur DevTools. Comme je l'ai mentionné précédemment, il y a tellement de panneaux qu'il est peu probable que vous les connaissiez tous.

  Pour résoudre ce problème, Edge a ajouté un moyen d'aller directement des outils à leur documentation sur le site Web de Microsoft . ]Cette nouvelle fonction Info-bulles fonctionne comme une superposition à bascule qui couvre les outils. Lorsqu'ils sont activés, les panneaux sont mis en évidence et une aide contextuelle est fournie pour chacun d'eux, avec des liens vers la documentation.

  Vous pouvez démarrer les info-bulles de 3 manières différentes :

  • en utilisant le Ctrl + Shift + H raccourci clavier sur Windows/Linux (Cmd + Shift + H sur Mac);
  • en allant dans le menu principal (...), puis en allant dans Aide, et en sélectionnant « Toggle the DevTools Tooltips » ;
  • en utilisant le menu de commande et en tapant « Tooltips ”.

  

  Personnalisation des couleurs

  Dans les environnements d'édition de code, les développeurs adorent personnaliser leurs thèmes de couleurs pour rendre le code plus facile à lire et plus agréable à regarder. Étant donné que les développeurs Web passent également beaucoup de temps dans DevTools, il est logique qu'il ait également des couleurs personnalisables.

  Edge vient d'ajouter un certain nombre de nouveaux thèmes à DevToolsen plus du sombre déjà disponible. et thèmes lumineux. Au total, 9 nouveaux thèmes ont été ajoutés. Ceux-ci proviennent de VS Code et seront donc familiers aux personnes utilisant cet éditeur.

  Vous pouvez sélectionner le thème que vous souhaitez utiliser en allant dans les paramètres (en utilisant F1 ou le icône d'engrenage dans le coin supérieur droit), ou en utilisant le menu de commande et en tapant theme.

  

  À l'instar de l'équipe Chrome DevTools, les personnes travaillant sur Firefox DevTools se sont occupées d'une grande actualisation de l'architecture visant à moderniser leur base de code. De plus, leur équipe est un peu plus petite ces jours-ci, car Mozilla a dû se recentrer ces derniers temps. Mais, même si cela signifie qu'ils ont eu moins de temps pour ajouter de nouvelles fonctionnalités, ils ont quand même réussi à en publier quelques-unes vraiment intéressantes que je vais passer en revue maintenant.

  Débogage des barres de défilement indésirables

  Vous êtes-vous déjà demandé : est-ce que cette barre de défilement vient ? Je sais que je l'ai fait, et maintenant Firefox a un outil pour déboguer ce problème.

  Dans le panneau Inspecteur, tous les éléments qui défilent ont un badge scroll à côté d'eux, ce qui est déjà utile pour traiter arbres DOM profondément imbriqués. En plus de cela, vous pouvez cliquer sur ce badge pour révéler l'élément (ou les éléments) qui ont fait apparaître la barre de défilement.

  

  Vous pouvez trouver plus de documentation à ce sujet ici.

  Visualizing Tabbing Order

  La navigation sur une page Web avec le clavier nécessite l'utilisation de la touche tab pour parcourir les éléments pouvant être focalisés un par un. L'ordre dans lequel les éléments pouvant être focalisés sont focalisés lors de l'utilisation de tab est un aspect important de l'accessibilité de votre site et un ordre incorrect peut être source de confusion pour les utilisateurs. Il est particulièrement important d'y prêter attention, car les techniques CSS de mise en page modernes permettent aux développeurs Web de réorganiser très facilement les éléments d'une page.

  Firefox dispose d'un panneau Inspecteur d'accessibilité utile qui fournit des informations sur l'arborescence d'accessibilité, trouve et signale automatiquement divers problèmes d'accessibilité. , et vous permet de simuler différentes déficiences de la vision des couleurs.

  En plus de ces fonctionnalités, le panneau fournit désormais une nouvelle superposition de page qui affiche l'ordre de tabulation des éléments pouvant être focalisés.

  Pour l'activer, utilisez le "Afficher l'ordre de tabulation". case à cocher dans la barre d'outils.

  

  Vous pouvez trouver plus de documentation à ce sujet ici.

  Un tout nouvel outil de performance

  Peu de domaines de développement Web dépendent autant des outils que l'optimisation des performances. Dans ce domaine, le Panneau de performance de Chrome DevTools est le meilleur de sa catégorie.

  Au cours des dernières années, les ingénieurs de Firefox se sont concentrés sur l'amélioration des performances du navigateur lui-même, et pour les aider à le faire, ils ont construit un outil de profilage des performances. L'outil a été conçu à l'origine pour optimiser le code natif du moteur, mais a également pris en charge l'analyse des performances JavaScript dès le départ. . Essayez-le dès que vous en avez l'occasion.

  

  Entre autres choses, le nouveau profileur Firefox prend en charge le partage de profils avec d'autres afin qu'ils puissent vous aider à améliorer les performances de votre cas d'utilisation enregistré.

  Vous pouvez lire la documentation à ce sujet iciet en savoir plus à propos du projet sur leur référentiel GitHub.

  Safari Web Inspector

  Dernier mais non le moindre, passons en revue quelques-unes des fonctionnalités récentes de Safari.

  La petite équipe d'Apple a gardé lui-même très occupé avec un large éventail d'améliorations et de correctifs autour des outils. En savoir plus sur Safari Web Inspector peut vous aider à être plus productif lors du débogage de vos sites sur des appareils iOS ou tvOS. De plus, il possède un tas de fonctionnalités que les autres DevTools n'ont pas, et que peu de gens connaissent. outils dédiés à la visualisation et au débogage des grilles CSS, Safari était le dernier grand navigateur à ne pas l'avoir. Eh bien, maintenant c'est le cas !

  Fondamentalement, Safari a maintenant les mêmes fonctionnalités que les DevTools des autres navigateurs dans ce domaine. C'est génial car cela signifie qu'il est facile de passer d'un navigateur à l'autre tout en restant productif.

  • Les badges de grille sont affichés dans le panneau Éléments pour trouver rapidement des grilles.
  • Cliquer sur le badge bascule la superposition de visualisation sur le page.
  • Un nouveau panneau de mise en page est maintenant affiché dans la barre latérale. Il vous permet de configurer la superposition de la grille, de voir la liste de toutes les grilles de la page et de basculer la superposition pour elles.

  Grand aperçu)
  

  Ce qui est intéressant à propos de l'implémentation de Safari, c'est qu'ils ont vraiment cloué l'aspect performance de l'outil. Vous pouvez activer de nombreuses superpositions différentes à la fois et faire défiler la page sans que cela ne cause aucun problème de performances.

  L'autre chose intéressante est que Safari a introduit un panneau Elements à 3 volets, tout comme Firefox, qui vous permet de voir le DOM, les règles CSS pour l'élément sélectionné, et le panneau de mise en page en même temps.

  En savoir plus sur le CSS Grid Inspector sur cet article de blog WebKit.

  Une multitude d'améliorations du débogueur

  Safari disposait auparavant d'un panneau de ressources et de débogueur séparé. Ils les ont fusionnés dans un seul panneau Sources qui permet de trouver plus facilement tout ce dont vous avez besoin lors du débogage de votre code. De plus, cela rend l'outil plus cohérent avec Chromium auquel beaucoup de gens sont habitués.

  La cohérence pour les tâches courantes est importante dans un monde multi-navigateurs. Les développeurs Web doivent déjà tester sur plusieurs navigateurs, donc s'ils ont besoin d'apprendre un tout nouveau paradigme lorsqu'ils utilisent les DevTools d'un autre navigateur, cela peut rendre les choses plus difficiles qu'elles ne devraient l'être.

  Grand aperçu)
  

  Mais Safari s'est également récemment concentré sur l'ajout de fonctionnalités innovantes à son débogueur que les autres DevTools n'ont pas.

  Script Bootstrap :
  Safari vous permet d'écrire du code JavaScript dont l'exécution est garantie en premier avant l'un des scripts de la page. Ceci est très utile pour instrumenter les fonctions intégrées pour l'ajout d'instructions debugger ou la journalisation par exemple.

  

  Nouvelles configurations de points d'arrêt :
  Tous les navigateurs prennent en charge plusieurs types de points d'arrêt, tels que les points d'arrêt conditionnels, les points d'arrêt DOM, les points d'arrêt d'événement, etc.

  Safari a récemment amélioré l'intégralité de sa gamme de types de points d'arrêt en offrant tous un moyen de les configurer de manière approfondie. Avec cette nouvelle fonctionnalité de point d'arrêt, vous pouvez décider :

  • si vous souhaitez qu'un point d'arrêt n'atteigne que lorsqu'une certaine condition est vraie,
  • si vous souhaitez que le point d'arrêt suspende l'exécution du tout, ou exécute simplement du code,[19659020]ou même jouer un bip audio pour savoir qu'une ligne de code a été exécutée.

  

  queryInstances et queryHolders fonctions console :
  Ces deux fonctions sont vraiment utiles lorsque votre site commence à utiliser beaucoup d'objets JavaScript. Dans certaines situations, il peut devenir difficile de suivre les dépendances entre ces objets et des fuites de mémoire peuvent également apparaître.

  Safari dispose d'un outil de mémoire qui peut aider à résoudre ces problèmes en vous permettant d'explorer des instantanés de tas de mémoire . Mais parfois, vous savez déjà quelle classe ou quel objet est à l'origine du problème et vous voulez trouver quelles instances existent ou ce qui s'y réfère.

  Si Animal est une classe JavaScript dans votre application, alors queryInstances(Animal) renverra un tableau de toutes ses instances.

  Si foo est un objet dans votre application, alors queryHolders(foo) renverra un tableau de tous les autres objets qui ont des références à foo.

  Closing Thoughts

  J'espère que ces fonctionnalités vous seront utiles. Je ne peux que recommander d'utiliser plusieurs navigateurs et de se familiariser avec leurs DevTools. Se familiariser avec d'autres DevTools peut s'avérer utile lorsque vous devez déboguer un problème dans un navigateur que vous n'utilisez pas régulièrement.

  Sachez que les entreprises qui fabriquent des navigateurs ont toutes des équipes travaillant activement sur DevTools. Ils sont investis pour les rendre meilleurs, moins buggés et plus puissants. Ces équipes dépendent de votre retour pour construire les bonnes choses. Sans entendre les problèmes auxquels vous êtes confrontés ou les fonctionnalités qui vous manquent, il leur est plus difficile de prendre les bonnes décisions sur ce qu'il faut construire.

  Signaler des bogues à une équipe DevTools ne vous aidera pas seulement lorsque le correctif arrivera, mais peut également aider de nombreuses autres personnes qui ont été confrontées au même problème.

  Il convient de savoir que les équipes DevTools de Microsoft, Mozilla, Apple et Google sont généralement assez petites et reçoivent beaucoup de commentaires, donc signaler un problème ne signifie pas il sera corrigé rapidement, mais cela aide, et ces équipes sont à l'écoute.

  Voici quelques façons de signaler des bogues, de poser des questions ou de demander des fonctionnalités :

  • Firefox DevTools
    • Firefox utilise Bugzilla comme outil de suivi des bogues public et tout le monde est invité à signaler des bogues ou à demander de nouvelles fonctionnalités en créant une nouvelle entrée ici. Tout ce dont vous avez besoin est un compte GitHub pour vous connecter. ] (trouver la documentation sur le chat ici).
  • Inspecteur Web Safari
  • Outils de développement Edge
    • Le moyen le plus simple de signaler un problème ou de demander une fonctionnalité consiste à utiliser le bouton de commentaires dans DevTools (le petit bonhomme allumette dans le coin supérieur droit des outils).
    • Poser des questions à l'équipe fonctionne mieux sur Twitter en mentionnant le compte @EdgeDevTools.
  • Chrome DevTools
  • Chrome
    • Étant donné que Chromium est le projet open source qui alimente Google Chrome et Microsoft Edge (et d'autres), vous pouvez également signaler des problèmes sur le Chromium’s bug tracker.

  Sur ce, merci d'avoir lu !

  (vf, yk, il)[19659187]

  Le meilleur outil 2023 pour ta croissance Instagram !

  
  
  
  Source link

  Partager :

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)

  Articles similaires