1
00:00:01,440 --> 00:00:03,080
Ce sera une vidéo assez rapide.

2
00:00:03,090 --> 00:00:09,710
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.

3
00:00:09,720 --> 00:00:12,260
Donc c'est la liste des tâches à faire que nous avons faite dans la dernière vidéo.

4
00:00:12,360 --> 00:00:16,950
Il est encore aussi laid que c'était alors et je tiens à souligner deux choses.

5
00:00:17,130 --> 00:00:23,040
Donc, le premier, nous pouvons réellement voir la source de la page tout comme nous l'avons fait sur d'autres peuples.

6
00:00:23,040 --> 00:00:28,210
Chacun est sorti très tôt dans ce cours, mais ce n'est pas si utile.

7
00:00:28,230 --> 00:00:37,110
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.

8
00:00:37,110 --> 00:00:40,170
Et ce que cela va faire est de lancer l'inspecteur d'éléments.

9
00:00:40,320 --> 00:00:43,170
Donc, vous verrez que nous obtenons cette nouvelle vue ici.

10
00:00:43,530 --> 00:00:47,080
Donc, il y a un tas d'onglets que nous allons apprendre au sujet de tous ces temps.

11
00:00:47,160 --> 00:00:50,270
Pour l'instant nous commençons juste à l'onglet de cet élément.

12
00:00:50,370 --> 00:00:56,700
Donc ce que c'est, c'est que c'est en fait une belle représentation interactive de tous les éléments.

13
00:00:56,700 --> 00:00:59,280
Donc vous pouvez voir que nous avons notre doctype.

14
00:00:59,370 --> 00:01:03,600
Chaque équipe aura la tête du corps.

15
00:01:03,840 --> 00:01:13,650
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.

16
00:01:13,710 --> 00:01:15,420
Alors on plane sur ce H-1.

17
00:01:15,690 --> 00:01:17,810
Il est en fait mis en évidence ici.

18
00:01:18,000 --> 00:01:23,230
Donc, je planer ici et il est mis en évidence pour me montrer ici est celle dont vous parlez.

19
00:01:23,260 --> 00:01:27,960
Voici la case à cocher UL ou ici.

20
00:01:28,290 --> 00:01:30,020
Voici le texte et ainsi de suite.

21
00:01:30,120 --> 00:01:32,790
Donc c'est utile en soi.

22
00:01:32,790 --> 00:01:39,100
Juste pour déboguer les choses et voir quel espace un élément prend et où il tombe dans le flux d'un document.

23
00:01:39,360 --> 00:01:44,140
Mais ce que je veux vraiment mettre l'accent sur l'onglet CSSA ici l'onglet styles.

24
00:01:44,190 --> 00:01:45,890
Alors choisissons une de ces choses.

25
00:01:46,080 --> 00:01:51,600
Sélectionnons cet allié avec la classe complété le haut ou le second.

26
00:01:51,810 --> 00:01:53,000
Et je vais cliquer dessus.

27
00:01:53,160 --> 00:02:01,700
Et ici, je suis en train de voir une vue interactive de tous les styles que cet élément a appliqué à elle actuellement.

28
00:02:02,070 --> 00:02:12,540
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.

29
00:02:12,540 --> 00:02:16,500
Il a une bordure rouge et ce que nous pouvons faire est effectivement allumer ou éteindre.

30
00:02:16,920 --> 00:02:21,360
Donc j'ai maintenant changé tous les alliés des frontières rouges.

31
00:02:21,390 --> 00:02:29,800
Je peux les remettre en marche et je peux changer ceci vivant ici pour être 6 pixels ou 10 ou un pixel.

32
00:02:30,210 --> 00:02:35,050
Je peux cliquer sur la couleur et choisir une nouvelle couleur lui donner une bordure bleue.

33
00:02:35,100 --> 00:02:38,900
Une chose que je soulignerai bien que cela ne change pas vraiment notre dossier du tout.

34
00:02:38,910 --> 00:02:44,360
Ce n'est que dans le navigateur dès que je rafraîchir cette page ou fermer la fenêtre de mes changements disparaissent.

35
00:02:44,370 --> 00:02:47,340
Donc, cela est utile de deux manières différentes.

36
00:02:47,340 --> 00:03:01,320
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.

37
00:03:01,320 --> 00:03:05,990
L'autre chose qui est utile pour est en fait regarder le code de quelqu'un d'autre.

38
00:03:06,150 --> 00:03:09,570
J'ai donc MVNO ouvert juste la page d'accueil.

39
00:03:10,200 --> 00:03:14,910
Disons que je voulais en savoir un peu plus sur ce texte ici.

40
00:03:15,270 --> 00:03:20,790
Ce que je peux faire est en fait clic droit sur elle et cliquez sur inspecter l'élément.

41
00:03:21,360 --> 00:03:25,000
Et si je clique sur un élément en particulier, il sera effectivement mis en évidence pour moi.

42
00:03:25,350 --> 00:03:31,670
Donc, vous pouvez voir qu'il a sauté tout de suite à la balise correcte qui est une connaissance partagée H-1.

43
00:03:31,680 --> 00:03:33,430
Et puis il y a une période dans là aussi.

44
00:03:33,450 --> 00:03:34,920
Il dit pour le web ouvert.

45
00:03:35,240 --> 00:03:37,190
Regardons donc le H-1.

46
00:03:37,470 --> 00:03:40,530
Et ici, j'obtiens tous les styles.

47
00:03:40,650 --> 00:03:41,980
Donc la première est la couleur.

48
00:03:42,210 --> 00:03:46,630
Si je change que la couleur de ce H-1 change.

49
00:03:46,890 --> 00:03:57,360
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.

50
00:03:57,360 --> 00:04:06,030
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.

51
00:04:06,030 --> 00:04:11,200
Ainsi, il aurait pu être appliqué à l'ensemble du corps non seulement H-1 directement.

52
00:04:11,250 --> 00:04:13,940
Donc, si vous faites défiler vers le bas, il semble que c'est juste ici.

53
00:04:13,950 --> 00:04:21,640
La famille de polices ouverte envoie une lumière un sens très réel si et qui ressemble à ça le fait.

54
00:04:22,560 --> 00:04:25,010
Donc ce n'est pas pour vous montrer comment nous faisons réellement la police.

55
00:04:25,020 --> 00:04:26,950
C'est une vidéo distincte à venir bientôt.

56
00:04:26,970 --> 00:04:35,810
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.

57
00:04:35,900 --> 00:04:47,250
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.

58
00:04:47,340 --> 00:04:52,790
Ainsi, un œil est un autre tag utilisé pour les icônes et nous pouvons voir tous les styles ici.

59
00:04:52,880 --> 00:05:03,080
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.

60
00:05:03,090 --> 00:05:11,190
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.

61
00:05:11,270 --> 00:05:11,850
Et c'est parti.

62
00:05:11,850 --> 00:05:14,860
Ils définissent l'image de fond pour être cette image ici.

63
00:05:15,090 --> 00:05:33,100
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.

64
00:05:33,150 --> 00:05:39,130
Il est donc très utile lorsque vous voulez sortir et reproduire la conception de quelqu'un où vous voulez répliquer en effet.

65
00:05:39,150 --> 00:05:43,670
Et quand nous arrivons au Javascript vous voyez réellement que nous pouvons faire exactement la même chose pour le javascript aussi bien.