Geralmente, ao editar uma página da web, usamos uma ferramenta de edição específica, como Adobe Dreamweaver, CoffeeCup, Bluefish ou uma das outras ferramentas de desenvolvimento. Mas e se estamos apenas fazendo um brainstorming ou queremos experimentar algo em uma página ao vivo? Poderíamos fazer uma cópia da página em nossa ferramenta de escolha e brincar com isso. Ou podemos fazê-lo em nosso navegador. Este tutorial mostra como editar uma página da web no seu navegador.
Referido como Ferramentas do desenvolvedor, o Firefox chama o recurso Inspect Element enquanto o Chrome o chama de Inspecionar. De qualquer forma, é uma maneira de o navegador espiar por trás do brilho do seu design e dar uma olhada no código que o impulsiona. Esse recurso é bastante conhecido e é muito usado. O que não é tão conhecido é a capacidade de fazer alterações nesse código em tempo real.
Qualquer alteração que você fizer não será salva e não afetará ao vivo. Se você não deseja carregar a página na sua ferramenta de desenvolvedor, é uma maneira interessante de experimentar.
Edite qualquer página da web no seu navegador
O Dreamweaver e ferramentas como ele têm um emulador de navegador interno que simula a aparência de um design em diferentes navegadores. Por melhores que sejam, eles nem sempre são exatos e, ao iniciar um site, você geralmente descobre que o que parecia fantástico em sua ferramenta de desenvolvedor parece um pouco diferente em um navegador independente.
Normalmente, você iniciaria o site em um servidor da web interno e testaria em um navegador antes de iniciar o live apenas por esse motivo. Se uma página já estiver ativa ou você quiser apenas tentar algo, não há necessidade de copiá-la e carregá-la na sua ferramenta de desenvolvimento, basta usar a Ferramenta de Desenvolvedor do navegador.
Eu uso o Firefox, então vou mostrar como usar isso. O Chrome é praticamente o mesmo.
- Abra uma página da web que você deseja experimentar no seu navegador.
- Clique com o botão direito do mouse em qualquer lugar da página e selecione Inspecionar.
Você deve ver sua página dividida em duas, com um novo painel aparecendo na parte inferior com algum código nele. Este código é a força motriz da página que você selecionou. Diferentes elementos da página podem ser acessados nas guias na parte superior da guia inferior. Por exemplo, vemos Inspetor, Console, Depurador, Editor de estilos e assim por diante no Firefox.
Se você passar o cursor sobre as linhas no painel inferior, verá diferentes partes da página da Web realçadas. A linha de código em que você está durante o destaque é o código que influencia essa parte da página.
- Se você quiser brincar com a aparência da página, tente o Editor de estilos.
- Se você quiser brincar com o funcionamento da página, tente Console ou Acessibilidade.
- Se você deseja eliminar erros ou resolver um problema, use o Console ou o Depurador
O desempenho é útil para SEO no local, mas a memória, a rede e o armazenamento não são muito utilizados.
Lembre-se de que você pode mexer nas Ferramentas do desenvolvedor o quanto quiser e isso não afetará o site. Quaisquer alterações são feitas apenas na forma como a página é exibida no seu navegador individual, você não afeta o próprio site. Depois de fechar a ferramenta, todas as alterações são perdidas.
Fazendo alterações em uma página
Agora que você sabe que pode alterar o que quiser sem afetar o site real, vamos nos divertir um pouco. Encontre um elemento na página que você deseja editar. Você pode alterar uma fonte, cor de fonte, imagem de fundo ou o que quiser. Neste exemplo, vou mudar a cor da fonte do título do banner.
- Clique com o botão direito do mouse no elemento exato que você deseja alterar e selecione Inspecionar.
- Destaque a linha com 'title' ou 'H1', para que o texto seja destacado no painel superior.
- Navegue para os dois painéis esquerdos e encontre a cor da fonte.
- Altere o valor para algo diferente ou selecione o ponto de cor para usar um seletor.
Sua alteração aparecerá dinamicamente quando você concluir a alteração. Você pode alterar a cor, tamanho, fonte, plano de fundo e tudo sobre a fonte. Você não pode salvar o trabalho, mas suas alterações permanecerão nessa sessão.
Você pode alterar tudo sobre a página, o que é ideal se você tiver uma ideia e quiser verificá-la rapidamente antes de iniciar todos os seus aplicativos de desenvolvimento. Tudo o que você precisa fazer é lembrar quais alterações foram feitas e onde não podem ser salvas aqui. Você precisará fazer uma captura de tela ou registrar as alterações e replicá-las nas suas ferramentas de desenvolvedor para garantir a aderência.
Editar uma página da web no seu navegador é uma maneira interessante de experimentar ou brincar com as páginas. Também é uma boa maneira de aprender um pouco sobre desenvolvimento web sem precisar comprar ferramentas caras de desenvolvedor. Agora você sabe como, vá e jogue!
