Ce sera une vidéo assez rapide.
Je veux juste mettre en évidence certains des outils de développement que Google Chrome nous donne pour travailler avec chaque équipe et voir évaluer.
Donc c'est la liste des tâches à faire que nous avons faite dans la dernière vidéo.
Il est encore aussi laid que c'était alors et je tiens à souligner deux choses.
Donc, le premier, nous pouvons réellement voir la source de la page tout comme nous l'avons fait sur d'autres peuples.
Chacun est sorti très tôt dans ce cours, mais ce n'est pas si utile.
Nous ne pouvons pas vraiment changer cela ou quoi que ce soit, mais ce que nous pouvons faire est un clic droit et cliquez sur inspecter l'élément.
Et ce que cela va faire est de lancer l'inspecteur d'éléments.
Donc, vous verrez que nous obtenons cette nouvelle vue ici.
Donc, il y a un tas d'onglets que nous allons apprendre au sujet de tous ces temps.
Pour l'instant nous commençons juste à l'onglet de cet élément.
Donc ce que c'est, c'est que c'est en fait une belle représentation interactive de tous les éléments.
Donc vous pouvez voir que nous avons notre doctype.
Chaque équipe aura la tête du corps.
Ou chacun ou nous et nos alliés aussi bien que les entrées et la première chose que je veux que vous remarquiez est comme je planer au-dessus de ces éléments.
Alors on plane sur ce H-1.
Il est en fait mis en évidence ici.
Donc, je planer ici et il est mis en évidence pour me montrer ici est celle dont vous parlez.
Voici la case à cocher UL ou ici.
Voici le texte et ainsi de suite.
Donc c'est utile en soi.
Juste pour déboguer les choses et voir quel espace un élément prend et où il tombe dans le flux d'un document.
Mais ce que je veux vraiment mettre l'accent sur l'onglet CSSA ici l'onglet styles.
Alors choisissons une de ces choses.
Sélectionnons cet allié avec la classe complété le haut ou le second.
Et je vais cliquer dessus.
Et ici, je suis en train de voir une vue interactive de tous les styles que cet élément a appliqué à elle actuellement.
Donc nous voyons en raison de la classe terminée, il a cette ligne de décoration de texte à travers à cause du code de mouche que j'ai écrit pour tous les alliés.
Il a une bordure rouge et ce que nous pouvons faire est effectivement allumer ou éteindre.
Donc j'ai maintenant changé tous les alliés des frontières rouges.
Je peux les remettre en marche et je peux changer ceci vivant ici pour être 6 pixels ou 10 ou un pixel.
Je peux cliquer sur la couleur et choisir une nouvelle couleur lui donner une bordure bleue.
Une chose que je soulignerai bien que cela ne change pas vraiment notre dossier du tout.
Ce n'est que dans le navigateur dès que je rafraîchir cette page ou fermer la fenêtre de mes changements disparaissent.
Donc, cela est utile de deux manières différentes.
L'un est de travailler sur votre propre code de votre propre page et tester les choses et de voir ce qui se passe lorsque vous changez la couleur ou vous changez la frontière ou vous changez un autre attribut de certains de leurs biens et juste visuellement voir immédiatement.
L'autre chose qui est utile pour est en fait regarder le code de quelqu'un d'autre.
J'ai donc MVNO ouvert juste la page d'accueil.
Disons que je voulais en savoir un peu plus sur ce texte ici.
Ce que je peux faire est en fait clic droit sur elle et cliquez sur inspecter l'élément.
Et si je clique sur un élément en particulier, il sera effectivement mis en évidence pour moi.
Donc, vous pouvez voir qu'il a sauté tout de suite à la balise correcte qui est une connaissance partagée H-1.
Et puis il y a une période dans là aussi.
Il dit pour le web ouvert.
Regardons donc le H-1.
Et ici, j'obtiens tous les styles.
Donc la première est la couleur.
Si je change que la couleur de ce H-1 change.
Alors disons que je voulais connaître la police, donc je voudrais faire défiler vers le bas et à un moment quelqu'un que Mazola a écrit les styles qui applique une police.
Ici, la chose est et c'est ce sur quoi nous allons nous concentrer dans les prochaines vidéos, c'est que cela pourrait être hérité d'un autre sélecteur quelque part.
Ainsi, il aurait pu être appliqué à l'ensemble du corps non seulement H-1 directement.
Donc, si vous faites défiler vers le bas, il semble que c'est juste ici.
La famille de polices ouverte envoie une lumière un sens très réel si et qui ressemble à ça le fait.
Donc ce n'est pas pour vous montrer comment nous faisons réellement la police.
C'est une vidéo distincte à venir bientôt.
C'est juste pour vous montrer que si vous vouliez trouver quelque chose sur une page disons que je voulais savoir quel type d'élément sont ces boutons ici.
Le rôle de l'icône que je peux choisir est loupe et planer sur les choses et cliquez sur et il me montrera ici un oeil.
Ainsi, un œil est un autre tag utilisé pour les icônes et nous pouvons voir tous les styles ici.
Même chose si je veux voir quel élément est ici, je peux cliquer dessus une fois qu'ils ont la loupe et je vois que c'est une balise d'ancrage et il ressemble.
Ce n'est donc pas une balise d'image, c'est une balise d'ancrage qui doit signifier qu'ils définissent une image d'arrière-plan quelque part et nous allons voir où cela se trouve.
Et c'est parti.
Ils définissent l'image de fond pour être cette image ici.
Donc, pour résumer tout cela, je voulais simplement démontrer que vous pouvez ouvrir cet Inspektor dans Google Chrome et vous pouvez afficher HMO et vous pouvez afficher l'évaluation et non seulement vous pouvez le voir, mais vous pouvez le manipuler, vous pouvez interagir avec elle vous Pouvez essayer de changer les choses et vous pouvez le faire sur vos propres sites ou vous pouvez le faire sur quelqu'un d'autre site.
Il est donc très utile lorsque vous voulez sortir et reproduire la conception de quelqu'un où vous voulez répliquer en effet.
Et quand nous arrivons au Javascript vous voyez réellement que nous pouvons faire exactement la même chose pour le javascript aussi bien.