Um guia para as ferramentas da Web do Google

Sep 14, 2025

Como

Página 1 de 5:

Visualizar e alterar HTML, CSS & AMP; Js.

Visualizar e alterar HTML, CSS & AMP; Js.
Usando depurador
Trabalhando com o modo de dispositivo
Comece com design de material
Obter apertos com aplicativos da Web progressivos

Grande g, aka Google, fornece aos desenvolvedores uma infinidade de ferramentas destinadas a facilitar a web design. Neste artigo, passamos por algumas das melhores ferramentas do Google, e mostramos a você como usá-las em seu web design e fluxo de trabalho de desenvolvimento.

Estamos cobrindo uma gama de diferentes Web Design Tools. Aqui, então dividimos o conteúdo em páginas para facilitar a navegação. Use o menu suspenso acima para pular para a seção em que você está interessado. Quer projetar um site usando um provedor diferente? Nossos guias para hospedagem na web. e o topo Construtor de sites Você tem coberto.

Contanto que os sites não estejam inesperados, seu conteúdo pode ser visto por ninguém. DevTools do Chrome tornam este simples - nesta página, mostramos como visualizar e alterar HTML, CSS e Javascript. Sobre página 2 , nós assumimos uma olhada em como usar o depurador do Google para corrigir erros de codificação de maneira rápida e fácil. Página 3. Coloca os holofotes no modo de dispositivo do Google, que você pode usar para testar as versões móveis de suas páginas através da sua máquina de desktop. Sobre Página 4. Nós introduzimos o básico que você precisa estar ciente para começar a implementar princípios de design de material em seus projetos. Finalmente, Página 5. Olha para aplicativos da Web progressivos, a mais recente grande coisa na indústria de web design.

Visualizar e alterar HTML, CSS & AMP; Js.

Desde que o código de um site não tenha sido minificado, ele pode ser visualizado por qualquer pessoa usando as ferramentas de desenvolvedor do Chrome. Primeiro de tudo, verifique a versão do Chrome - as seguintes etapas funcionam na versão 70.0.3538.67 em execução em uma estação de trabalho do Ubuntu de 64 bits. Em seguida, abra o menu Hamburger e clique em Mais ferramentas e GT; Ferramentas de desenvolvimento.

Launch Google's Developer Tools — Inicie as ferramentas do desenvolvedor e você verá uma tela semelhante a esta [Clique no ícone no canto superior direito para ampliar]

O navegador responde abrindo um painel no lado esquerdo da tela. Ele deve ser redimensionado na primeira etapa - por padrão, o navegador não atribui imóveis de tela suficiente. Quando terminar, a tela parece semelhante à mostrada na imagem acima.

Por padrão, as ferramentas de desenvolvedor iniciam com a guia Console carregada. Ele contém a saída emitida por invocações da função de log de console. Erros de renderização também aparecem lá - se você encontrar linhas vermelhas, algo está errado na marcação ou no código da sua página. Um clique no pequeno 'URL' no lado direito traz para você para a linha, o que fez com que a mensagem aparecesse.

Inspecione a marcação

Se o seu interesse se concentrar na marcação, use a guia Elementos mostrada na figura. Ele mostra a marcação do navegador atualmente renderiza. Você pode expandir e compactá-lo de forma semelhante a uma exibição de árvore - esconda elementos desnecessários para evitar a sobrecarga sensorial.

O Raison d'etre. da guia é a exibição da estrutura CSS. Os Widgets 'Colete' CSS de várias fontes, que são exibidos perfeitamente e ao lado um do outro. No caso do exemplo mostrado na figura, vemos que os estilos foram fornecidos a partir da tag 'div' e a marcação 'principal' da página.

O Chrome permite editar a maioria dos atributos na mosca. Clique duas vezes em qualquer um dos textos pretos para transformar o rótulo em um editor e insira o valor recém-desejado e pressione a tecla de retorno. O renderizador pega essas mudanças e aplica-os ao DOM na mosca. Isso é especialmente útil ao tentar otimizar as cores ou problemas de colocação; Tendo que recarregar uma página para visualizar as alterações se torna cansativo.

Google's web tools — Um fundo amarelo indica que o conteúdo da janela está sujeito a filtragem [clique no ícone no canto superior direito para ampliar]

Finalmente, dê uma olhada na caixa de texto no topo do painel. Ele permite que você filtre os itens de marcação mostrados: Por exemplo, insira 'MDC' para limitar a exibição a todos os estilos herdados da biblioteca de design de material usada mais adiante neste artigo. Quando um filtro está ativo, um fundo amarelo aparece de forma semelhante ao mostrado acima.

Executar uma análise detalhada

Nos navegadores da Web modernos, o DOM não está limitado a problemas de apresentação "estaticamente". Também governa o fluxo e o posicionamento do evento. Mude para a aba computada para revelar uma lista de propriedades "dimensionais". Isso é incrivelmente útil ao organizar widgets na tela de uma forma exata.

Mover-se para a guia Ouvirensores do evento fornece uma visão geral dos fluxos de eventos. Use esse recurso para eliminar rapidamente problemas relacionados à interação do usuário: Se um evento não disparar, iniciar verificando as conexões do manipulador de eventos.

Finalmente, a janela Propriedades permite que você dê uma olhada nos atributos armazenados dentro dos nós individuais Dom. Se você já passou muito tempo caçando código Dom-Manipulando, o valor é claro.

Próxima página: Como usar o depurador do Google

Pagina atual: Visualizar e alterar HTML, CSS & AMP; Js.

Próxima página Usando depurador

Um guia para as ferramentas da Web do Google

Visualizar e alterar HTML, CSS & AMP; Js.

Inspecione a marcação

Executar uma análise detalhada

Como - Artigos mais populares

Como adicionar energia a seus desenhos de vida

Como desenhar figuras mais realistas

Designer de afinidade: Como usar grades

Uma introdução ao teste de frontend

Criar um efeito portal em Maya

Criar um Etch digital um esboço

Crie texturas tileable deslumbrantes no Blender

Como melhorar o desempenho dos sites de comércio eletrônico

Categorias