Você tem alguma pergunta sobre como visualizar o código fonte do elemento visual em seu Chromebook? Para fazer isso, você pode usar as ferramentas especiais DevTools no aplicativo Google Chrome, ou em qualquer página do navegador. As DevTools são uma lista de ferramentas especiais para desenvolvedores que são incorporadas no navegador Google Chrome. Ele permite que os usuários editem páginas em movimento e acompanhem possíveis problemas.
Como usar o Inspect Element on Chromebook
Para Chromebooks, o navegador padrão é o Google, para abrir as ferramentas de desenvolvimento neste dispositivo que você precisa.
- Abra a página que você deseja
- Clique nos 3 pontos no canto superior direito da aplicação
- Selecione “Mais ferramentas“.
- Clique em “Ferramentas para desenvolvedores“.
As formas alternativas de acesso a esta função são pressionar o botão F12 ou clicar com o botão direito do mouse no item desejado
Esta é uma instrução universal que se aplica à maioria dos navegadores no Windows ou em qualquer outro sistema.
Como usar o Inspect Element no Mac ou Iphone
É possível fazer o mesmo usando um Mac ou mesmo um iPhone? Você só terá que seguir alguns passos simples abaixo:
Como utilizá-lo no Mac
Se você tem um Mac, sua melhor opção de navegador é o Safari. A abertura das ferramentas de desenvolvimento neste navegador é ligeiramente diferente do mesmo processo no Chrome ou Firefox. Você precisará fazê-lo:
- Abra o navegador
- Clique em Safari no nome da guia
- Selecione “Preferências“.
- Em seguida, clique no ícone Equipamento avançado, ele será localizado na parte superior da tela
- Marque a caixa ao lado de Mostrar menu Desenvolver na barra de menu
Uma vez que você faça isso, Inspect Element estará disponível em suas páginas web. Você também pode chamá-lo com CMD + Opção + I.
Como utilizá-lo no iPhone
Se você quiser verificar como fica a versão móvel da página web em seu iPhone usando o recurso Inspect Elements, primeiro você precisará habilitar o Web Inspector para seu dispositivo iOS:
- Ir para Configurações
- Selecione o aplicativo Safari
- Vá até o fundo e clique em “Menu Avançado“.
- Agora ligue a caixa de seleção ao lado do “Web Inspector“.
Você também precisa habilitar o menu Desenvolvedor em seu Mac, conforme instruído acima. Uma vez habilitados estes recursos em seu dispositivo iOS e Mac, você deve ser capaz de ver o menu Developer no topo de seu Mac. Você precisa clicar nele para ver o iPhone em anexo e a página da web aberta nele. Quando você muda para uma página diferente, você também muda a janela do Web Inspector para essa página em seu Mac.
O que é o Painel Elemental
A primeira coisa a saber é o que é o Painel de Elementos. Se você quiser mudar o design ou qualquer elemento externo da página, você precisa editar seu CSS ou HTML. Você pode fazer isso usando uma ferramenta de desenvolvimento chamada Painel de Elementos. Ele permitirá que você verifique e altere sua página a partir do front-end. Alguns dos elementos que você pode ver ali são :
- Informações sobre a imagem, tais como seu tamanho e sua fonte
- Painel CSS – esta opção é usada para mudar o estilo externo da página. Aqui você pode alterar os parâmetros como fontes, tamanhos, cores, etc.
- Informações DOM ou painel DOM com esta opção você pode controlar a aparência da página. Você pode mudar a posição dos elementos e navegar completamente para os arquivos HTML
- O painel do console apresenta as novas características sob as ferramentas de desenvolvimento
- Elementos ouvintes de eventos
- Comentários HTML
- Feedback
Inspeção do tamanho natural e renderizado de uma imagem
Muitas vezes você precisa saber informações sobre uma foto em uma página web, você pode “inspecioná-la”. Isto lhe dá a possibilidade de saber, por exemplo, o tamanho da imagem. Para fazer isso, você precisa passar o ponteiro do mouse sobre o IMG enquanto estiver na Árvore DOM
Inspeção de imagem usada particular de um conjunto de fontes (srcset)
Então você pode verificar qual versão da imagem foi carregada e qual é a fonte exata do srcset. O srcset ajudará o navegador a solicitar a versão da imagem com o menor tamanho, que é um pouco maior do que a imagem real. Isto é usado para visualizar um conjunto de imagens com resoluções diferentes para que o navegador possa escolher. Primeiro, selecione o item IMG e, em seguida, verifique as informações de $0.currentSrc no console. Note que você pode aumentar as características das imagens com srcset se precisar usar dispositivos com um DPI mais alto.
