Como inspecionar uma página no Chrome

Aprenda como utilizar as principais ferramentas do inspetor de páginas do Google Chrome para analisar, modificar e encontrar problemas em páginas da internet

Por: Thiago Furquim

30 abr 2023 - 15h00

(atualizado em 1/5/2023 às 17h21)

Exibir comentários

Inspecionar uma página pelo Google Chrome é uma tarefa fundamental para desenvolvedores, designers e profissionais de marketing que precisam analisar e solucionar problemas de design, depurar erros de código ou simplesmente entender como uma página da web funciona.

O que é a inspeção do Google Chrome?

A ferramenta de inspeção do Chrome possibilita ver e manipular o código-fonte e o layout de páginas da web específicas, permitindo alterar em tempo real propriedades como estilos CSS, tags HTML e JavaScript para prever como uma página seria se determinadas modificações fossem aplicadas.

Além disso, ela ainda oferece diversas funcionalidades para depurar possíveis bugs e erros de performance, analisar o carregamento do site e até mesmo simular o formato responsivo do layout para telas de celular.

Essa é a solução ideal para pessoas que preferem fazer modificações temporárias em uma página pelo navegador antes de alterar definitivamente as configurações em softwares de programação, WordPress e outros servidores online.

Inspecionando elemento de uma página no Chrome

Para abrir a ferramenta de inspeção do Chrome, você pode seguir um das três opções a seguir:

Clique com o botão direito do mouse em qualquer lugar de uma página e escolha a opção "Inspecionar";
Pressione as teclas Ctrl + Shift + I no Windows ou Cmd + Option + I no Mac para acessar a ferramenta rapidamente;
Clique no botão de três pontos no canto superior da tela e vá em Mais Ferramentas > Ferramentas do desenvolvedor.

Ao abrir a ferramenta para inspecionar uma página no Chrome, você pode utilizar o seletor de elementos presente na barra superior a fim de analisar um fragmento do código da página que deseja verificar. O inspetor exibe informações detalhadas sobre esse elemento, como o código-fonte HTML, os estilos CSS aplicados e potenciais eventos JavaScript associados.

Como modificar elementos de HTML

Você ainda pode modificar diretamente o código e os estilos na ferramenta de inspeção e visualizar como as alterações afetam a aparência e o comportamento da página. Para isso, siga os passos abaixo:

Na ferramenta de inspeção, clique na aba "Elements";
Pressione a tecla Esc para expandir a barra lateral de códigos;
Navegue pelo código HTML e selecione um elemento;
Clique com o botão direito no elemento que você deseja alterar e selecione "Edt as HTML".

Como analisar as regras CSS

Os desenvolvedores web podem facilmente visualizar e ajustar as regras CSS usadas para estilizar os elementos de uma página. Para isso, siga estes passos:

Selecione o elemento CSS na ferramenta de inspeção;
No painel de elementos, clique no ícone "Styles" para expandir a barra de estilos;
Navegue pelas regras CSS aplicadas ao elemento selecionado;

Você pode ajustar os valores das propriedades CSS em tempo real e ver como as mudanças afetam o estilo do elemento na página. Para adicionar novas regras CSS, clique no botão "+" a fim de abrir um campo de edição de texto.

Como usar o console JavaScript

O console JavaScript é uma ferramenta de depuração que possibilita aos desenvolvedores executar comandos e ver o resultado imediatamente. É possível utilizar o console para depurar erros de código e analisar a lógica do JavaScript em uma página da web.

Para acessá-lo, clique no ícone "Console", na parte inferior da ferramenta de inspeção do Chrome. Você pode realizar ações como:

Executar comandos JavaScript;
Depurar erros;
Analisar variáveis e objetos;
Testar novas funcionalidades do JavaScript.

Como simular páginas responsivas

O inspetor de páginas do Google Chrome facilita o trabalho de profissionais que precisam testar uma página em diferentes tamanhos de tela e dispositivos para verificar se o seu site é responsivo e se adapta corretamente às variações.

Para isso, você deve:

Selecionar o ícone em formato de dispositivo móvel na parte superior da janela de inspeção;
Escolher um dispositivo pré-definido ou digitar as dimensões manualmente.

Se você quiser saber mais sobre programação e desenvolvimento web, veja as sete linguagens de programação recomendadas para ampliar seu conhecimento no assunto.

Trending no Canaltech: