Como abrir ferramentas de desenvolvedor do Google Chrome?

O Google Chrome Developer Tools é um ótimo recurso do Google Chrome para desenvolvedores da Web. É um conjunto de ferramentas diretamente embutidas ao Google Chrome para ajudar os desenvolvedores a fazer alterações na página da web e diagnosticar problemas com seus sites em tempo real. Ajuda os desenvolvedores da Web a criar e otimizar sites mais rapidamente.

Neste artigo, vou mostrar como abrir ferramentas de desenvolvedor do Google Chrome no Google Chrome e alguns dos recursos que ele oferece.

Índice:

1. Abrindo o Google Chrome Developer Tools
2. Docking Google Chrome Developer Tools em diferentes locais
3. Alguns dos recursos do Google Chrome Developer Tools
4. Ferramentas de encerramento do desenvolvedor no Google Chrome
5. Conclusão
6. Referências

Abrindo o Google Chrome Developer Tools

Uma maneira de abrir as ferramentas do Google Chrome Developer é do Google Chrome.

Primeiro, abra o Google Chrome e clique em > Mais ferramentas> Ferramentas de desenvolvedor Do canto superior direito do Google Chrome.

O Google Chrome Developer Tools deve ser exibido.

Você também pode visitar um site do Google Chrome e inspecionar um elemento do site para abrir as ferramentas do desenvolvedor.

Para inspecionar um elemento de uma página da web, clique com o botão direito do mouse (RMB) e clique em Inspecionar.

Você também pode pressionar + + C Para inspecionar um elemento de uma página da Web e abrir as ferramentas do Google Chrome Developer.

As ferramentas de desenvolvedor do Google Chrome devem ser abertas.

Da mesma maneira, você pode abrir o console das ferramentas de desenvolvedor do Google Chrome pressionando + + J.

Docking Google Chrome Developer Tools em diferentes locais

Se você não possui um monitor grande o suficiente, pode não querer que as ferramentas de desenvolvedor do Google Chrome sejam atracadas no lado direito do Google Chrome.

Clique em e selecione uma posição de ancoragem no Lado da doca Seção para alterar a posição de ancoragem do Google Chrome.

Descarga o Google Chrome Developer Tools em uma janela separada.

Dock Google Chrome Developer Tools para a esquerda.

Dock Google Chrome Developer Tools para o fundo.

Dock Google Chrome Developer Tools para a direita.

Alguns dos recursos do Google Chrome Developer Tools

O Google Chrome Developer Tools tem algumas guias e você pode fazer coisas específicas de cada uma das guias.

De Elementos guia, você pode inspecionar elementos diferentes da página da web; Verifique os estilos CSS e o tamanho calculado dos elementos; fazer alterações instantâneas no HTML DOM e CSS da página da web e veja os resultados; e muitos mais.

De Console guia, você pode visualizar mensagens de log e executar códigos JavaScript.

De Fontes TAB, você pode depurar códigos JavaScript, salvar e executar trechos de código JavaScript, alterações persistentes feitas nas ferramentas do Google Chrome Developer nas recargas de página e salvar as alterações que você fez usando as ferramentas de desenvolvedor do Google Chrome no disco.

De Rede guia, você pode monitorar a atividade de rede, arquivos solicitados pela página da web e o tempo necessário para carregar e depurar a atividade de rede da página da web.

De Desempenho guia, você pode gravar o tempo de carregamento da página e o desempenho do site. Você também pode encontrar maneiras de melhorá -los.

De Memória guia, você pode monitorar o uso da memória do seu site e corrigir problemas incomuns de memória.

De Aplicativo guia, você pode inspecionar todos os recursos carregados do seu site, como:

• Indexeddb
• Bancos de dados SQL da Web
• Armazenamento local
• Armazenamento de sessão
• Biscoitos
• Cache do aplicativo
• Imagens
• Fontes
• Folhas de estilo

De Segurança guia, você pode depurar problemas de certificação, problemas de conteúdo misto e muitos outros problemas de segurança do site.

De Farol guia, você pode gerar um relatório do farol.

De Gravador guia, você pode medir o desempenho em todo o fluxo do usuário do site.

De Insight de desempenho guia, você pode obter informações de desempenho acionáveis ​​em seu site.

Você pode ver como seu site se olha para dispositivos de diferentes tamanhos de tela usando o Modo de dispositivo do Google Chrome Developer Tools.

Para mudar para Modo de dispositivo, Clique no botão de alternância.

Seu site deve ser exibido em diferentes tamanhos de tela no modo de dispositivo. Você pode alterar o tamanho da tela e ver como o site ficará em dispositivos com o tamanho da tela.

Ferramentas de encerramento do desenvolvedor no Google Chrome

Para fechar as ferramentas de desenvolvedor do Google Chrome, clique em X.

As ferramentas de desenvolvedor do Google Chrome devem ser fechadas.

Conclusão

Eu mostrei como abrir as ferramentas de desenvolvedor do Google Chrome e discuti alguns dos recursos das ferramentas do Google Chrome Developer. Para saber mais sobre as ferramentas do Google Chrome Developer e cada um de seus recursos, confira os links na seção Referências abaixo.

Referências:

1. Visão geral - desenvolvedores do Chrome
2. Registre, reproduz e medem fluxos de usuário - desenvolvedores do Chrome
3. Performance Insights: Obtenha informações acionáveis ​​sobre o desempenho do seu site - desenvolvedores do Chrome