Cum să editați în mod live un site cu instrumentul pentru dezvoltatori web Firefox

Como editar um site ao vivo com a ferramenta de desenvolvedor da Web do Firefox

⌛ Reading Time: 4 minutes

Seu site ficaria melhor se o logotipo fosse movido cinco pixels para a direita ou tivesse um fundo azul? Adicionar uma borda ou sombras às imagens em suas postagens as faria se destacar mais? Navegadores modernos como o Firefox vêm com ferramentas de desenvolvimento da Web que permitem inspecionar o funcionamento interno de um site e fazer edições ao vivo, observando os resultados em tempo real.

Neste tutorial, você aprenderá como usar as Ferramentas para Desenvolvedores da Web do Firefox para editar qualquer site ao vivo.

Nota: Este tutorial se aplica à maioria dos navegadores, incluindo Chrome, Opera e Safari.

Conheça as ferramentas para desenvolvedores da web

As Ferramentas para Desenvolvedores da Web do Firefox são um conjunto abrangente de ferramentas, desde a exibição de todos os elementos DOM até a capacidade de medir sua velocidade. Para este tutorial, você só precisa das ferramentas “Inspetor” e “Editor de estilo”.

Abra o Firefox e visite qualquer / seu site. No menu de hambúrguer do Firefox (no canto superior direito por padrão), escolha “Desenvolvedor Web -> Editor de estilo” ou pressione o botão Mudança + F7 combinação em seu teclado.

O painel Web Developer do Firefox aparecerá em um lado da janela – geralmente na parte inferior. Você pode alterar sua posição clicando no botão de três pontos no canto superior direito do painel e escolhendo “Encaixar à direita / esquerda” ou “Janela separada”.

Site de edição ao vivo com janela separada do Firefox

Nota: Este tutorial não mostra como codificar HTML e CSS. Você pode aprender o básico aqui.

Inspecionando o elemento

Para poder afetar a aparência de um elemento, você deve ser capaz de identificá-lo. Clique no primeiro botão em sua barra de ferramentas ou pressione Ctrl + Mudança + C no teclado para ativar o modo seletor de elemento.

Site de edição ao vivo com seletor de elementos do Firefox

Mova o mouse pelo site para ver os diferentes elementos da página em destaque. Ao lado deles, você verá seu identificador primário pairando em um pop-up.

Site de edição ao vivo com Firefox Escolha o logotipo

Quando você clica em um elemento, ele é selecionado na guia Inspetor das Ferramentas do Desenvolvedor.

Site de edição ao vivo com Firefox Inspector

Quando encontrar o elemento que deseja ajustar, clique com o botão direito em sua entrada no Inspetor de ferramentas do desenvolvedor e selecione na janela pop-up que aparece – “Copiar -> Seletor CSS”.

Site de edição ao vivo com seletor de cópia do Firefox

Comece sua edição ao vivo

Com o seletor CSS do seu elemento copiado para a área de transferência, volte para a guia Editor de estilo na janela Ferramentas do desenvolvedor. Clique no botão “+” no canto superior esquerdo para “Criar e anexar uma nova folha de estilo ao documento”.

Site de edição ao vivo com a nova folha de estilo do Firefox

Cole seu seletor CSS dentro da nova folha de estilo em branco. Adicione um espaço, seguido por um conjunto de chaves de abertura e fechamento.

Site de edição ao vivo com seletor de colagem do Firefox

Em CSS, a aparência de um elemento é definida primeiro “direcionando-o” usando um identificador como esse Seletor CSS e, em seguida, adicionando algumas regras que afetam sua aparência, agrupadas entre chaves. Tudo o que for colocado entre as chaves de abertura e fechamento afeta o “elemento de destino”.

Por exemplo, se você adicionar a regra abaixo:

Isso ocultará da visualização o elemento onde é usado. É provavelmente a maneira mais fácil de saber se você está direcionando o elemento correto em sua página. Se ele desaparecer, era, de fato, aquele que você deseja, e você pode excluir esta regra para experimentar outras. Se não desapareceu, é hora de voltar ao Inspetor e selecionar algo diferente.

Site de edição ao vivo com Firefox Alterar cor de fundo

Não mostraremos como codificar CSS aqui, mas você pode brincar com algumas das regras populares como:

Você notará que o elemento do site muda conforme você adiciona regras à folha de estilo CSS.

Como nota final, lembre-se de que nada é salvo. Se você gosta da aparência de seus ajustes, copie seu código em algum lugar – em um arquivo TXT ou em seu aplicativo de anotações favorito – para que você ou um designer / desenvolvedor possa adicioná-lo à folha de estilo do seu site para tornar as alterações permanentes. Se você precisa aprender sobre CSS, confira alguns jogos online para ajudá-lo a dominar a habilidade.

Relacionado:

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

[pt_view id="5aa2753we7"]

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *