Como editar páginas da Web no Safari usando o Inspect Element

Com sua ferramenta Inspect Element, o Safari permite que você mexa com o código front-end de qualquer página da web. Se você quiser testar a aparência de uma página com texto ou imagens diferentes, poderá fazê-lo alterando seu código com Inspect Element.

Este é um guia simples destinado a iniciantes para explicar como você pode começar a experimentar o Inspect Element no Safari para editar o texto e as imagens de um site com conhecimento mínimo de codificação.

O que é Inspecionar Elemento?

Inspect Element é uma ferramenta de desenvolvedor. Está disponível no Safari, mas também em outros navegadores da Web, como Chrome, Firefox e Edge. Com o Inspect Element, você pode espiar por trás da cortina de um site para revelar seu código de front-end, como HTML e CSS. No entanto, ele não concede visibilidade do back-end, como seus bancos de dados.

Você não apenas pode ver esse código, mas também pode ajustá-lo. Isso significa que você pode alterar a aparência de um site. Você pode substituir uma imagem, reformular algum texto, usar uma fonte diferente, alternar seu esquema de cores e muito mais. No entanto, essas edições são locais. Eles não aparecerão para mais ninguém, exceto para você; eles desaparecem quando você atualiza ou se afasta da página.

Por que você deve usar o Inspect Element?

O Inspect Element é uma ótima ferramenta se você for um desenvolvedor web iniciante. Você pode literalmente ver o código que alimenta seu site favorito, ajustando-o como desejar em um ambiente do mundo real. Existem muitos insights divertidos que você pode obter usando o Inspect Element.

Por exemplo, os proprietários de empresas podem ver as palavras-chave incluídas no site de um concorrente ou os designers podem use Inspect Element para identificar uma fonte que eles achem atraentes ou para testar rapidamente um esquema de cores diferente em seu site.

Por enquanto, vamos nos concentrar na edição do básico de uma página da Web usando o Inspect Element.

Como acessar o Inspect Element no Safari

Você pode abrir o Inspect Element no Safari usando o menu do desenvolvedor:

1. Abra o Safari.
2. Clique Safári na barra de menu superior.
3. No menu suspenso, selecione Preferências.
4. Selecione os Avançado opção.
5. Marque a caixa que diz Mostrar menu Desenvolver na barra de menus.

Após selecionar esta opção, você pode clique com o botão direito em uma página da Web e selecione Inspecionar elemento. Alternativamente, você pode selecionar Desenvolver na barra de menus e, em seguida, Mostrar Inspetor da Web.

Como encontrar elementos da Web no Inspect Element

Para começar a editar um elemento, clique com o botão direito o que você deseja editar e clique Inspecionar elemento. Isso abrirá a janela do desenvolvedor, com a seção relevante destacada. Você pode descobrir que o elemento específico que deseja elemento (a imagem ou o texto, digamos) está oculto; para localizá-lo, use o Setas; flechas à esquerda para expandir as seções aninhadas.

Para ajudar a restringir sua seleção, clique no botão ícone de destino na barra de ferramentas Inspecionar elemento. Agora, conforme você navega pelo código, ele destaca essa seção no site. Ou você pode usar o cursor para identificar uma seção no site. Isso é útil para quando você deseja aprimorar algo específico em uma área lotada de uma página da web.

Como editar o texto de um site usando o Inspect Element

Para tornar um texto editável depois de encontrá-lo no código-fonte de um site, Duplo click isto. Você pode digitar o novo texto diretamente no código ou excluir o texto existente. Quando a edição estiver concluída para uma determinada sequência de texto, pressione Entrar, e o texto na página da Web será alterado.

É realmente tão simples quanto isso! As únicas vezes que isso não funcionará é quando o texto é realmente parte de uma imagem, como um logotipo.

Como editar as imagens de um site usando o Inspect Element

Enquanto as imagens aparecem visualmente para você no front-end, no código do site elas aparecem como links. Você pode clique com o botão direito e imagem e escolha Inspecionar elemento para pular para onde essa imagem está no código. As imagens de sites geralmente têm extensões de arquivo JPG, GIF ou PNG, embora não exclusivamente.

Duplo click essas sequências de imagens e você pode editá-las ou apenas salvá-las em seu sistema, se desejar. Se você quiser substituir a imagem, troque-a por um URL de imagem de substituição. Ou você pode excluir totalmente a sequência de código para remover a imagem da visualização.

Mergulhe em sites usando o Safari

A ferramenta Inspecionar Elemento do Safari permite que você encontre e altere facilmente o código correspondente ao texto e às imagens, o que é tão fácil quanto trocar uma string de texto ou URL. Quando terminar de editar um site com o Inspect Element, basta atualizar a página e tudo voltará ao normal.

Como alterar o agente de usuário do seu navegador e sites de truque

Leia a seguir

Sobre o autor