8 fonctionnalités moins connues mais KILLER de Chrome DevTools

The Chrome DevTools is one of the biggest reasons developers refuse to touch any other browser.

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!

Everyone has their favorite operating system, hardware platform, device type, device form factor, etc. But one thing is common to all — they are running the Chrome browser and only the Chrome browser! I think it’s safe to say that the browser wars are over, and Chrome has won convincingly.

Windows users use the default browser only to download Chrome and thereafter use Chrome, ignoring all “recommendations” by Windows. Il en va de même pour les appareils Apple (en particulierally MacBooks et appareils à écran plus grand), où les utilisateurs et les développeurs évitent Safari, malgré les nombreuses affirmations fortes et tactiques de conversion 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, techniqueally, these browsers are not basé sur Chrome, mais c'est une autre discussion. L'utilisateur moyen peut utiliser ces other browsERS for ideological or special reasons, but when it comes to developers, there’s no other browser in sight except Chrome.

Même le fait qu'il s'agisse d'un monstre mangeur de mémoire est ignoré. La raison est simple: 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 inspect un élément sur la page puis modifiez son HTML en prevVoir quelque chose ou tester l'effet d'un changement.

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 même site Web (Geekflare):

L’ENTREPRISE deeplLe HTML imbriqué et les classes CSS mystérieuses et déroutantes sont typiques de tout site Web non trivial aujourd'hui, et c'est là que l'expérience avec DevTools est pour le moins sous-optimale. 🤭

Mais il existe une fonctionnalité DevTools appelée Design Mode, qui peut atténuer la douleur dans de nombreux cas. Utiliser le mode Conception (ce n'est d'ailleurs pas le nom officiel ; c'est juste le nom que les gens lui ont donné en raison de la façon dont il est activé)ated et ce qu'il fait — ne vous inquiétez pas, nous verrons très bientôt !), les modifications de la page peuvent être apportées visuellementally et en direct, tout comme éditer une feuille de calcul ou un éditeur de texte ! Le seul problème est que cette fonctionnalité n'est pas activée par défaut et que son activation est un problème. bit d'un mal de tête, en particulierally pour les non-développeurs.

Dans tous les cas, c’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 plus modeste.atetrès 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 en avez l'habitude.ally faire (raccourci clavier, clics de souris, quoiateversion). J'aime utiliser les raccourcis clavier, et sur Mac, Opt + Cmd + I Fait le travail.
• Now, with the DevTools open, go to the tab called “Console”. Some of you might be rolling your eyes at how silly, and obvious all this seems, but hey, let’s also think of the (hundreds of?) thousands of people out there who struggle while working with the browser console and JavaScript (for whateselon la raison).
• 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.

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 Conception, aussi intéressante soit-elle, n’est pas une solution miracle ; vous ne pouvez pas, par exemple, facilement copier-coller des boutons, modifier leur apparence, etc. Le nombre réel de choses qu'il peut faire par rapport à un éditeur de page Web visuel de rêve est très faible ; cependant, cela résout les cas d'utilisation où le contenu doit être modifié.ally 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 facile de passer à côté de la fonctionnalité dont nous parlons ; vous n'avez peut-être pas remarqué une liste déroulante inoffensive qui stateC'est une é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 cela pour un tour. Je vais régler le réseau sur « Slow 3G » et recharger la même page depuis le prevbelle capture d'écran. 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 ressources sont téléchargées 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 un chargement rapide sur des réseaux lents est une autre affaire, même si dans l'ensemble, il doit s'agir d'une décision commerciale dont les gains justifient l'investissement. 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

Inspectintégrer des éléments DOM dans DevTools est quelque chose que nous faisons tous presque tous les jours. Nous sommes également habitués à la section de détails CSS présentée à côté, et nous savons que nous pouvons la modifier et voir les résultats immédiatement.ately.

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.

So, the next time you’re experimenting with a site’s accent colors, for example, you don’t need to work out or guess at the right value for the shade you have in mind! In fact, many people like to design websites directly in the browser; for them, features like these are a godsend! 🙂

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

Nous sommes souvent dans une situation où nous souhaitons savoir ce qui se passe avec cet élément spécifique qui nous intéresse.ally true lors de l'utilisation de jQuery dans une base de code non triviale - que ce soit la vôtre ou celle des autres ; les gestionnaires d'événements et la logique sont répartis partout, et traquer un bug peut être un cauchemar.

Heureusement, Chrome DevTools dispose d'une fonctionnalité intéressante pour cela. Il observera l'indicateurated pour vous et enregistrez les événements sur la console. Mais il y a un bit d'une déception : cette fonctionnalité n'a pas de capacités de sélection d'éléments basées sur les noms de classes CSS. Donc, la méthode jQuery de $("#email") n'est pas disponible. 🙂

Cela dit, voyons comment le faire fonctionner. Nous commençons par faire un simple «inspect élément" à l'aide des DevTools inspectou. Oui, c'est exactement la même chose inspectoutil ionique que nous utilisons tous les jours.

Dans la capture d'écran ci-dessous, j'ai utilisé le inspectou un outil pour mettre en surbrillance la saisie de texte. Par « mettre en surbrillance », 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) ; plutôt, le inspectou le curseur a été cliqué sur la saisie de texte et le code HTML correspondant dans DevTools est mis en surbrillance.

Faire cela cible actuellement inspected pour la surveillance des événements, qui rend l'élément accessible en tant que variable JavaScript spéciale appelée $0. Next, making sure I don’t click elsewhere on the browser window négligemment (en particulierally la partie code HTML), je clique sur la console et j'attache un écouteur d'événement pour cette saisie de texte. Pour cela, il me suffit 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éeated, et si je survole ou clique maintenant sur la saisie 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 sur les performances du site Web

Ces jours-ci, performance du site fait ou défait une entreprise/un site Web. Même une petite augmentation des performances de traductionates à des gains massifs en matière de référencement ainsi qu'à 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 le latepremières versions de Chrome (late 2020), vous trouverez un Lighthouse dans l'onglet DevTools. Il y a quelques mois, cela s'appelait Audits, et, ce qui prête à confusion, c'est le nom que vous trouverez dans la documentation officielle au moment de la rédaction. Quoi qu’il en soit, le fait est que Lighthouse était autrefois un site Web à la mode permettant de vérifier gratuitement les performances d’un site Web, mais Google l’a ensuite supprimé (aucune raison n’a été donnée). Heureusement, la même fonctionnalité puissante later a refait surface dans DevTools.

Pour générerate 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 jeater, vous aurez un rapport utile ressemblant à ceci :

Les chiffres que vous voyez dans la capture d'écran ci-dessus montrent le score global pour chaque catesanglant. Le catesanglant pour Applications Web progressives (PWA) est grisé, probablement parce que ce site Web n'a pas de fonctionnalités PWA. De plus, comme vous pouvez le voir par la taille de la barre de défilement dans la capture d'écran (tout à 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 sortes de spécialisations. En tant que tel, Lighthouse est un lieu peu connu et sous-estimé.ated, qui fait désormais partie de Chrome DevTools, qui est d'une immense utilité pour les propriétaires d'entreprise et les développeurs/administrateurs système.

Prouesses en édition de code

L'onglet Sources de DevTools nous permet d'accéder à divers fichiers chargés par le site Web. Il dispose également de fonctionnalités telles que l'édition de code, l'enregistrement d'extraits de code, etc. Cela ne devrait pas surprendre.rise aux développeurs Web. Cependant, DevTools intègre également quelques fonctionnalités 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ôler l'élément DOM state

Parfois, nous testons ou débogueons quelque chose, mais le comportement que nous recherchons n'est disponible que dans un élément particulier.ate. En fonction de ce que state c'est vrai, vous pourriez finir par passer un moment terrible ; pour moi, c'est le style "hover"ate, car je me souviens avoir perdu d'innombrables minutes à essayer de chronométrer l'action de survol ou à ajouter du CSS supplémentaire et temporaire, etc.

Heureusement, Chrome DevTools propose un moyen simple de modifier le state d'un inspectélément éd. De plus, la possibilité de 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 la pression d'une journée de travail, il est facile de négliger cela :

Oui, c'est really c'est simple!

Désormais, vous n'avez plus besoin d'intégrer une logique de test conditionnel dans votre code, d'écrire du CSS supplémentaire ou de franchir d'autres obstacles lorsque vous observez un élément dans un état différent.ate.

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 activerate 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 fonctionnalités supplémentaires.rises. 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 Geekflare Outil de capture d'écran.

Conclusion

The Chrome browseuh çaself est riche en fonctionnalités, mais là où il estally Shins est l’offre DevTools. Comme nous l'avons vu dans cet article, il existe un certain nombre de 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 rendre difficile la recherche de ces fonctionnalités pour les utilisateurs quotidiens. Pour le reste des nombreuses fonctionnalités, je pense qu'il s'agit simplement d'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 quasiment impossible de concevoir la bonne interface utilisateur pour de telles fonctionnalités. un scénario. Aussi, l'historique de Googleally n'a pas fait du bon travail avec son 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». 😆