Como inspecionar elemento pelo celular?
Ao inspecionar os elementos da interface, podemos descobrir a sua identificação única, que pode ser um id, name, Xpath, class e etc. Com essa identificação, conseguimos manipular esse elemento.
É possível inspecionar elementos pelo celular Android por meio do navegador Chrome e pelo App MacacaJs. O recurso permite que o usuário visualize os códigos HTML e CSS usados no desenvolvimento de uma página da web e copie esses conteúdos para fazer alterações em ambientes externos.
Para inspecionar elemento pelo celular iOS você pode utilizar o MacacaJs. Mas, fique tranquilo porque hoje ensinaremos o passo a passo de como inspecionar elemento pelo celular.
Inspecionar elemento pelo celular iOS
O passo a passo de inspecionar elemento pelo celular iOS funciona em todos os celulares da Apple, desde o iPhone 6s até o novo iPhone 14. Confira:
- Primeiramente, você precisa instalar o aplicativo MacacaJs App Inspector;
- O próximo passo é encontrar o ID do emulador para podermos ver qual deles verificar. Para obter uma lista de emuladores disponíveis com seus IDs, digite terminal: xcrun simctl list;
- Feito isso, você deve digitar: app-inspector -u <ID_SIMULATOR>;
- Depois, a inspeção será feita.
Inspecionar elemento pelo celular Android
- Para inspecionar elemento pelo navegador, abra o navegador e acesse o site que deseja analisar;
- Toque na barra de endereço e adicione a palavra “view-source:” (sem aspas) antes do URL;
- Por fim, veja os códigos usados na página na tela.
O que é inspecionar elemento?
Agora que você já sabe como inspecionar elemento pelo celular, chegou a hora de entender um pouco mais sobre a importância dessa ferramenta.
Inspecionar elemento é uma ferramenta que possibilita a visualização do código fonte originário de qualquer endereço na web. Ademais, também é possível utilizar a ferramenta para fazer algumas alterações e ver os resultados sem alterar o código-fonte.
Isso é bastante interessante caso você queira fazer o teste de uma mudança ou solucionar algum erro, ou bug. Além disso, essa ferramenta também é bastante útil para quem é curioso e quer saber como determinado site foi implementado.
Recursos e benefícios de inspecionar elemento pelo celular
Agora que você já sabe como inspecionar elemento pelo celular e o que é a inspeção, saiba quais são os recursos e benefícios de inspecionar elemento pelo celular.
Solucionando problemas de sites
A ferramenta de inspeção de elementos é muito útil para solução de possíveis erros. Por exemplo, se a fonte e de um elemento não estiver correta, você poderá verificá-la rapidamente com o inspecionamento de elemento.
Além disso, também é possível editar o código HTML da página diretamente na ferramenta de inspeção.
Para isso, você precisa clicar duas vezes no código que pretende fazer a edição. Mas, perceba que o código não é realmente alterado na página da Web, então se você atualizar a página, ela retornará ao seu estado original.
Além disso, esse recurso é bastante interessante para testes rápidos e diagnósticos de problemas. Finalmente, o depurador embutido é uma ferramenta muito interessante que você pode usar para visualizar as mensagens de erro que aparecem nos bastidores.
Para ter acesso às mensagens, clique em Painel de controle na parte superior da janela do mecanismo de busca utilizado.
Edição dos textos
Outro benefício de inspecionar elemento pelo celular é a possibilidade de edição e visualização rápida de textos de uma página. Com isso, você consegue ver como fica a sua ideia, na prática, sem precisar fazer login no WordPress.
Para editar um texto, clique com no botão direito do mouse e selecione Inspecionar. Então, uma ferramenta com o código do elemento em foco irá abrir. Depois, clique duas vezes no código para conseguir editá-lo. Por fim, selecione o item e desça a tela para encontrar o estilo e cor desejada.
Testagem de site
Por fim, outro recurso bastante interessante é a possibilidade de emular diferentes tamanhos de tela e de alguns tipos de dispositivos específicos. Desse modo, você pode testar a capacidade de resposta do seu site e ver exatamente como ele aparece em diferentes cenários móveis.
Com o explorador aberto, selecione o ícone que se parece com um telefone e um tablet empilhados. Isso fará com que você veja a emulação do dispositivo. Depois, perceba que ele pode ser habilitado automaticamente.
Por fim, redimensione a visualização da página usando as alças ao redor da página ou clique na lista suspensa na parte superior da janela de visualização para fazer uma seleção.
Se você é novo no desenvolvimento web ou um profissional experiente, a ferramenta de inspecionar de elemento é uma ferramenta poderosa que definitivamente deve estar em seu depósito. Isso porque, essa é uma ferramenta muito acessível, que pode ser facilmente usada e te ajuda a executar várias tarefas de maneira rápida e fácil.
