Un guide des outils Web de Google

Page 1 sur 5: Afficher et modifier HTML, CSS et JS

Big G, alias Google, fournit aux développeurs une pléthore d'outils destinés à faciliter la conception Web. Dans cet article, nous passons en revue certains des meilleurs outils Google disponibles et vous montrons comment les utiliser dans votre flux de travail de conception et de développement Web.

Nous couvrons une gamme de outils de conception web ici, nous avons donc divisé le contenu en pages pour faciliter la navigation. Utilisez le menu déroulant ci-dessus pour accéder à la section qui vous intéresse.

Tant que les sites Web ne sont pas réduits, leur contenu peut être consulté par n'importe qui. Les outils de développement de Chrome simplifient les choses: sur cette page, nous vous montrons comment afficher et modifier le HTML, le CSS et le JavaScript. Sur page 2 , nous examinons de plus près comment utiliser le débogueur de Google pour corriger rapidement et facilement les erreurs de codage. Page 3 met en lumière le mode appareil de Google, que vous pouvez utiliser pour tester les versions mobiles de vos pages via votre ordinateur de bureau. Sur page 4 Nous présentons les bases dont vous devez être conscient pour commencer à mettre en œuvre les principes de Material Design dans vos conceptions. Pour terminer, page 5 se penche sur Progressive Web Apps, la dernière grande nouveauté de l'industrie de la conception Web.

Afficher et modifier HTML, CSS et JS

Tant que le code d'un site Web n'a pas été minifié, il peut être consulté par toute personne utilisant les outils de développement de Chrome. Tout d'abord, vérifiez la version de Chrome - les étapes suivantes fonctionnent sur la version 70.0.3538.67 exécutée sur une station de travail Ubuntu 64 bits. Ensuite, ouvrez le menu hamburger et cliquez sur Plus d'outils> Outils de développement.

Lancer Google

Lancez les outils de développement et vous devriez voir un écran similaire à celui-ci [cliquez sur l'icône en haut à droite pour agrandir]

Le navigateur répond en ouvrant un volet sur le côté gauche de votre écran. Il doit être redimensionné dans la première étape - par défaut, le navigateur n’attribue pas suffisamment de surface d’écran. Une fois terminé, l'écran ressemble à celui montré dans l'image ci-dessus.

Par défaut, les outils de développement démarrent avec l'onglet Console chargé. Il contient la sortie émise par les appels de la fonction de journalisation de la console. Les erreurs de rendu apparaissent également là-haut - si vous trouvez des lignes rouges, quelque chose ne va pas dans le balisage ou le code de votre page. Un clic sur la petite 'URL' sur le côté droit vous amène à la ligne, ce qui a fait apparaître le message.

Inspectez le balisage

Si votre intérêt se concentre sur le balisage, utilisez l'onglet Éléments illustré dans la figure. Il montre le balisage que le navigateur rend actuellement. Vous pouvez l'agrandir et le compacter d'une manière similaire à une vue arborescente - cachez les éléments inutiles pour éviter une surcharge sensorielle.

Le raison d’etre de l'onglet est l'affichage de la structure CSS. Les widgets «collectent» le CSS à partir de diverses sources, qui s’affichent de manière ordonnée et côte à côte. Dans le cas de l'exemple illustré dans la figure, nous voyons que les styles ont été fournis à la fois à partir de la balise «div» et du balisage «principal» de la page.

Chrome vous permet de modifier la plupart des attributs à la volée. Double-cliquez sur l'un des textes noirs pour transformer l'étiquette en éditeur, puis entrez la nouvelle valeur souhaitée et appuyez sur la touche Retour. Le moteur de rendu récupère ces modifications et les applique au DOM à la volée. Ceci est particulièrement utile lorsque vous essayez d'optimiser les couleurs ou les problèmes de placement; devoir recharger une page pour prévisualiser les modifications devient fastidieux.

Google

Un fond jaune indique que le contenu de la fenêtre est soumis à un filtrage [cliquez sur l'icône en haut à droite pour agrandir]

Enfin, jetez un œil à la zone de texte en haut du volet. Il vous permet de filtrer les éléments de balisage affichés: par exemple, entrez «mdc» pour limiter la vue à tous les styles hérités de la bibliothèque Material Design utilisée plus loin dans cet article. Lorsqu'un filtre est actif, un arrière-plan jaune apparaît d'une manière similaire à celle illustrée ci-dessus.

Effectuer une analyse détaillée

Dans les navigateurs Web modernes, le DOM ne se limite pas aux problèmes de présentation «statiques». Il régit également le flux et le placement des événements. Passez à l’onglet Calculé pour afficher une liste de propriétés «dimensionnelles». Ceci est incroyablement utile pour organiser les widgets à l'écran de manière exacte.

Le passage à l'onglet Écouteurs d'événements fournit une vue d'ensemble des flux d'événements. Utilisez cette fonction pour éliminer rapidement les problèmes liés à l'interaction de l'utilisateur: si un événement ne se déclenche pas, commencez par vérifier les connexions du gestionnaire d'événements.

Enfin, la fenêtre Propriétés vous permet de jeter un œil aux attributs stockés dans les nœuds DOM individuels. Si vous avez déjà passé beaucoup de temps à rechercher du code de manipulation DOM, la valeur est claire.

Page suivante: Comment utiliser le débogueur de Google

  • 1
  • deux
  • 3
  • 4
  • 5

Page actuelle: Afficher et modifier HTML, CSS et JS

Page suivante Utilisation du débogueur