O aplicativo Safari permite que você
Aqui está um guia simples para iniciantes para explicar como você pode começar a usar o Inspect Element no Safari e aproveitar a experiência que ele oferece para modificar o texto e as imagens do site com o mínimo de conhecimento de programação. Verificar Como editar texto em um site usando o Google Chrome para alterar seu conteúdo.
Links Rápidos
O que é Inspecionar Elemento?
Inspect Element é uma ferramenta de desenvolvedor. Não está disponível apenas no Safari, mas também em outros navegadores como Chrome, Firefox e Edge. Com o Inspect Element, você pode espiar o que está por trás da cortina de um site para revelar o código de front-end, como HTML e CSS. No entanto, eles não oferecem visibilidade do back-end, como seus bancos de dados fazem.
Você não apenas pode ver esse código, mas também pode modificá-lo. Isso significa que você pode alterar a aparência do site. Você pode substituir uma imagem, reformatar algum texto, usar uma fonte diferente, alternar o esquema de cores usado e muito mais. No entanto, esses ajustes são locais. Você não aparecerá para ninguém além de você; Eles desaparecem assim que você atualiza a página ou se afasta dela.
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 executando seu site favorito e modificá-lo ao seu gosto no ambiente do mundo real. Existem muitas ideias divertidas que você pode obter usando o Inspecionar Elemento.
Por exemplo, o proprietário de uma empresa pode examinar as palavras-chave incluídas em um site concorrente ou um designer pode usar o Inspect Element para selecionar uma fonte que considere atraente 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 com Inspect Element. Verificar Como usar a ferramenta “Inspecionar Elemento” no Firefox para escanear qualquer site.
Como acessar o Inspect Element no Safari
Você pode abrir o Inspect Element no Safari usando o menu do desenvolvedor:
- Abra o aplicativo Safari
- Clique em Safari na barra de menu superior.
- No menu suspenso, selecione Preferências.
- Selecione a opção “Avançado”.
- Marque a caixa que diz Mostrar Desenvolver menu na barra de menus.
Depois de selecionar esta opção, você pode clicar com o botão direito do mouse em uma página da Web e selecionar Inspecionar elemento. Como alternativa, você pode selecionar Desenvolver na barra de menus e, em seguida, abrir o Web Inspector.
Como pesquisar elementos da Web no Inspect Element
Para começar a editar um item, clique com o botão direito do mouse no que deseja editar e clique em Inspecionar elemento. Isso abrirá a janela do desenvolvedor, com a seção relevante destacada. Você pode descobrir que o elemento específico que deseja verificar (imagem ou texto, por exemplo) está oculto; Para localizá-lo, use as setas à esquerda para expandir as seções sobrepostas.
Para ajudar a restringir sua seleção, clique no ícone de destino na barra de ferramentas Inspecionar elemento. Agora, conforme você passa pelo código, está selecionando esta seção no site. Ou você pode usar o ponteiro para selecionar uma seção no site. Isso é útil quando você deseja se concentrar em algo em uma área lotada de uma página da web.
Como editar o texto do site com o Inspect Element
Para tornar um texto editável depois de encontrá-lo no código-fonte do site, clique duas vezes nele. Você pode escrever um novo texto diretamente no código ou excluir o texto existente. Quando a edição estiver concluída para uma sequência específica de texto, pressione Entrar , o texto na página da Web será alterado.
O processo é realmente tão simples! As únicas vezes que isso não funcionará é quando o texto é realmente parte de uma imagem, como um logotipo.
Como editar imagens do site com Inspect Element
Embora as imagens sejam visíveis para você no front end, elas aparecem no código do site como links. Você pode clicar com o botão direito do mouse na imagem e escolher Inspecionar elemento para navegar até onde essa imagem está no código. As imagens do site geralmente têm extensões de arquivo JPG, GIF ou PNG, embora não exclusivamente.
Clique duas vezes nestes tópicos de imagem e você pode editá-los ou salvá-los em seu sistema, se desejar. Se você quiser substituir a imagem, substitua-a para obter um URL alternativo para a imagem. Ou você pode excluir toda a sequência de código para remover a imagem da visualização. Verificar Ferramentas de desenvolvimento da Web mais populares que todos os profissionais usam.
Mergulhe no design do site com o Safari
A ferramenta Inspecionar Elemento incorporada ao 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. Agora você pode visualizar Como usar o Chrome DevTools para solucionar problemas de sites.