1
00:00:01,440 --> 00:00:03,080
Este será um vídeo bastante rápido.

2
00:00:03,090 --> 00:00:07,800
Eu só quero destacar algumas das ferramentas do desenvolvedor que o Google Chrome nos dá para

3
00:00:07,800 --> 00:00:09,710
trabalhar com cada time e ver avaliar.

4
00:00:09,720 --> 00:00:12,260
Então, esta é a lista de tarefas que fizemos no último vídeo.

5
00:00:12,360 --> 00:00:16,950
Ainda é tão feio quanto era então e eu quero apenas destacar duas coisas.

6
00:00:17,130 --> 00:00:23,040
Então, o primeiro, podemos realmente ver a fonte da página, como fizemos com outras pessoas.

7
00:00:23,040 --> 00:00:28,210
Cada um deles saiu logo no início deste curso, mas isso não é tão útil.

8
00:00:28,230 --> 00:00:35,400
Não podemos realmente mudar isso ou qualquer coisa, mas o que podemos fazer é clicar direito e clicar no elemento de inspeção.

9
00:00:37,110 --> 00:00:40,170
E o que isso vai fazer é iniciar o inspetor de elementos.

10
00:00:40,320 --> 00:00:43,170
Então, você verá que recebemos essa nova visão aqui.

11
00:00:43,530 --> 00:00:47,080
Então, há um monte de guias que vamos aprender sobre tudo isso no tempo.

12
00:00:47,160 --> 00:00:50,270
Por enquanto, estamos apenas começando na guia deste elemento.

13
00:00:50,370 --> 00:00:56,700
Então, o que é isso, é realmente uma boa representação interativa de todos os elementos.

14
00:00:56,700 --> 00:00:59,280
Então você pode ver o nosso tipo de doctype.

15
00:00:59,370 --> 00:01:03,600
Cada equipe terá o chefe do corpo.

16
00:01:03,840 --> 00:01:11,970
e nossos aliados, bem como os insumos e a primeira coisa que quero que você note é que eu passo sobre esses elementos.

17
00:01:11,970 --> 00:01:13,650
Ou cada um ou nós

18
00:01:13,710 --> 00:01:15,420
Então vamos passar sobre este H-1.

19
00:01:15,690 --> 00:01:17,810
É realmente realçado aqui.

20
00:01:18,000 --> 00:01:23,230
Então eu passo aqui e está destacado para me mostrar aqui o que você está falando.

21
00:01:23,260 --> 00:01:27,960
Aqui está a caixa de seleção UL ou aqui é a entrada.

22
00:01:28,290 --> 00:01:30,020
Aqui está o texto e assim por diante.

23
00:01:30,120 --> 00:01:32,790
Então isso é útil por direito próprio.

24
00:01:32,790 --> 00:01:38,340
as coisas e ver o espaço que um elemento está ocupando e onde cai no fluxo de um documento.

25
00:01:38,340 --> 00:01:39,100
Apenas para depurar

26
00:01:39,360 --> 00:01:44,140
Mas o que eu realmente quero focar é a guia CSSA aqui a guia estilos.

27
00:01:44,190 --> 00:01:45,890
Então, vamos selecionar uma dessas coisas.

28
00:01:46,080 --> 00:01:51,600
Vamos selecionar este aliado com a classe completada a parte superior ou a segunda.

29
00:01:51,810 --> 00:01:53,000
E vou clicar nisso.

30
00:01:53,160 --> 00:02:00,600
E aqui estou realmente vendo uma visão interativa de todos os estilos que esse elemento

31
00:02:00,600 --> 00:02:01,700
aplicou atualmente.

32
00:02:02,070 --> 00:02:10,620
classe completa que tem esta linha de decoração de texto por causa do código de vôo que eu escrevi para todos os aliados.

33
00:02:10,770 --> 00:02:12,540
Então, vemos por causa da

34
00:02:12,540 --> 00:02:16,500
Tem uma borda vermelha e o que podemos fazer é realmente ativar ou desativá-la.

35
00:02:16,920 --> 00:02:21,360
Então, agora, alterei todos os aliados com limites vermelhos.

36
00:02:21,390 --> 00:02:29,800
Posso transformá-los novamente e posso mudar isso aqui para ser 6 pixels ou 10 ou um pixel.

37
00:02:30,210 --> 00:02:35,050
Posso clicar na cor e escolher uma nova cor, dar uma borda azul.

38
00:02:35,100 --> 00:02:38,900
Uma coisa que vou destacar embora isso realmente não altere nosso arquivo.

39
00:02:38,910 --> 00:02:44,360
Isso é apenas no navegador assim que eu atualizar esta página ou fechar a janela, minhas mudanças desaparecem.

40
00:02:44,370 --> 00:02:47,340
Então, isso é útil de duas maneiras diferentes.

41
00:02:47,340 --> 00:02:54,150
Um deles é trabalhar em seu próprio código sua própria página e testar as coisas e ver o que acontece quando você muda

42
00:02:54,420 --> 00:02:59,180
a cor ou você altera a borda ou você altera algum outro atributo de algumas de

43
00:02:59,340 --> 00:03:01,320
suas propriedades e apenas vê-la imediatamente.

44
00:03:01,320 --> 00:03:05,990
A outra coisa que é útil é realmente olhar para o código de outra pessoa.

45
00:03:06,150 --> 00:03:09,570
Então eu tenho o MVNO aberto apenas na página inicial.

46
00:03:10,200 --> 00:03:14,910
Digamos que queria saber mais sobre este texto aqui.

47
00:03:15,270 --> 00:03:20,790
O que posso fazer é realmente clicar corretamente nele e clicar no elemento de inspeção.

48
00:03:21,360 --> 00:03:25,000
E se eu clicar em um elemento em particular, ele será realçado para mim.

49
00:03:25,350 --> 00:03:31,670
Então você pode ver que saltou imediatamente para a etiqueta correta, que é um conhecimento compartilhado H-1.

50
00:03:31,680 --> 00:03:33,430
E então há uma extensão lá também.

51
00:03:33,450 --> 00:03:34,920
Ele diz para a web aberta.

52
00:03:35,240 --> 00:03:37,190
Então vamos dar uma olhada no H-1.

53
00:03:37,470 --> 00:03:40,530
E aqui chego todos os estilos.

54
00:03:40,650 --> 00:03:41,980
Então, o primeiro é a cor.

55
00:03:42,210 --> 00:03:46,630
Se eu mudar isso, a cor desse H-1 muda.

56
00:03:46,890 --> 00:03:54,390
para que eu me deslize para baixo e em algum momento alguém que Mazola escreveu os estilos que aplicam uma fonte.

57
00:03:54,720 --> 00:03:57,360
Então, digamos que queria conhecer a fonte

58
00:03:57,360 --> 00:04:03,060
Aqui, o que é e é o que vamos nos concentrar nos próximos vídeos é que isso

59
00:04:03,060 --> 00:04:06,030
pode ser herdado de outro seletor em algum lugar.

60
00:04:06,030 --> 00:04:11,200
Então, pode ter sido aplicado ao corpo inteiro não apenas H-1 diretamente.

61
00:04:11,250 --> 00:04:13,940
Então, se você se deslizar para baixo, parece que está bem aqui.

62
00:04:13,950 --> 00:04:21,640
Família de fontes aberta envia luz um sentido muito real se e isso parece ser assim.

63
00:04:22,560 --> 00:04:25,010
Então, isso não é para mostrar como nós realmente fazemos as fontes.

64
00:04:25,020 --> 00:04:26,950
Esse é um vídeo separado que vem em breve.

65
00:04:26,970 --> 00:04:31,800
Isso é apenas para mostrar que, se você quisesse encontrar algo sobre uma página,

66
00:04:31,800 --> 00:04:35,810
digamos que queria saber que tipo de elemento são esses botões aqui.

67
00:04:35,900 --> 00:04:45,330
O papel do ícone que eu posso selecionar é a lupa e passa o mouse sobre as coisas e clique e isso me mostrará aqui

68
00:04:45,330 --> 00:04:47,250
mesmo que é um olho.

69
00:04:47,340 --> 00:04:52,790
Então, um olho é outra tag usada para ícones e podemos ver todos os estilos aqui.

70
00:04:52,880 --> 00:04:57,810
A mesma coisa se eu quiser ver que elemento é aqui, eu posso clicar nela

71
00:04:57,810 --> 00:05:03,080
uma vez que eles têm a lupa e vejo que é uma marca de âncora e parece.

72
00:05:03,090 --> 00:05:08,730
marca de âncora que deve significar que eles estão configurando uma imagem de fundo em algum lugar e vamos ver onde é.

73
00:05:08,960 --> 00:05:11,190
Portanto, não é uma tag de imagem, é uma

74
00:05:11,270 --> 00:05:11,850
Aqui vamos nós.

75
00:05:11,850 --> 00:05:14,860
Eles estão configurando a imagem de fundo para ser esta imagem aqui.

76
00:05:15,090 --> 00:05:20,130
Então, para resumir tudo isso, eu só queria demonstrar que você pode abrir este Inspektor no Google Chrome e

77
00:05:20,130 --> 00:05:26,550
você pode ver o HMO e você pode ver a avaliação e não só você pode vê-lo, mas você pode manipulá-lo, você pode interagir com

78
00:05:26,550 --> 00:05:31,260
ele você pode tentar mudar as coisas e você pode fazer isso em seus próprios sites ou pode

79
00:05:31,260 --> 00:05:33,100
fazer isso no site de outras pessoas.

80
00:05:33,150 --> 00:05:37,740
útil quando você quer sair e replicar o design de alguém onde você deseja replicar de fato.

81
00:05:37,740 --> 00:05:39,130
E por isso é realmente

82
00:05:39,150 --> 00:05:43,500
E quando chegamos ao Javascript, você realmente vê que podemos fazer exatamente a mesma coisa para o javascript.