O que são Chrome Devtools
O que são Chrome Devtools
Chrome Devtools é um conjunto de ferramentas projetadas para ajudá-lo no desenvolvimento do front-end. Você pode aprimorar seu site abordando erros de estilo e avaliando mudanças em tempo real. Aprenda a utilizar o Chrome Devtools para usar esta ferramenta como uma caixa de areia para experimentar os estilos e código do site. Você não é obrigado a fazer mais configuração porque o Chrome Devtools está incorporado ao seu navegador da web. Essas ferramentas de desenvolvedor são altamente recomendadas, pois ajudam você a editar o estilo do seu site, concluindo operações relacionadas ao DOM, depurando JavaScript e melhorando a velocidade do site.
Agora, vamos entender poucas coisas antes de avançarmos em direção ao uso de Chrome Devtools:
- Os navegadores da web são executados JavaScript, CCS, e Html, Estes são os três idiomas que o Chrome Devtools pretende usar.
- Qualquer um pode manipular o código do site usando o Chrome Devtools. As modificações aplicadas só serão visualizadas no seu navegador e desaparecerão quando você atualiza em breve a página da web. Esses devtools ajudam você a determinar quais mudanças são necessárias. Você precisará acessar o código de back-end para tornar essas alterações permanentes.
Por que você deve usar o Chrome Devtools
Ao permitir que os usuários editem sites diretamente no navegador da web, o Google Chrome Devtools salva seu tempo, e não podemos negar esse fato. Para justificar a declaração, consulte a lista abaixo do Chrome Devtools Aspects que podem ajudá-lo a melhorar seu desenvolvimento da Web:
- Eficiência: Chrome Devtools está incorporado ao seu navegador da web, fornecendo a instalação para editar sites ou conteúdo sem alternar as guias.
- Painéis: Usando o Chrome Devtools, você pode brincar com vários elementos de página e extrair as informações, mas lembre.
- Otimização: Você também pode executar auditorias através das quais você pode obter um relatório relacionado ao desempenho. No navegador da web, você receberá sugestões para melhorar a velocidade de carregamento do site.
- Debug JavaScript: O usuário pode identificar os erros, pausando o código do site em execução e identificando o instante exato quando o script falha ao executar corretamente.
Como abrir o Chrome Devtools
As ferramentas de desenvolvedor do Chrome podem ser acessadas usando atalhos de teclado:
- Imprensa "Ctrl+Shift+J”Para abrir o Chrome Devtools janelas, Chromebook, e Linux.
- Para Mac OS, Acerte o "Cmd+shift+j" ou "Cmd+shif+c”Atalho.
Usando o menu do Chrome:
Explore “Mais ferramentas">"Ferramentas de desenvolvimento”No menu Chrome. Isso o levará à janela Chrome Devtools:
A janela Ferramentas do desenvolvedor tem três guias na parte superior, além de mais seis que você pode ver clicando no >> assinando ao lado deles:
Aqui estão os nomes da guia que mostram em nosso painel: elementos, console, fontes, rede, desempenho, memória, aplicação, segurança, farol, editor de cookies e adblock:
Guia Elements em Chrome Devtools
O painel Chrome Devtools abre com o “Elementos”Guia por padrão. Ele exibe o HTML e o CSS embutido utilizado para o desenvolvimento da página da web que você está visualizando:
Guia Console em Chrome Devtools
A guia do console lida com JavaScript. Ele fornece detalhes relacionados aos elementos presentes em uma página da web. Você pode utilizar o console para escrever código JavaScript para a interação da página da web e enviar mensagens para si mesmo. Essas mensagens aparecerão na janela do console quando o JavaScript será executado:
Guia Fontes em Chrome Devtools
A guia Fontes exibe e permite que você inspecione todos os arquivos usados para criar o site:
Guia de rede no Chrome Devtools
A guia de rede exibe todas as cargas para o URL atual que você está visualizando. Você obtém informações detalhadas sobre os objetos de carga, incluindo a duração da pesquisa DNS, conexão inicial, SSL, etc. Confira a imagem abaixo para saber sobre os atributos de objeto carregado:
Guia de aplicação no Chrome Devtools
A guia Aplicativo exibe o conteúdo do seu armazenamento do navegador, incluindo bancos de dados no navegador, como armazenamento local, SQL da Web, etc. Também permite que você tenha controle de refrigerante sobre seus cookies:
Guia de segurança em Chrome Devtools
A guia de segurança fornece informações básicas de segurança, como o estado de TLS de um site e seu certificado HTTPS:
Guia Farol em Chrome Devtools
Lighthouse ajuda o usuário do Chrome Devtools a gerar relatórios sobre a estrutura e a funcionalidade do site, que auxilia os desenvolvedores a melhorar o desempenho:
Como usar o Chrome Devtools para inspecionar tags de página
As tags H1 e H2 são algumas das partes mais significativas do SEO na página. Depois de descobrir as páginas com uma imagem não otimizada como o H2 ou páginas com quatro tags H2, você entenderá a complexidade desse assunto.
Você pode usar o Chrome Devtools para inspecionar as tags da página. Para fazer isso, pressione “Ctrl-f" ou "Cmd+f”Para pesquisar na guia Elements e digite“H2”Para ver suas tags de página:
Como usar o Chrome Devtools para editar CSS
Chrome Devtools permite que você edite o CSS de uma página diretamente em seu navegador. Você pode experimentar fontes, esquemas de cores e tudo o mais que é definido pelo CSS:
Você também pode novos estilos para as páginas da web usando o DevTools:
Conclusão
Chrome Devtools é um kit completo de ferramentas de desenvolvedor que é pré-instalado com o navegador Chrome. Essas ferramentas permitem aos usuários alterar as páginas da Web, identificar problemas e criar sites melhores em tempo real. Você pode se beneficiar do Chrome Devtools, mesmo que você não seja um desenvolvedor da web. Este artigo discutiu o Chrome Devtools, suas guias e como usar esses devtools no seu navegador da web. Agora, fique à vontade para explorar o Chrome Devtools.