• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • Chrome DevTools est l'une des principales raisons pour lesquelles les développeurs refusent de toucher à tout autre navigateur.

    Mais la plupart d'entre nous n'utilisent qu'une poignée de fonctionnalités, ignorant de nombreuses autres fonctionnalités époustouflantes qui sont publiées silencieusement.

    Découvrons certains de ces gemmes cachées!

    Chacun a son système d'exploitation préféré, sa plate-forme matérielle, son type d'appareil, son facteur de forme, etc. Mais une chose est commune à tous: ils utilisent le navigateur Chrome et uniquement le navigateur Chrome! Je pense qu'il est prudent de dire que la guerre des navigateurs est terminée et que Chrome a gagné de manière convaincante.

    Les utilisateurs de Windows n'utilisent le navigateur par défaut que pour télécharger Chrome, puis utilisent Chrome, ignorant toutes les «recommandations» de Windows. Il en va de même pour les appareils Apple (en particulier les MacBook et les appareils à plus grand écran), où les utilisateurs et les développeurs évitent Safari, malgré les nombreuses affirmations et tactiques de conversion fortes d'Apple.

    Et si un appareil n'exécute pas Chrome, il y a de fortes chances qu'il exécute un spin-off compatible Chrome tel que courageux or Vivaldi. Oui, je sais, techniquement, ces navigateurs ne sont pas basé sur Chrome, mais c'est une autre discussion. L'utilisateur moyen peut utiliser ces d'autres navigateurs pour des raisons idéologiques ou spéciales, mais en ce qui concerne les développeurs, il n'y a pas d'autre navigateur en vue que Chrome.

    Même le fait qu'il s'agisse d'un monstre mangeur de mémoire est ignoré. La raison est simple: Chrome DevTools.

    Source de l'image: documentation officielle de Chrome DevTools

    Maintenant, si vous lisez cet article, il est sûr de supposer que vous êtes soit un utilisateur expérimenté, un bricoleur, un Web Developer, ou quelque chose le long de ces alignements. En tant que tel, aucun de nous n'a besoin d'une introduction aux DevTools, comment l'ouvrir, ses différentes fonctionnalités, etc.

    Au lieu de cela, sans perdre de temps, plongeons directement dans certaines des fonctionnalités moins connues mais étonnamment utiles des Chrome DevTools.

    Mode de conception

    L'une des choses que les développeurs font régulièrement est d'inspecter un élément de la page, puis de modifier son code HTML pour prévisualiser quelque chose ou tester l'effet d'une modification.

    Cependant, travailler avec HTML directement dans les DevTools n'est pas la chose la plus fluide qui soit - patauger dans la soupe de balises, vous fatiguer les yeux pour essayer de trouver le bon crochet d'ouverture / fermeture et gérer une quantité ridicule d'espaces lors de l'édition de texte (des espaces qui est clairement absent du document que vous voyez), voici quelques-uns des problèmes que vous pouvez avoir à résoudre. C'est encore pire si vous êtes un designer et que vous ne voulez pas passer au crible le désordre.

    Voici une capture d'écran de l'une des pages de ce site Web (Geekflare):

    Le HTML profondément imbriqué et les classes CSS mystérieuses et déroutantes sont typiques de tout site Web non trivial aujourd'hui, où l'expérience avec DevTools est pour le moins sous-optimale. 🤭

    Mais il existe une fonctionnalité DevTools appelée Mode Conception, qui peut atténuer la douleur dans de nombreux cas. En utilisant le mode Design (ce n'est pas le nom officiel, au fait; c'est juste ce que les gens l'ont nommé à cause de la façon dont il est activé et de ce qu'il fait - ne vous inquiétez pas, nous verrons très bientôt!), Des changements La page peut être créée visuellement et en direct, tout comme l'édition d'une feuille de calcul ou d'un éditeur de texte! Le seul hic, c'est que cette fonctionnalité n'est pas activée par défaut, et l'activer est un peu un casse-tête, en particulier pour les non-développeurs.

    Dans tous les cas, cela est assez simple; tout ce que vous avez à faire est de suivre les instructions ci-dessous. Selon l'endroit où vous vous situez sur la courbe de sophistication de l'utilisateur, cela peut être ridiculement facile ou moyennement difficile. Voici ce qu'il faut faire:

    • Assurez-vous que la page Web que vous souhaitez modifier est chargée et que vous la consultez actuellement (c'est-à-dire que l'onglet en question est celui qui est actif).
    • Ouvrez le panneau DevTools comme vous le faites habituellement (raccourci clavier, clics de souris, peu importe). J'aime utiliser les raccourcis clavier, et sur Mac, Opt + Cmd + I Fait le travail.
    • Maintenant, avec les DevTools ouverts, allez dans l'onglet appelé «Console». Certains d'entre vous lèvent peut-être les yeux au ciel en voyant à quel point tout cela semble ridicule et évident, mais bon, pensons aussi aux (centaines de?) Milliers de personnes qui ont du mal à travailler avec la console du navigateur et JavaScript (pour une raison quelconque ).
    • Cliquez sur la première ligne à côté du curseur, qui présentera ensuite une invite de saisie, et vous pouvez maintenant y écrire du code JavaScript (voir la capture d'écran un peu plus loin).
    • Nous devons maintenant écrire du code JavaScript. Ne vous inquiétez pas, car ce que vous devez écrire / taper est très court et simple: document.designMode = "on". Vous pouvez également copier et coller le code de cette page (si vous le faites, assurez-vous que le formatage n'est pas copié - nous n'avons besoin que de texte brut) ou si vous vous sentez en confiance, tapez-le.
    • Appuyez sur Entrée / Retour.
    "C'est ça??!"

    Ouais, c'est tout!

    Vous pouvez désormais modifier librement la page comme s'il s'agissait d'un document. Regardez cet exemple de vidéo dans lequel je modifie en direct le site Web Spotify en utilisant le mode Conception:

    La fonctionnalité du mode Design, aussi passionnante qu'elle soit, n'est pas une solution miracle; vous ne pouvez pas, par exemple, copier-coller facilement des boutons, modifier leur apparence, etc. Le nombre réel de choses qu'il peut faire par rapport à un éditeur de page Web visuelle de rêve est très faible; cependant, il résout les cas d'utilisation où le contenu doit être modifié visuellement et à la volée.

    Cela dit, il n'est pas trop exagéré de prétendre que les gens de Chrome testent la réception de cette fonctionnalité; s'il trouve une bonne réception et un cas d'utilisation fort, il est raisonnable de s'attendre à ce que des capacités d'édition plus puissantes suivront bientôt! 🤞🏻🤞🏻

    Simulation des conditions du réseau

    L'onglet Réseau de Chrome DevTools est peut-être le plus utilisé (je n'ai pas de données dessus, bien sûr, mais en tant que développeur Web, j'ai tendance à utiliser l'onglet Console peut-être 20 à 30% du temps, et le Onglet Réseau le reste du temps). Il nous donne toutes sortes d'informations sur les requêtes effectuées à partir de la page, leur type, les métadonnées / en-têtes, l'état, la progression du téléchargement des actifs (images, feuilles de style, etc.), les temps de chargement, etc. Avec une utilité aussi incroyable, il n'est pas étonnant que l'onglet Réseau soit le plus courant.

    Et pourtant, il est simple de rater la fonctionnalité dont nous discutons; vous n'avez peut-être pas remarqué une liste déroulante inoffensive indiquant l'évidence: en ligne.

    Si vous cliquez dessus, vous verrez une liste déroulante avec diverses options qui vous permettent de limiter la vitesse du réseau: 3G rapide, 3G lente, hors ligne, etc. Bien qu'il puisse y avoir plusieurs cas d'utilisation pour cette option, le plus courant est de tester le site Web les performances sur les réseaux lents ou le comportement des applications Web hors connexion (en supposant que de telles fonctionnalités ont été ajoutées).

    Prenons ceci pour un tour. Je vais régler le réseau sur «3G lente» et recharger la même page de la capture d'écran précédente. Avant de faire cela, remarquez dans la capture d'écran précédente comment sur ma connexion réseau actuelle (un haut débit de 40 Mbps), la plupart des actifs sont téléchargés en moins de 100 millisecondes.

    Et maintenant, il est temps de voir ce que la 3G lente lui fait.

    Quelle différence!

    Notez que le temps de chargement pour les actifs est maintenant dans la plage de 5 à 10 secondes. De plus, le site a terminé le chargement complet en 17.25 secondes! Oui, je sais ce que vous pensez, mais vous devez considérer que sur un réseau 3G lent, tout site Web moderne prendra plusieurs secondes à se charger. Que vous souhaitez le chargement rapide sur des réseaux lents est une autre chose, même si dans l'ensemble, il doit s'agir d'une décision commerciale où les gains justifient l'effort.

    Dans la capture d'écran ci-dessus, notez l'icône d'avertissement sur l'onglet Réseau. C'est la manière de Chrome de vous rappeler que vous avez apporté des modifications persistantes et non par défaut, et à moins que vous ne sachiez ce que vous faites, vous devriez peut-être le réinitialiser.

    Sélecteur de couleurs interactif

    L'inspection des éléments DOM dans DevTools est quelque chose que nous faisons tous à peu près tous les jours. Nous sommes également habitués à la section des détails CSS montrée à côté, et nous savons que nous pouvons la modifier et voir les résultats immédiatement.

    Une petite commodité cachée parmi tout cela est que si vous cliquez sur une propriété de couleur CSS, une interface de sélection de couleur familière apparaîtra!

    Notez que ce n'est pas un sélecteur de couleurs basique. Il vous permet de contrôler la transparence, de modifier les systèmes de couleurs utilisés, de choisir une couleur directement sur la page, et bien plus encore.

    Ainsi, la prochaine fois que vous expérimenterez les couleurs d'accentuation d'un site, par exemple, vous n'avez pas besoin de travailler ou de deviner la bonne valeur pour la nuance que vous avez en tête! En fait, de nombreuses personnes aiment concevoir des sites Web directement dans le navigateur; pour eux, des fonctionnalités comme celles-ci sont une aubaine! 🙂

    Surveillance des éléments des événements sur la page

    Nous sommes souvent dans une situation où nous souhaiterions savoir ce qui se passait avec cet élément spécifique qui nous intéresse. Cela est particulièrement vrai lorsque vous utilisez jQuery dans une base de code non triviale - que ce soit la vôtre ou celle d'autres; les gestionnaires d'événements et la logique sont répartis partout, et la recherche d'un bogue peut être un cauchemar.

    Heureusement, Chrome DevTools propose une fonctionnalité intéressante pour cela. Il observera pour vous l'élément indiqué et enregistrera les événements sur la console. Mais il y a un peu de déception: cette fonctionnalité n'a pas de capacités de sélection d'éléments basées sur les noms de classe CSS. Ainsi, la manière jQuery de $("#email") n'est pas disponible. 🙂

    Cela dit, voyons comment le faire fonctionner. Nous commençons par faire un simple «élément d'inspection» à l'aide de l'inspecteur DevTools. Oui, c'est le même outil d'inspection que nous utilisons tous les jours.

    Dans la capture d'écran ci-dessous, j'ai utilisé l'outil d'inspecteur pour mettre en évidence l'entrée de texte. Par «surligner», je ne veux pas dire que l'élément de la page est mis en surbrillance (ce n'est pas le cas, comme vous pouvez le voir); au lieu de cela, le curseur de l'inspecteur a été cliqué sur l'entrée de texte et le code HTML correspondant dans les DevTools est mis en surbrillance.

    Cela cible l'élément actuellement inspecté pour la surveillance des événements, ce qui rend l'élément accessible en tant que variable JavaScript spéciale appelée $0. Ensuite, en m'assurant de ne pas cliquer imprudemment ailleurs sur la fenêtre du navigateur (en particulier la partie code HTML), je clique sur la console et attache un écouteur d'événements pour cette entrée de texte. Pour cela, je n'ai besoin que d'une seule ligne de code: monitorEvents($0, 'mouse'). La partie «souris» ici indique à Chrome que je ne suis intéressé que par la surveillance des événements basés sur la souris.

    Dès que j'appuie sur Entrée / Retour, la surveillance est activée, et si je survole ou clique maintenant sur l'entrée de texte, ces événements sont enregistrés dans la console en tant qu'objets JavaScript:

    Comme vous pouvez le voir sur la capture d'écran, plusieurs types d'événements de souris ont été capturés lorsque j'ai cliqué sur l'élément, tapé mon nom, puis éloigné la souris (les événements de frappe, étant des événements de clavier, n'étaient pas enregistrés). Les événements sont eux-mêmes des objets JavaScript, comme le montre la capture d'écran; chaque objet événement contient une énorme quantité d'informations. Par exemple, j'ai développé l'objet événement "clic", et le nombre de propriétés ne pouvait pas tout tenir dans une seule capture d'écran!

    Je vous encourage vivement à essayer cette fonctionnalité tout de suite car elle vous évitera certainement beaucoup de maux de tête dans vos projets à venir!

    Rapports de performance du site Web

    Ces jours-ci, performance du site fait ou casse une entreprise / un site Web. Même une petite augmentation des performances se traduit par des gains de référencement massifs ainsi que par la satisfaction des utilisateurs. Mais comment savoir quelles parties de votre site Web nécessitent une attention particulière et lesquelles sont déjà bonnes?

    Vous avez besoin d'embaucher une équipe d'experts et d'attendre patiemment quelques jours?

    Eh bien, il y a des cas où cela doit être fait, mais heureusement, Chrome DevTools couvre le reste d'entre nous. Dans les dernières versions de Chrome (fin 2020), vous trouverez un Lighthouse onglet dans les DevTools. Il y a quelques mois, cela s'appelait Audits, et c'est assez déroutant, c'est le nom que vous trouverez dans les documents officiels au moment de la rédaction. Quoi qu'il en soit, le fait est que Lighthouse était un site Web à la mode pour vérifier gratuitement les performances du site Web, mais Google l'a ensuite supprimé (aucune raison n'a été donnée). Heureusement, la même fonctionnalité puissante a refait surface plus tard dans DevTools.

    Pour générer un rapport de performances, tout ce que vous avez à faire est d'appuyer sur un seul bouton après le chargement de la page qui vous intéresse:

    Comme vous pouvez le voir sur le côté droit de la capture d'écran, il existe quelques options pour contrôler la quantité d'informations que vous souhaitez (et, bien sûr, ce que vous souhaitez tester). Une fois que vous êtes satisfait des paramètres, appuyez sur ce gros bouton bleu, asseyez-vous et détendez-vous. Quelques secondes plus tard, vous aurez un rapport bénéfique ressemblant à ceci:

    Les chiffres que vous voyez dans la capture d'écran ci-dessus montrent le score global pour chaque catégorie. La catégorie des applications Web progressives (PWA) est grisée, probablement parce que ce site Web n'a pas de capacités PWA. De plus, comme vous pouvez le voir par la taille de la barre de défilement dans la capture d'écran (à l'extrême droite), c'est un long rapport.

    Voici à quoi ressemble une partie de la section sur les performances:

    Je ne prétendrai pas que Lighthouse et ses suggestions sont le Saint Graal des performances du site Web, mais celles-ci sont extrêmement utiles; c'est parce que les propriétaires de sites Web et les développeurs ont rarement une idée des problèmes existants et de la manière de les résoudre.

    Honnêtement, même moi, je me sens perdu en tant que développeur Web, car les performances et les tests ont tendance à être des spécialisations. En tant que tel, Lighthouse est un outil peu connu et sous-estimé, qui fait maintenant partie des Chrome DevTools, qui est d'une immense utilité pour les propriétaires d'entreprise et les développeurs / administrateurs système.

    Prouesses d'édition de code

    L'onglet Sources de DevTools nous permet d'accéder à divers fichiers chargés par le site Web. Il a également des capacités telles que l'édition de code, l'enregistrement d'extraits de code, etc. Cela ne devrait pas surprendre les développeurs Web. Cependant, DevTools dispose également de quelques fonctionnalités intégrées qui facilitent la vie des développeurs habitués à leurs IDE de code préférés.

    DevTools utilise des raccourcis clavier bien connus qui vous permettront de gagner du temps et de minimiser la frustration liée au code. Par exemple, Ctrl + D (ou Cmd + D sur Mac) peut être utilisé pour mettre en évidence plusieurs occurrences d'un mot. De même, en tenant Ctrl (ou Cmd sur Mac) et en cliquant à plusieurs endroits dans le code, vous obtenez plusieurs curseurs. Regardez la vidéo ci-dessous pour avoir une meilleure idée:

    Si vous pensez que c'est cool, assurez-vous de plonger dans la documentation officielle pour profiter de toutes les fonctionnalités d'édition de code que DevTools a à offrir.

    Contrôle de l'état de l'élément DOM

    Parfois, nous testons ou débogage quelque chose, mais le comportement que nous recherchons n'est disponible que dans un état d'élément particulier. Selon l'état dans lequel il se trouve, vous pourriez finir par passer un moment terrible; pour moi, c'est l'état «hover», car je me souviens avoir perdu d'innombrables minutes à essayer de chronométrer l'action de survol ou à ajouter du CSS temporaire supplémentaire, etc.

    Heureusement, Chrome DevTools offre un moyen simple de modifier l'état d'un élément inspecté. De plus, l'option pour le faire est là si nous faisons un clic droit sur l'élément (dans l'onglet Éléments), mais étant donné le nombre de fonctionnalités et les pressions d'une journée de travail, il est facile d'oublier ceci:

    Oui, c'est vraiment aussi simple que cela!

    Désormais, vous n'avez pas besoin de créer une logique de test conditionnel dans votre code, d'écrire du CSS supplémentaire ou de passer à travers d'autres obstacles lorsque vous observez un élément dans un état différent.

    Panneau d'outils

    Le dernier mais non le moindre sur cette liste est le panneau Outils. C'est une autre de ces fonctionnalités incroyablement utiles qui sont bien cachées et ne peuvent être vues qu'à l'aide de raccourcis clavier. Comme son nom l'indique, le panneau Outils n'est pas un outil unique mais un tableau de bord dans lequel presque toutes les fonctions de DevTool sont disponibles. Puisqu'il y a beaucoup trop de fonctions offrant la fonctionnalité globale de DevTools, une barre de recherche est disponible juste en haut.

    Pour activer le panneau Outils, assurez-vous que vous êtes dans le panneau DevTools, puis appuyez sur Ctrl + Shift + P (ou Cmd + Shift + P pour les utilisateurs Mac):

    Le panneau Outils regorge de fonctionnalités et de surprises. Par exemple, saviez-vous que vous pouviez prendre une capture d'écran directement à partir des DevTools?

    Je parie que non, car vous devrez ouvrir le panneau Outils et taper "capture d'écran" dans la barre de recherche pour le découvrir:

    Vous remarquerez également plusieurs options pour prendre des captures d'écran, dont une pour le nœud DOM sélectionné! Explorez davantage le panneau Outils et je vous assure que vous ne serez pas déçu!

    Si vous avez besoin de prendre une capture d'écran d'une page Web à distance, consultez le Outil de capture d'écran Geekflare.

    Conclusion

    Le navigateur Chrome lui-même est riche en fonctionnalités, mais là où il brille vraiment, c'est l'offre DevTools. Comme nous l'avons vu dans cet article, il existe de nombreuses fonctionnalités bien cachées - et d'autres cachées à la vue de tous - que la grande majorité des utilisateurs ne connaissent pas. Pourquoi ces fonctionnalités sont-elles masquées?

    Je suppose que certains d'entre eux sont très expérimental (comme le mode Conception), et les développeurs de Chrome veulent empêcher les utilisateurs quotidiens de trouver ces fonctionnalités. Pour le reste des nombreuses fonctionnalités, je pense que c'est simplement un cas de surcharge d'informations: s'il y a, disons, 120 fonctionnalités, certaines d'entre elles ayant des sous-fonctionnalités, etc., il est pratiquement impossible de concevoir la bonne interface utilisateur pour de telles fonctionnalités. un scénario. De plus, Google n'a historiquement pas fait un excellent travail avec ses UX des produits, il y a donc ça. 🤷🏻‍♂️

    Quoi qu'il en soit, j'espère que vous avez trouvé certaines de ces fonctionnalités utiles. Mais plus important encore, j'espère que cet article vous a donné une idée de ce qui se cache où pour que la prochaine fois que vous souhaiterez explorer ou rechercher quelque chose de particulier, vous sachiez où aller pour «creuser». 😆