Este será um vídeo bastante rápido.
Eu só quero destacar algumas das ferramentas do desenvolvedor que o Google Chrome nos dá para
trabalhar com cada time e ver avaliar.
Então, esta é a lista de tarefas que fizemos no último vídeo.
Ainda é tão feio quanto era então e eu quero apenas destacar duas coisas.
Então, o primeiro, podemos realmente ver a fonte da página, como fizemos com outras pessoas.
Cada um deles saiu logo no início deste curso, mas isso não é tão útil.
Não podemos realmente mudar isso ou qualquer coisa, mas o que podemos fazer é clicar direito e clicar no elemento de inspeção.
E o que isso vai fazer é iniciar o inspetor de elementos.
Então, você verá que recebemos essa nova visão aqui.
Então, há um monte de guias que vamos aprender sobre tudo isso no tempo.
Por enquanto, estamos apenas começando na guia deste elemento.
Então, o que é isso, é realmente uma boa representação interativa de todos os elementos.
Então você pode ver o nosso tipo de doctype.
Cada equipe terá o chefe do corpo.
e nossos aliados, bem como os insumos e a primeira coisa que quero que você note é que eu passo sobre esses elementos.
Ou cada um ou nós
Então vamos passar sobre este H-1.
É realmente realçado aqui.
Então eu passo aqui e está destacado para me mostrar aqui o que você está falando.
Aqui está a caixa de seleção UL ou aqui é a entrada.
Aqui está o texto e assim por diante.
Então isso é útil por direito próprio.
as coisas e ver o espaço que um elemento está ocupando e onde cai no fluxo de um documento.
Apenas para depurar
Mas o que eu realmente quero focar é a guia CSSA aqui a guia estilos.
Então, vamos selecionar uma dessas coisas.
Vamos selecionar este aliado com a classe completada a parte superior ou a segunda.
E vou clicar nisso.
E aqui estou realmente vendo uma visão interativa de todos os estilos que esse elemento
aplicou atualmente.
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.
Então, vemos por causa da
Tem uma borda vermelha e o que podemos fazer é realmente ativar ou desativá-la.
Então, agora, alterei todos os aliados com limites vermelhos.
Posso transformá-los novamente e posso mudar isso aqui para ser 6 pixels ou 10 ou um pixel.
Posso clicar na cor e escolher uma nova cor, dar uma borda azul.
Uma coisa que vou destacar embora isso realmente não altere nosso arquivo.
Isso é apenas no navegador assim que eu atualizar esta página ou fechar a janela, minhas mudanças desaparecem.
Então, isso é útil de duas maneiras diferentes.
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
a cor ou você altera a borda ou você altera algum outro atributo de algumas de
suas propriedades e apenas vê-la imediatamente.
A outra coisa que é útil é realmente olhar para o código de outra pessoa.
Então eu tenho o MVNO aberto apenas na página inicial.
Digamos que queria saber mais sobre este texto aqui.
O que posso fazer é realmente clicar corretamente nele e clicar no elemento de inspeção.
E se eu clicar em um elemento em particular, ele será realçado para mim.
Então você pode ver que saltou imediatamente para a etiqueta correta, que é um conhecimento compartilhado H-1.
E então há uma extensão lá também.
Ele diz para a web aberta.
Então vamos dar uma olhada no H-1.
E aqui chego todos os estilos.
Então, o primeiro é a cor.
Se eu mudar isso, a cor desse H-1 muda.
para que eu me deslize para baixo e em algum momento alguém que Mazola escreveu os estilos que aplicam uma fonte.
Então, digamos que queria conhecer a fonte
Aqui, o que é e é o que vamos nos concentrar nos próximos vídeos é que isso
pode ser herdado de outro seletor em algum lugar.
Então, pode ter sido aplicado ao corpo inteiro não apenas H-1 diretamente.
Então, se você se deslizar para baixo, parece que está bem aqui.
Família de fontes aberta envia luz um sentido muito real se e isso parece ser assim.
Então, isso não é para mostrar como nós realmente fazemos as fontes.
Esse é um vídeo separado que vem em breve.
Isso é apenas para mostrar que, se você quisesse encontrar algo sobre uma página,
digamos que queria saber que tipo de elemento são esses botões aqui.
O papel do ícone que eu posso selecionar é a lupa e passa o mouse sobre as coisas e clique e isso me mostrará aqui
mesmo que é um olho.
Então, um olho é outra tag usada para ícones e podemos ver todos os estilos aqui.
A mesma coisa se eu quiser ver que elemento é aqui, eu posso clicar nela
uma vez que eles têm a lupa e vejo que é uma marca de âncora e parece.
marca de âncora que deve significar que eles estão configurando uma imagem de fundo em algum lugar e vamos ver onde é.
Portanto, não é uma tag de imagem, é uma
Aqui vamos nós.
Eles estão configurando a imagem de fundo para ser esta imagem aqui.
Então, para resumir tudo isso, eu só queria demonstrar que você pode abrir este Inspektor no Google Chrome e
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
ele você pode tentar mudar as coisas e você pode fazer isso em seus próprios sites ou pode
fazer isso no site de outras pessoas.
útil quando você quer sair e replicar o design de alguém onde você deseja replicar de fato.
E por isso é realmente
E quando chegamos ao Javascript, você realmente vê que podemos fazer exatamente a mesma coisa para o javascript.