Outils de développement Google Chrome pour les non-développeurs

Google Chrome fait partie des navigateurs les plus utilisés avec près de 65% des utilisateurs dans le monde. Et il y a une bonne raison à cela, cela fonctionne bien, il prend en charge une tonne de fonctionnalités Web, s'intègre nativement à tout ce que Google fournit et il est facile à utiliser.

Mais il y a plus que le côté utilisateur. Il est également très bien conçu pour les développeurs. Firefox est un autre excellent navigateur qui offre une superbe expérience de développement, même si sa base d'utilisateurs est relativement petite. Donc, pour cette raison, nous nous concentrons sur Chrome et ses DevTools, mais heureusement, l'interface utilisateur de la plupart des navigateurs reste très similaire, de sorte que les conseils ici seront bien traduits pour Firefox, Safari, Edge et d'autres navigateurs.

Qu'est-ce que Chrome DevTools?

Chrome DevTools est un ensemble d'outils de développement Web intégrés directement dans le navigateur Google Chrome. DevTools peut vous aider à modifier des pages à la volée et à diagnostiquer rapidement les problèmes, ce qui vous aide finalement à créer de meilleurs sites Web, plus rapidement.
Page d'accueil de la documentation Chrome DevTools

Les DevTools sont ce que la plupart des développeurs front-end (et souvent back-end) utilisent pour inspecter les performances d'une page Web, les balises HTML qui la définissent et les styles qui sont appliqués dans sa forme la plus basique. Il fournit une tonne d'autres fonctionnalités super utiles que nous examinerons tant qu'elles fonctionnent également dans le cas d'utilisation général pour les non-développeurs.

Les outils de développement sont ce que vous voyez dans la capture d'écran ci-dessus avec le code à gauche et diverses propriétés à droite. C'est la vue par défaut que vous verriez si vous appuyez sur Commande + Option + C (Mac) ou Ctrl + Maj + C (Windows, Linux, Chrome OS).

DevTools offre de nombreuses fonctionnalités, mais les plus notables seraient:

• La structure du document généré (HTML) une fois la page chargée et pendant son chargement.
• Ce que CSS s'applique à des éléments HTML spécifiques ainsi que ce qui est hérité des éléments parents.
  Affichez la taille de la fenêtre, les tailles des éléments, les rembourrages, les marges, les bordures, etc.
• La possibilité de tout modifier sur la page en dehors des scripts en cours d'exécution.
• Absent pour apporter des modifications au code qui sont enregistrés une fois que vous actualisez la page (pas possible par défaut cependant)
• Toutes les modifications sont côté client - ce qui signifie que, quoi que vous modifiiez, vous seul le verrez jusqu'à ce que vous actualisiez la page.
• Loin pour tester sans caches et avec une vitesse de réseau plus lente simulée.
• Des outils pour mesurer les performances et noter les performances d'une page, ainsi que des conseils pour les résoudre.
• Afficher la console de la page et ses erreurs, avertissements et messages ainsi qu'un moyen d'exécuter du code javascript à cet endroit.

C'est une liste très courte, mais elle couvre certaines des fonctionnalités les plus notables, principalement ce que nous allons couvrir.

En relation : Comment créer votre première extension Chrome

Pourquoi avez-vous besoin de DevTools, quels sont les cas d'utilisation?

Pour les développeurs, c'est évident, mais qu'en est-il des non-développeurs? Eh bien, il existe quelques astuces et astuces intéressantes qui vous rapprocheront d'un statut d'utilisateur avancé. Souvent, les propriétaires de sites détectent des problèmes sur le site, posent une ou deux questions et reçoivent parfois un extrait de code à «coller» pour résoudre un problème. L'une des façons dont les développeurs testent ces extraits de code consiste à les appliquer directement aux outils de développement. C'est également un moyen de fournir un bel aperçu à vos développeurs de l'apparence que vous souhaitez donner aux choses.

Appliquer le code CSS

La première et la plus courante utilisation de DevTools est de modifier et d'appliquer le CSS. CSS est ce qui définit l'apparence d'une page, c'est son esthétique. Pour ce faire, il vous suffit de pointer sur l'élément que vous souhaitez styliser, de faire un clic droit et de choisir «inspecter»

La même chose s'applique à la plupart des autres navigateurs, bien que le texte de l'élément de menu puisse varier légèrement. Une fois que vous faites cela, vous verrez les DevTools s'ouvrir et sélectionner directement l'élément dont vous avez besoin. Vous y verrez les deux parties principales des outils de développement. Les côtés HTML et CSS (gauche et droit):

Il peut être un peu difficile de trouver votre chemin dans la partie HTML, mais ne vous inquiétez pas, DevTools mettra en évidence les éléments lorsque vous les survolerez dans le panneau de gauche. Une fois que vous avez trouvé ce dont vous avez besoin, à droite, vous pouvez écrire des styles. Il y en a déjà quelques-uns ajoutés. Alors changeons l'arrière-plan pour lire et voir à quoi ça ressemble:

Dès que vous tapez, les styles de la page seront mis à jour. Vous pouvez écrire n'importe quel CSS ici et il sera appliqué comme les styles déjà sur la page. Si vous appuyez sur près de la fin des règles (sous «largeur»), il commencera à ajouter de nouveaux styles. Ou vous pouvez les écrire en haut où il est dit "element.style". Ensuite, si vous souhaitez partager cela avec vos développeurs, vous pouvez simplement sélectionner le code et le copier-coller. Astuce de pro, saisissez également le «sélecteur» des styles. Il s'agit du «.RNNXgb» dans la capture d'écran ci-dessus. Cela indiquera aux développeurs sur quel élément vous ajoutez des styles.

Connexes : WordPress CSS: Guide de base pour les débutants

Choisis une couleur

Une autre chose intéressante que vous pouvez faire est de savoir quelle couleur est exactement utilisée et d'utiliser un sélecteur de couleur directement à partir des DevTools pour voir d'autres couleurs. Cliquez simplement sur le carré à côté du code de couleur (où pointe la flèche au-dessus) et cela ouvrira un sélecteur de couleur.

Rechercher la police utilisée

Les développeurs CSS définissent également les polices utilisées, la taille de la police, la hauteur de ligne, la couleur, l'épaisseur de la police et d'autres propriétés liées à la typographie. Tous seraient affichés sur le côté droit. Tant qu'il n'est pas croisé, le style que vous voyez est appliqué. Découvrons quelle police est utilisée pour la recherche sur le formulaire Google. Faites un clic droit, inspectez et faites défiler jusqu'à ce que vous voyiez la police ou recherchez simplement dans le champ "Filtre" ci-dessus en haut de la section droite:

Si vous mettez à jour la police, vous verrez à quoi ressemblerait le site avec une police différente, une police vers laquelle vous voudrez peut-être passer bientôt. Bien sûr, un développeur devra plus tard modifier le code et résoudre les problèmes qu'un changement de police créerait, mais cette méthode fonctionne très bien pour tester les choses rapidement sans avoir défini d'environnement de développement.

Voici à quoi ressemblerait la page d'accueil de Google avec "Georgia" définie comme police. Pour y parvenir, nous avons dû mettre à jour plus d'une propriété, mais grâce à la bonne architecture CSS des développeurs Google, cela a été assez facile. La plupart du temps, un site mal rédigé vous oblige à mettre à jour une tonne de propriétés pour voir l'ensemble du site mis à jour.

En relation : Comment choisir les meilleures polices pour votre site Web

Cache, accélération et vitesse

Qu'est-ce que le cache? En termes plus simples, une ressource qui est enregistrée sur votre machine pour une utilisation future. Une ressource peut être JS, un fichier CSS ou une image. Si cela ne change pas à chaque fois que vous ouvrez une page, il n'est pas nécessaire de la télécharger à chaque fois, n'est-ce pas? Ainsi, le navigateur le conservera simplement sur votre ordinateur pendant un certain temps.

Mais que se passe-t-il, s'il y a eu un changement sur le serveur et que la configuration n'utilise pas les meilleures pratiques pour mettre à jour les ressources? Ou en bref, même si les développeurs ont changé la base de code, vous voyez toujours les anciens styles. Eh bien, vous pouvez simplement arrêter le cache et effectuer une "actualisation matérielle".

Ouvrez les outils de développement et accédez à l'onglet «Réseau». Cliquez ensuite sur "désactiver le cache" et effectuez une "actualisation matérielle":

Maintenant, pendant que vous parcourez les pages avec les DevTools ouverts, il n'y aura pas de ressources mises en cache de votre navigateur. Les pages se chargeront plus lentement à mesure que les ressources sont chargées à chaque fois, mais vous verrez les modifications. En règle générale, les développeurs gardent «Désactiver le cache» activé par défaut et ne le désactivent que lors du test d'interactions utilisateur réelles lorsque les temps de chargement sont importants.

Sur le même onglet après avoir actualisé une fois, vous verrez également des mesures sur la vitesse et le poids de la page. Combien de temps jusqu'à ce que le «chargement» soit déclenché (événement lorsque d'autres scripts s'attachent pour faire plus de travail), combien de fichiers sont demandés (31 requêtes ci-dessus, assez bonne quantité), combien a été téléchargé et ainsi de suite. C'est simple, le plus bas sera le mieux pour chaque valeur. Tout ce qui dépasse 100-150 demandes et vous commencerez à voir de gros problèmes de vitesse.

DevTools fournit également une simulation de connexion lente. Une fonctionnalité très utile pour voir comment votre site fonctionnerait sur un réseau plus lent comme la 3G. Pour l'activer, changez simplement la valeur à côté de «Désactiver le cache» et appuyez sur Actualiser. Lorsque vous actualisez, vous verrez chaque étape du chargement du site. Avec le cache désactivé, ce serait la première visite pour des utilisations régulières.

Voyez la différence de vitesse lorsque nous sélectionnons «3G lente» et actualisons par rapport au premier exemple qui utilise la vitesse de connexion réelle. Ici, vous pouvez également tester «Hors ligne» - comment fonctionnerait le site sans connexion Internet. Si cela semble étrange, ce n'est pas le cas, les applications Web progressives permettent déjà aux sites de fonctionner même sans connexion Internet s'ils ont été consultés au moins une fois par les visiteurs.

Les audits sont une autre fonctionnalité intéressante qui fournit une analyse conviviale de la vitesse d'une page. Vous pouvez simplement l'exécuter en allant dans les onglets «Audits» et en cliquant sur «Générer un rapport»:

À droite, vous avez quelques options pour décider de ce qui doit être testé, car les tests peuvent parfois prendre un certain temps (une minute ou deux), donc si vous les exécutez plusieurs fois, vous pouvez choisir exactement ce qui est nécessaire pour le test actuel. . Voici un exemple de résultat avec les options ci-dessus pour l'écran d'accueil de Google:

Un super score! 94 est très bon et met en valeur l'excellent travail réalisé sur cette page. N'oubliez pas que cela peut sembler très simple en surface, mais il existe une tonne de scripts en arrière-plan qui restent cachés et ralentissent les sites. Il existe de nombreuses autres mesures testées et vous pouvez le faire sur n'importe quel site pour trouver les problèmes rencontrés et ce qui peut être amélioré.

En relation : Que signifie vraiment «Accélérer votre site» et comment y parvenir?

Console DevTools

La vue finale que nous aborderons est la console. Facilement accessible en appuyant simplement sur la touche ESC ou en allant dans l'onglet «Console». Comme prévu, il n'y a pas d'erreurs, juste quelques avertissements qui ne devraient pas poser trop de problèmes:

Mais, si pour une raison quelconque après une mise à jour récente sur votre site, un composant interactif (comme une liste déroulante, un menu, une carte, un formulaire) cesse de fonctionner, vous pouvez toujours jeter un œil à la console. Il peut y avoir des erreurs qui indiquent quelle est la raison.

Voici un exemple de ce à quoi ressemblerait une telle erreur:

C'est un peu ironique d'utiliser la page de documentation des journaux d'erreurs pour montrer les erreurs, non? Dans tous les cas, cela sert un bon objectif. Ce sont des erreurs qui empêcheraient certaines fonctionnalités de fonctionner. Vous pouvez toujours partager ces informations avec vos développeurs et demander de l'aide. Les journaux sont publiés en direct lorsque vous interagissez avec la page, donc si vous cliquez sur un bouton et qu'une erreur apparaît, le script derrière celui-ci a probablement un problème.

En relation : Le chemin pour devenir un bon concepteur Web

Avis de sécurité : ce n'est pas une bonne idée de copier-coller du code dans la console sans comprendre ce qu'il fait. Surtout s'il provient d'une source non fiable et utilisé sur les applications / sites Web internes de votre entreprise. Facebook a publié un avertissement à cause de cela sur sa console:

Sommaire

DevTools est un outil incroyable qui aide à la fois les développeurs et les propriétaires de sites. Il vous donne tout ce dont vous avez besoin pour peaufiner et modifier une page. Grâce à lui, vous pouvez changer le CSS, modifier le HTML, supprimer et réorganiser les éléments de la page, voir les rapports de vitesse et les erreurs signalées.

Les propriétaires de sites peuvent l'utiliser pour présenter aux développeurs des idées et des exemples de leurs besoins qui pourraient être plus faciles à comprendre que d'écrire des paragraphes de texte. Avec une certaine connaissance CSS des propriétés de base, vous pouvez être beaucoup plus descriptif de vos besoins, ce qui réduira considérablement les allers-retours et le temps consacré aux nouvelles modifications.

Il y a une tonne d'autres fonctionnalités qui attendent d'être utilisées, n'ayez pas peur d'explorer!