Home-theater-designers
O Chrome DevTools é um ativo essencial para desenvolvedores. Embora outros navegadores ofereçam ferramentas de solução de problemas bastante úteis, o Chrome DevTools merece sua atenção por causa de sua interface multifuncional e popularidade.
O Chrome é o navegador mais popular para desenvolvedores devido ao seu poderoso conjunto de ferramentas de depuração. Usar o Chrome DevTools é fácil, mas você precisa entender como funciona para obter o máximo dele.
Como funcionam as ferramentas para desenvolvedores do Chrome
O Chrome DevTools permite que você resolva problemas em um site por meio de seu console de erro e outras ferramentas de depuração e monitoramento. O uso do DevTools expõe brechas de frontend e permite monitorar como seu site aparece em dispositivos móveis e tablets.
Com DevTools, você pode realizar edições em tempo real no código de um site, como JavaScript, HTML e CSS, e obter resultados instantâneos de suas alterações.
As alterações feitas por meio do DevTools não afetam o site permanentemente. Eles exibem apenas temporariamente o resultado esperado, como se você os tivesse aplicado ao código-fonte real. Isso permite que você descubra maneiras de fazer com que seu site carregue com muito mais rapidez e facilita a correção de bugs.
Como acessar o Chrome DevTools
Você pode acessar o Chrome DevTools de várias maneiras. Para abrir as ferramentas do desenvolvedor com o método de atalho no Mac OS, pressione Cmd + Opt + I . Se você estiver usando o sistema operacional Windows, clique no botão Ctrl + Shift + I teclas do seu teclado.
Como alternativa, você pode acessar as ferramentas de desenvolvedor do Chrome clicando nos três pontos no canto superior direito da tela. Dirigir a Mais ferramentas e selecione Ferramentas de desenvolvimento . Outra opção é clicar com o botão direito na página da web e clicar no Inspecionar opção.
Usando as ferramentas do desenvolvedor do Chrome para diagnóstico de sites
O Chrome DevTools oferece várias maneiras de ajustar e solucionar problemas de uma página da web. Vamos dar uma olhada em algumas maneiras pelas quais o DevTools pode ajudá-lo.
Veja a aparência do seu site em um smartphone
Depois de alternar o navegador Chrome para o modo de desenvolvedor, ele renderiza uma versão com metade do tamanho de sua página da web. No entanto, isso não lhe dará uma visão real de como seria em um smartphone ou tablet.
Felizmente, além de definir o tamanho da tela de uma página da web, o Chrome DevTools também permite alternar entre diferentes tipos e versões de tela de celular.
Para acessar essa opção, ative o Inspecionar modo. Em seguida, clique no Responsivo menu suspenso no canto superior esquerdo das DevTools e selecione seu dispositivo móvel preferido. A página da web então é renderizada e ajustada para caber no tamanho do dispositivo móvel que você selecionou.
rolar com janelas de dois dedos 10
Acesse os arquivos de origem de uma página da web
Você pode acessar os arquivos que compõem uma página da web por meio do Chrome DevTools. Para acessar esses arquivos, clique no botão Fontes opção na parte superior do menu DevTools. Isso expõe o sistema de arquivos do site e também permite a edição.
Você também pode pesquisar arquivos de origem, o que pode ser útil quando você está lidando com uma página da web que possui muitos recursos. Para pesquisar um arquivo de origem por meio do DevTools, clique no Procurar opção logo acima do console.
No entanto, se você não conseguir encontrar o Procurar opção, uma alternativa melhor é usar os atalhos do teclado. No Mac OS, pressione o Cmd + Opt + F para pesquisar um arquivo de origem. Se você estiver usando o sistema operacional Windows, pressione o botão Ctrl + Shift + F para acessar a barra de pesquisa do arquivo de origem.
Execute edições ao vivo em uma página da web
Um dos principais objetivos do uso do DevTools é realizar um edição falsa instantânea dos elementos em uma página da web . Depois de mudar para as ferramentas do desenvolvedor, você pode editar o conteúdo HTML de um site clicando no Elementos opção. Em seguida, clique com o botão direito em qualquer ponto em que deseja aplicar as alterações no editor de código e selecione Editar como HTML .
Para editar propriedades CSS que não são embutidas, selecione Fontes . Em seguida, selecione o arquivo CSS que deseja editar. Coloque o cursor na linha de escolha no console de código para realizar uma edição ao vivo. Isso fornece feedback instantâneo sobre qualquer mudança de estilo aplicada à página da web.
Observe que quando você edita uma página por meio do DevTools, recarregar a página em seu navegador a reverte à sua forma original e a edição fica visível apenas para você. A edição via DevTools não afeta o bom funcionamento nem o uso desse site para outros usuários.
Depure o código JavaScript com o console DevTools
Uma das melhores maneiras de depurar JavaScript é usando as ferramentas de desenvolvedor do Chrome. Ele fornece um relatório direto de scripts inválidos, bem como a localização exata do bug.
É uma boa prática sempre manter o DevTools aberto ao projetar um site com JavaScript. Por exemplo, executando o console.log () O comando do JavaScript em um conjunto de instruções exibe o resultado desse log no console do DevTools se o programa for executado com êxito.
Por padrão, o console relata quaisquer problemas de JavaScript em seu site. Você pode encontrar o console na parte inferior do DevTools ou acessá-lo clicando no Console opção na parte superior da janela Chrome DevTools.
Monitore o carregamento de recursos de um banco de dados
Além de depurar o JavaScript, o console também pode fornecer detalhes dos recursos que não estão sendo carregados corretamente do banco de dados do site.
Embora nem sempre seja a melhor maneira de depurar problemas de back-end, ainda informa quais recursos estão retornando um 404 erro após executar uma consulta de banco de dados desses elementos.
Relacionado: Erros comuns de sites e o que eles significam
Mudar a orientação das ferramentas de desenvolvedor do Chrome
Para alterar a posição das ferramentas de desenvolvedor do Chrome, clique nos três pontos do menu dentro do DevTools (não o principal no navegador). Em seguida, selecione sua posição preferida a partir do Lado da doca opção.
Instale extensões Chrome DevTools
Você também pode instalar extensões específicas de linguagem ou estrutura que funcionam com o Chrome DevTools. A instalação dessas extensões permite que você depure sua página da web com mais eficiência.
Você pode acessar uma lista de extensões disponíveis para Chrome DevTools no Chrome Extensões DevTools em destaque galeria.
Verifique se há problemas de segurança em um site
O Chrome DevTools permite que você avalie o quão seguro é seu site, com base em parâmetros como a disponibilidade de certificados de segurança da web e quão segura é a conexão, entre outros. Para verificar se o seu site é seguro, clique no Segurança opção na parte superior das DevTools.
o Segurança A guia fornece uma visão geral dos detalhes de segurança do seu site e informa sobre quaisquer ameaças em potencial.
Audite o seu site
O Chrome DevTools tem um recurso que permite verificar o desempenho geral do seu site com base em parâmetros específicos.
Para acessar esse recurso, selecione o Farol opção na parte superior da janela DevTools. Em seguida, selecione os parâmetros que deseja verificar e marque o Móvel ou Área de Trabalho opções para ver o desempenho de sua página da web em diferentes plataformas.
Em seguida, clique em Gerar relatório para executar uma análise de sua página da web com base nos parâmetros que você selecionou anteriormente.
Você também pode avaliar o tempo de execução ou desempenho de carregamento de um site clicando no atuação opção. Para executar um teste, clique no ícone ao lado do Clique no botão de gravação opção para realizar uma análise em tempo de execução. Como alternativa, clique no botão recarregar abaixo dele para avaliar o desempenho do tempo de carregamento. Clique em Pare para parar o analisador e exibir os resultados.
Aproveite as vantagens do Chrome DevTools
Dependendo do que você precisa, o Chrome DevTools permite que você faça mais do que apenas depurar um site. Felizmente, DevTools são fáceis de usar para programadores de todos os níveis de habilidade. Você pode até aprender algumas noções básicas de desenvolvimento de front-end de sites pesquisando o código-fonte dos sites que você visita.
como consertar toque fantasma no iphone
Você também pode descobrir algumas outras opções que não discutimos neste artigo. Portanto, fique à vontade para brincar com os recursos disponíveis. Além disso, ajustar esses recursos não prejudica nem um pouco um site.
Compartilhado Compartilhado Tweet O email Como usar o Chrome OS em um Raspberry PiNão pode comprar um Chromebook? Procurando uma alternativa ao Raspbian? Veja como instalar uma versão do Chrome OS em seu Raspberry Pi.
Leia a seguir Tópicos relacionados- Internet
- Programação
- HTML
- Desenvolvimento web
- JavaScript
- Google Chrome
Idowu é apaixonado por qualquer tecnologia inteligente e produtividade. Em seu tempo livre, ele brinca com codificação e muda para o tabuleiro de xadrez quando está entediado, mas também adora quebrar a rotina de vez em quando. Sua paixão por mostrar às pessoas o caminho da tecnologia moderna o motiva a escrever mais.
Mais de Idowu OmisolaAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever